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 () {/*...*/});
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐