关于axios配置拦截器不生效的问题

最近是在网上找了个开源项目准备二次开发，在跑后台项目时遇到个大坑，由于以前没遇到过，花了不少时间，今天被同事解决了，记录一下。

问题描述：

axios配置请求拦截器响应拦截器（为了对请求统一设置token，获取token，状态码判断），

代码如下：

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 10000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['token'] = getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)

// response 拦截器
service.interceptors.response.use(
  response => {
    /**
     * code为非20000是抛错 可结合自己业务进行修改
     */
    const res = response.data
    if (res.code !== 200) {
      Message({
        message: res.msg,
        type: 'error',
        duration: 5 * 1000
      })

      // 302:非法的token;  301:Token 过期了; 305 菜单过期;
      if (res.code === 302 || res.code === 301 || res.code === 305) {
        MessageBox.confirm(
          '你已被登出，可以取消继续留在该页面，或者重新登录',
          '确定登出',
          {
            confirmButtonText: '重新登录',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        })
      }
      // return res
      return Promise.reject('error')
    } else {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

当时是遇到问题发现这个request拦截器可以生效，但是response拦截器不能生效。或者说注释掉request拦截器后，response拦截器才会生效（在代码中debug不进断点），从页面调试发现axios对象是成功设置了两个拦截器。一切都是那么的无可挑剔。但是就是不能正常跑起来。

解决方式：

超级简单，在项目目录下执行，然后重启项目，项目执行正常了就。

npm update

可以看到问题是 axios版本问题。

0.21.2这个版本属于是有bug了，搞不懂为啥这么坑。

写这个帖子的目的是当时网上查资料没有搜到有相关的帖子，所以我发一个救救遇到类似问题的孩子们，当你觉得一切的都很完美的时候，不防考虑下三方包版本问题、构建工具问题等等。