axios拦截器是什么？（请求拦截器、相应拦截器），作用？挂载请求头携带token、权限验证等

        axios在每次发送数据请求时，会首先经过请求拦截器，可以在此挂载统一的token等后才会到达服务器，服务器处理完请求要响应给浏览器时，首先经过响应拦截器才会到达，在此通常做一些响应结果的判断。

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

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

import axios from 'axios'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    // 如在正确的发送axios请求之前，统一挂载请求头
    // 每个axios请求发出会先经过请求拦截器，才会到服务器
    //config返回的就是每次的请求配置对象
    if (store.getters.token) { // 仓库中若有token，证明登陆成功，统一挂载请求头携带token
        config.headers.Authorization = `Bearer ${store.getters.token}`
            //config对象下有hesders就表示为请求头，对象添加方式挂载请求头数据Authorization 
      }
    return config; //处理后的请求对象交给服务器
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error); //请求错误不发送且报错信息
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    //response返回的就是服务器的响应体
    if (response.data.success) { // 借用response对象返回的值判断请求成功与否
        //  每次请求成功要做的操作，比如弹框提示成功，对用户权限进行处理
      } else {
        // 每次请求失败要做的操作，比如弹框提示失败
        // 注意：请求错误后要阻止后续页面的跳转
            // return  // 方法一：阻止后续代码执行，但有问题
            // 方法二：手动抛出错误的promise对象  fullfiled rejected
                //   return new Promise((resolve, reject) => {
                //   reject()
                // })
        return Promise.reject('error') // 方法三：等于以上第二种简写
      }
    return response;
  }, function (error) { //在此可以对token过期进行处理
    //console.dir(error) //里面包含了错误的响应信息，比如借此信息来判断token过期，删除token后返回登录页功能
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

        请求拦截器中config返回的请求体，携带请求头headers、请求方法、地址路径等

        响应拦截器response返回的响应体中，携带config配置对象、数据响应结果以及判断成功与否的状态码

官网代码：

在请求或响应被 then 或 catch 处理前拦截它们，可复制使用，添加功能即可

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数：表示成功
    // 对成功的响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

如果你稍后需要移除拦截器，可以这样：

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

可以给自定义的 axios 实例添加拦截器。

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

代码007普通

打赏 收藏 海报 链接