Vue axios 配置拦截

npm安装axios

$ npm install axios

来个地址备用 http://www.axios-js.com/

全局默认配置

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

配置的优先顺序

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();

// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;

// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

超时时间这个一般根据实际项目情况进行配置，单位是毫秒，当请求接口等待时间比较长时，建议配置大一点，不然就直接出现请求超时了。

拦截器

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);
  });

请求之前的拦截，一般是加一些token 或者参数 之类的公用配置。
响应拦截，一般可以对返回内容进行统一处理，例如根据返回code统一的错误弹窗。