## 一、概述 通过增加拦截器，可以在axios请求前和响应后，干预行为，提供更灵活的调试或UI效果； 拦截请求执行时序图：  ## 二、api >[danger] > 1、请求拦截器：在请求之前可以干预的地方执行；第一个函数一定会执行，第二个只有错误才会执行； > 2、响应拦截器：在响应后，返回到后端之前，执行；如果响应是正常的（请求到的响应对象的status值为200），则执行第一个函数，如果响应出现异常（请求到的响应对象的status值不是200），则执行第二个函数；响应拦截器执行完之后，才会进入then或catch的处理； ``` // 请求拦截器 axios.interceptors.request.use(function (config) { // 1、在发送请求到后台处理逻辑之前，可在这里做些什么 return config; }, function (error) { // 2、对请求错误做些什么 return Promise.reject(error); }); ``` ``` // 响应拦截器 axios.interceptors.response.use(function (response) { // 1、如果是正确响应了，则可以在这里对响应数据做点什么 return response; }, function (error) { // 2、如果响应的过程，请求的结果里面出错，则在这里对响应错误做点什么 return Promise.reject(error); }); ``` ## 三、实例 ``` //http request 拦截器 this.$axios.interceptors.request.use( config => { console.log(config) return config }, err => { Toast({ message: '加载超时', position: 'middle', duration: 3000 }) return Promise.reject(err) } ) //http response 拦截器 this.$axios.interceptors.response.use( response => { console.log(response) return response }, error => { alert(error.message) return Promise.reject(error) } ) ```