持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第4天，点击查看活动详情

前言

拦截器就像小区的保安大爷,端着茶缸,兢兢业业登记每一个进出小区的人,有做核酸吗?

没做?

不准进!

有鬼鬼祟祟的的人想出去?您哪一栋的?怎么没见过

axios 拦截器

拦截器（interceptors）用来全局拦截 axios 的每一次请求与响应。

好处：可以把每个请求中，某些重复性的业务代码封装到拦截器中，提高代码的复用性。

1.请求拦截器

固定的基本语法:

// 1.添加请求拦截器
      axios.interceptors.request.use(
        function(config) {
          // 在发送请求之前做些什么?
          //(1)axios发请求  
          //(2)进入请求拦截器  
          //(3)请求发送服务器
          return config// 本次请求配置信息
        },
        function(error) {
          // 对请求错误做些什么
          return Promise.reject(error)
        }
      )      

实际工作中,我们使用请求拦截器主要完成  token的统一注入,展示loading效果,etc等

2.响应拦截器

固定的基本语法:

// 2.添加响应拦截器
      axios.interceptors.response.use(
        function(response) {
          // 对响应数据做点什么?
          //(1)服务器响应  
          //(2)执行响应拦截
          //(3)执行axios的then方法
          return response//服务器响应数据
        },
        function(error) {
          // 对响应错误做点什么
          return Promise.reject(error)
        }
      )  

注意：失败的回调函数可以被省略！

实际工作中响应拦截器主要处理 返回的数据异常 和数据结构问题,比如关闭 Loading 效果