什么是axios拦截器？有哪些作用和使用场景

axios拦截器

拦截器介绍

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

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

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

比如一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复，所以我们需要用到拦截器

应用场景：
1：每个请求都带上的参数，比如token，时间戳等。
2：对返回的状态进行判断，比如token是否过期

axios的拦截器作用非常大。axios的拦截器分为请求拦截器跟响应拦截器，都是可以设置多个请求或者响应拦截。每个拦截器都可以设置两个拦截函数，一个为成功拦截，一个为失败拦截。在调用axios.request()之后，请求的配置会先进入请求拦截器中，正常可以一直执行成功拦截函数，如果有异常会进入失败拦截函数，并不会发起请求；调起请求响应返回后，会根据响应信息进入响应成功拦截函数或者响应失败拦截函数。

因此，我们可以在拦截器中处理一些请求的统一处理。比如在请求拦截器中设置请求头，处理统一的请求数据，在响应拦截去中根据响应状态码做统一的提示信息，整理响应数据等。

在请求或响应被 then 或 catch 处理前拦截它们。

// 官方用例
// 1.添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
​
// 2.添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

1.axios-请求拦截器

目标

• 什么是请求

• 什么是axios的请求拦截器

场景

• 在发起请求之前, 最后对要发送的请求配置对象进行修改

• 例如: 如果本地有token, 携带在请求头给后台

  // 添加请求拦截器--代码实现案例：仅供参考
  axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么, 如果vuex里有token携带在请求头中
    if (store.state.token.length > 0 && config.headers.Authorization === undefined) {
      // 发起请求之前, 把token携带在请求头上(表明自己身份)
      config.headers.Authorization = 'Bearer ' + store.state.token
    }
    return config
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  })

• 所有api接口里以后暂时不用自己携带Headers+Token了,简略代码，统一管理

小结

1. 请求拦截器时候时候执行?

   • 在发起请求最后一刻执行

2.axios-响应拦截器

目标

• 什么是响应

• 什么是axios的响应拦截器

场景

• 在响应回来后, 马上执行响应拦截器函数

• 例如: 判断是否错误401, 统一进行权限判断

  // 添加响应拦截器--代码实现案例：仅供参考
  axios.interceptors.response.use(function (response) { // 当状态码为2xx/3xx开头的进这里
      // 对响应数据做点什么
      return response
  }, async function (error) { // 响应状态码4xx/5xx进这里
      // 对响应错误做点什么
     if (error.response.status === 401) { // 身份过期/token无效
      //  1.清空vuex的token 
      store.commit('setToken', '')
      store.commit('setRefreshToken', '')
      // 2. 清空本地token 
      localStorage.removeItem('token')
      localStorage.removeItem('refresh_token')
      //  跳转到登录页面登录
      router.push({
        path: '/login'
      })
    }     
      return Promise.reject(error)
  })
  

小结

1. 响应拦截器什么时候执行?

   • 在响应回来以后

2. 什么时候进响应拦截器成功, 什么时候进失败?

   • 2xx/3xx开头的响应状态码进入成功

   • 4xx/5xx开头的响应状态码进入失败