拦截器的作用主要是在axios请求和响应之前拦截请求。拦截器有两种，请求拦截一般会统一在请求头中添加token。响应拦截一般会处理异常错误信息，以及401跳转登录页。

在请求或响应被 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.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // config配置对象(请求报文)：请求地址、请求方法、请求头、请求体
  // 判断有没有token，如果有就在请求头添加
  if (localStorage.getItem('token')) {
    config.headers.Authorization = localStorage.getItem('token')
  }
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  // response响应对象(响应报文)：响应状态码、响应头、响应体、请求配置
  return response;
}, function (error) {
  // 对响应错误做点什么
  // (1)统一处理错误信息
  Toast.fail(error.response.data.message)
  // (2)如果是401: 没token、token过期了,就跳转登录页
  if (error.response.status === 401) {
    location.href = './login.html'
  }
  return Promise.reject(error);
});