一、 拦截器介绍

一般在使用axios时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

1. 请求拦截器

   在请求发送前进行必要操作时，例如添加统一cookie、请求体加验证、设置请求头等相当于是对每个接口里相同操作的一个封装；

// 请求拦截器 instance.interceptors.request.use(req=>{}, err=>{});

// use(两个参数)
axios.interceptors.request.use(req => {
    // 在发送请求前要做的事儿
    ...
    return req
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

2. 响应拦截器

   同理，响应拦截器也是如此功能，只能在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等；也常来判断登陆失败。

// 响应拦截器 instance.interceptors.reponse.use(req=>{}, err=>{});

// use(两个参数)
axios.interceptors.reponse.use(res => {
    // 请求成功对响应数据做处理
    ...
    // 该返回的数据则是axios.then(res)中接收的数据
    return res
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

3. 常见错误码处理(error) axios请求错误时，可在catch里进行错误处理。

axios.get().then().catch(err => {
    // 错误处理
})

axios请求拦截器的案例

-->// 设置请求拦截器
axios.interceptors.request.use(
  config => {
    -->// console.log(config) // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
    config.headers.Authorization = store.state.token
    return config -->// 对config处理完后返回，下一步将向后端发送请求
  },
  error => { // 当发生错误时，执行该部分代码
    -->// console.log(error) // 调试用
    return Promise.reject(error)
  }
)

-->定义响应拦截器 -->token值无效时,清空token,并强制跳转登录页
axios.interceptors.response.use(function (response) {
  -->//响应状态码为 2xx 时触发成功的回调，形参中的 response 是“成功的结果”
  return response
}, function (error) {
  -->// console.log(error)
  -->// 响应状态码不是 2xx 时触发失败的回调，形参中的 error 是“失败的结果”
  if (error.response.status === 401) {
    -->// 无效的 token
    -->// 把 Vuex 中的 token 重置为空，并跳转到登录页面
    -->// 1.清空token
    store.commit('updateToken', '')
    -->// 2.跳转登录页
    router.push('/login')
  }
  return Promise.reject(error)
})

作者：我彦祖不会秃
链接：juejin.cn/post/710047…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。