axios / fetch / ajax

ajax

传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。最常用的是jquery的ajax api，对原生XHR请求的封装，添加了对JSONP的支持。

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType
}).then(function(json) {
    //success
}, function(err) {
    //error
});

缺点：

不符合前段MVVM设计；
XHR本身架构不清晰；

axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质也是XHR请求

优点：

支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口（重要，方便了很多的操作）
从 node.js 创建 http 请求
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据

一，安装

1，react框架

npm install react-axios -D
//-D 相当于 --save-dev

import { AxiosProvider, Request, Get, Delete, Head, Post, Put, Patch, withAxios } from 'react-axios'

2，vue框架

npm install -D axios vue-axios


import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios);
//也可以单独使用axios，不需要vue-axios
//注：单独使用axios时，不能Vue.use(axios)，因为axios组件封装没有提供install方法

二，发送请求

1，GET 请求

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
##或者
axios.get('/user', {
    //URL参数，get请求专用
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

2，POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
##相当于
axios.post('/user', {
    //请求体数据，PUT，POST和PATCH请求专用
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

3，自定义请求

（1）axios自定义配置请求

//默认发送get请求
axios(url[, config])
//例如post
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
//例如get
axios({
  method: 'get',
  url: '/user/12345',
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

（2）axios自定义实例请求

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
instance.get(url, {});
instance.post(url, {});

4，多个并发请求

axios.all([axios.get('/user/12345'), axios.get('/user/12345/permissions')])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }))
  .catch(function (error) {
    // 任何一个请求失败
  });

三，拦截器

1，拦截请求

##应用场景：判断用户登录token是否过期等
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //一定要return config，否则请求无法执行
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
  
##实例拦截器
instance.interceptors.request.use(function (config) {
    return config;
});

##移除拦截器
var myInterceptor = [axios/instance].interceptors.request.use(function () {/*...*/});
[axios/instance].interceptors.request.eject(myInterceptor);

2，拦截返回

##应用场景：对响应数据做预处理
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //一定要return response，否则无法获取响应数据
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

四，默认配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout = 2000;
...

五，取消请求

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

六，axios二次封装

// src/http.js
import axios from 'axios';
import { Message, MessageBox } from 'element-ui';

const http = axios.create({
  // baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 5000 // 请求超时时间
});
// request拦截器
http.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token'); 
    if (token) {
      config.headers['Authorization'] = token;
      // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
);

// response 拦截器
http.interceptors.response.use(
  response => {
    if(response.status === 200){
        return response.data;
    } else {
        //服务端状态错误提示
        return Promise.reject('error');
    }
  },
  error => {
    //请求错误提示
    return Promise.reject(error);
  }
);
export default http;

// src/reset.js
import http from './http.js'

export default {
  post(url, data) {
    return http.post(url, data)
  },
  get(url, params) {
    return http.get(url, {
        params: params
    })
  }
}

// src/api/[各模块api请求封装].js
import request from '@/reset.js'; 
// axios的封装 后续添加axios二次封装

export async function getCommonList(query) {
  return await request.get('api/getCommonList', query);
}

fetch

fetch是ES6引入的Fetch API提供的接口，也是基于promise设计，但本质不是XHR请求，而是ES6引入的新的网络请求接口。

fetch('http://example.com/movies.json', {
    method: 'POST', //请求方法，默认是get请求
    body: JSON.stringify(data), //post请求传递参数，且需要设置content-type
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'include', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer'
})
.then(response => response.json())
.catch(error => console.error(error));

fetch第一个参数是请求url，第二个参数是请求配置对象，配置请求类型，传递参数，请求头等；
fetch请求成功后返回的是response对象，而不是用户想要的json数据，要想拿到json数据，需要调用response的json()方法；
fetch请求收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500，也会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。可以根据response.ok字段判断是否请求成功。

fetch二次封装

// src/http.js
import { message, Spin } from 'antd';
const token = loaclStorage.getItem('token');
export default {
    get(url, params) {
        if(params) {
            let paramsArray = [];
            //拼接参数
            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
            if (url.search(/\?/) === -1) {
                url += '?' + paramsArray.join('&')
            } else {
                url += '&' + paramsArray.join('&')
            }
        }
        return fetch(url, {
            method: 'GET',
            headers: {
              'Authorization': token,//登录令牌
              'Accept': 'application/json'
            },
            credentials: 'include'
        })
        .then(res => {
            if(res.ok){
                return res.json();
            }else{
                message.error(res.message);
            }
        });
        .catch(err => Promise.reject(err));
    },
    post(url, data) {
        return fetch(url, {
            method: 'POST',
            headers: {
              'Authorization': token,//登录令牌
              'Content-Type': 'application/json',
              'Accept': 'application/json'
            },
            body: JSON.stringify(data),
            credentials: 'include'
        })
        .then(res => {
            if(res.ok){
                return res.json();
            }else{
                message.error(res.message);
            }
        });
        .catch(err => Promise.reject(err));
    }
}

// src/api/[各模块api请求封装].js
import http from '@/http.js';
export async function getUsers() {
    showLoading();
    const users = await http.get('api/users');
    hideLoading();
    return users;
}

axios / fetch / ajax

ajax

axios

一，安装

1，react框架

2，vue框架

二，发送请求

1，GET 请求

2，POST 请求

3，自定义请求

（1）axios自定义配置请求

（2）axios自定义实例请求

4，多个并发请求

三，拦截器

1，拦截请求

2，拦截返回

四，默认配置

五，取消请求

六，axios二次封装

fetch

fetch二次封装

如何使用 JS 判断用户是否处于活跃状态

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

❤️‍🔥 Solon Cloud Event 新的事务特性与应用

在js中實現頁面跳轉

Ajax應用，Struts2

關於properties配置文件讀寫，追加以及中文亂碼問題

快速搭建node服務

React diff 算法 & Virtual DOM

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結