Axios简单配置使用

一、请求方法

返回一个Promise

单次请求：

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])
并发请求：

axios.all(iterable)

axios.spread(callback)

二、创建实例

创建实例，会继承axios上的请求方法，并且可以自定义一些共有配置

axios.create(config);

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

三、默认配置

将被用在各个请求的配置默认值。

全局：

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

自定义实例：

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

优先级：

config>instance>axios

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

四、拦截器

在请求或响应被 then 或 catch 处理前拦截它们。

添加拦截器：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
    }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
    });
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
    }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
    });
// 为实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

取消拦截器：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

五、自定义错误范围

设定 validateStatus 属性可以自定义会处理的响应状态码的范围

axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 状态码在大于或等于500时才会 reject
  }
})

六、取消请求

var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
// 取消请求
cancel();

七、参考

https://juejin.im/post/5b27682f6fb9a00e733f121e

https://www.kancloud.cn/yunye/axios/234845