前言

Axios 是一个基于 Promise 的网络请求库。Axios 使用简单,包尺寸小且提供了易于扩展的接口。

安装

npm:

$ npm install axios

yarn:

$ yarn add axios

Axios API

发送请求

可以向 axios 传递相关配置来创建请求

axios(config)

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// 在 node.js 用GET请求获取远程图片
axios({
  method: 'get',
  url: 'http://bit.ly/2mTM3nY',
  responseType: 'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
  });

axios(url[, config])

// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');

请求方式别名：

为方便起见，为所有支持的请求方法提供了别名。

axios.request(config)
axios.get(url, [config])
axios.post(url, [data], [config]])
axios.delete(url, [config])
axios.head(url, [config])
axios.put(url, [data], [config])
axios.patch(url, [data], [config]])
axios.options(url, [config])

config 配置对象

最常用的配置：

axios({
  method: 'get', // post、get、put....
  baseURL: '', // 请求的域名，基本地址
  url: '', // 请求的路径
  params: {}, // 会将请求参数拼接在url上
  data: {}, // 会将请求参数放在请求体中
  headers: {}, // 设置请求头，例如设置token等
  timeout: 1000, // 设置请求超时时长，单位：ms
})

全局配置

axios.defaults.baseURL = 'http://alight.work/api';
axios.defaults.timeout = 10000;

在实际项目中，很少用全局配置。

实例配置

可以使用自定义配置新建一个axios实例

const instance = axios.create({
  baseURL: 'http://alight.work/api',
  timeout: 10000,
})

instance.get('/getUserInfo').then(res => {
  // ...
})

请求配置：

const instance = axios.create();
instance.get('/getUserInfo', {
  timeout: 5000
})

并发请求

同时进行多个请求，并统一处理返回值

axios.all(iterable)
axios.spread(callback)

axios.all([
  axios.get('/a'),
  axios.get('/b')
]).then(axios.spread((aRes, bRes) => {
  console.log(aRes, bRes);
}))

拦截器

interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理。

请求拦截器：

axios.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
})

响应拦截器：

axios.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
})

移除拦截器：

const myInterceptor = axios.interceptors.request.use(config => {});
axios.interceptors.request.eject(myInterceptor);

为axios实例添加拦截器：

const instance = axios.create();
instance.interceptors.request.use(config => {});

取消请求

用于取消正在进行的http请求

<!--const cancelToken = axios.CancelToken;-->
<!--const source = cancelToken.source();-->
const source = axios.CancelToken.source();

axios.get('/getUserInfo', {
  cancelToken: source.token
}).then(res => {
  console.log(res);
}).catch(error => {
  if(axios.isCancel(error)) {
    // 取消请求
    console.log(error.message);
  } else {
    // 处理错误
  }
})

// 取消请求 参数 可选
source.cancel('取消请求');

错误处理

在请求错误时进行的处理 request / response 是error的上下文，标志着请求发送 / 得到响应在错误中，如果响应有值，则说明是响应时出现了错误。如果响应没值，则说明是请求时出现了错误。在错误中，如果请求无值，则说明是请求未发送出去，如取消请求。

axios.get('/user/12345')
  .catch(function (error) {
    // 错误可能是请求错误，也可能是响应错误
    if (error.response) {
      // 响应错误
    } else if (error.request) {
      // 请求错误
    } else {
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

在实际开发过程中，一般在拦截器中统一添加错误处理请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。在更多的情况下，我们会在响应拦截器中处理错误。

const instance = axios.create({});
instance.interceptors.request(config => {

}, error => {
  return Promise.reject(error);
})

instance.interceptors.response(response => {

}, error => {
  return Promise.reject(error);
})

axios 预检

当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求。否则会报405错误。

总结

以上就是我对 Axios 常用功能的一些总结。

Axios 使用手册

前言

安装