关于axios拦截器的理解

  • 了解axios
  • axios API
  • axios 实例
  • 拦截器

平时经常使用axios进行交互，发送请求获取响应，但是由于很少接触axios拦截器，所以今天特意去研究了一下 axios

了解axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
有以下几点优势

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

axios API

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

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios 实例

可以使用自定义配置新建一个 axios 实例
axios.create([config])

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

配置的默认值/defaults

你可以指定将被用在各个请求的配置默认值
全局的 axios 默认值

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

可以将token配置在请求头当中，来让每一个请求都携带token

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://'
});

// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

默认值配置的优先顺序
配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。这里是一个例子：

// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `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);
  });

可以为自定义 axios 实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

项目中的例子

// 添加请求拦截器
instance.interceptors.request.use(async function (config) {
    // 登录token带到请求的头部中，用于校验登录状态
    const token = sessionStorage.getItem('token')
    if (token) {
        config.headers['Authorization'] = 'Bearer ' + token
    } else {
        const { data } = await axios.post(B2bUrl + 'uaa/oauth/token', {
            'grant_type': 'client_credentials',
            'client_id': 'boss',
            'client_secret': 'boss',
            'scope': 'boss'
        })
        sessionStorage.setItem('token', data.access_token)
        config.headers['Authorization'] = 'Bearer ' + data.access_token
    }
    store.commit('LOAD_STATE', true)
    return config
}, function (error) {
    return Promise.reject(error)
})

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 尽调返回code 判断 by-勇哥
    // eslint-disable-next-line
    if (response.data.code && response.data.code != 200) {
        Message({
            dangerouslyUseHTMLString: true,
            message: response.data.msg + '<br>请钉钉联系管理员~',
            type: 'error'
        })
        store.commit('LOAD_STATE', false)
        return Promise.reject(response)
    }
    store.commit('LOAD_STATE', false)
    store.commit('IS_SAVING', false)
    return response
}, function (error) {
    // TODO: 异常统一处理
    let errorMessage = ''
    if (error.response && error.response.status === 400) {
        errorMessage = error.response.data.message
    } else {
        errorMessage = '服务器响应错误：' + error
    }
    store.commit('LOAD_STATE', false)
    store.commit('IS_SAVING', false)
    Message({
        message: errorMessage,
        type: 'error'
    })
    return Promise.reject(error)
})

想在稍后移除拦截器，可以这样：

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

用的比较少（至少我目前未涉及过）

总之，通过拦截器我们可以处理在请求、响应过程中需要统一处理的情况，而不需要每一个请求下都去处理，大大方便了我们代码可读性。