• axios拦截器是什么?(请求拦截器、相应拦截器),作用?挂载请求头携带token、权限验证等


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

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

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

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


     // 添加响应拦截器

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

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

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

    官网代码:

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

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

    // 添加响应拦截器

    1. axios.interceptors.response.use(function (response) {
    2.     // 2xx 范围内的状态码都会触发该函数:表示成功
    3.     // 对成功的响应数据做点什么
    4.     return response;
    5.   }, function (error) {
    6.     // 超出 2xx 范围的状态码都会触发该函数。
    7.     // 对响应错误做点什么
    8.     return Promise.reject(error);
    9.   });

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

    const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
    axios.interceptors.request.eject(myInterceptor);
    可以给自定义的 axios 实例添加拦截器。

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

      仅供参考!!!

  • 相关阅读:
    【停车场车辆管理系统】从零搭建——首页、登录、注册前端
    【java8】并行流Stream
    推荐一个好用的微信、支付宝等Rust三方服务框架
    第十九课,编写并调用自定义函数
    裸辞18K外包,面试阿里、字节全都一面挂,哭死.....
    编码注入
    Android学习笔记 85. 进行界面测试的Espresso
    【java基础】字符串和日期转化
    青书学堂 看视频 耍课时
    Android之webView打开http链接页面无法加载显示net:ERR_CLEARTEXT_NOT_PERMITTED
  • 原文地址:https://blog.csdn.net/m0_68271787/article/details/136607915