请求拦截器和响应拦截器

拦截器介绍

一般在使用axios（只是对Ajax进行了统一的封装）时，会用到拦截器的功能，一般分为两种：请求拦截器、响应拦截器。

请求拦截器

在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装。所谓的请求拦截器，其实就是先执行要添加的数据，然后再执行Ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器了。

响应拦截器

响应拦截器只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。所谓的响应拦截器，就是在请求结果的返回后的同时，先不直接导出，而是先对响应码等等的进行处理，处理好之后再导出给页面，如果将这个对象响应码的处理过程抽出来，就成了所谓的响应拦截器

配置拦截器

1. 创建axios实例

   // 引入axios
   import axios from 'axios'
   
   // 创建实例
   let instance = axios.create({
       baseURL: 'xxxxxxxxxx',
       timeout: 15000  // 毫秒
   })

2. 配置拦截器

   语法

   // 请求拦截器
   instance.interceptors.request.use(req=>{}, err=>{});
   // 响应拦截器
   instance.interceptors.reponse.use(req=>{}, err=>{});

   请求拦截器

   //配置请求拦截器
   instance.interceptors.request.use(function (request) {
       // 在发送请求之前做些什么
       if(localStorage.getItem("token");){
           request.headers.token = localStorage.getItem("token");
       }
       return request;
   }, function (error) {
       // 对请求错误做些什么
       return Promise.reject(error);
   });

   响应拦截器

   //配置响应拦截器
   instance.interceptors.response.use(function (response) {
       // 对响应数据做点什么
       const res = response.data;
       // console.log("backdata=",res);
       if(response.status == 200){
           if(res.code == 200){
               return res;
           }else if(res.code == 401){//"没有权限"
               message.error(res.msg)
               router.push('/login')
           }else if(res.code == 402){//"超时或者不合法的token"
               message.error(res.msg)
               router.push('/login')
           }else if(res.code == 500){
               message.error(res.msg)
               throw res.msg;
           }
       }else{
           message.error(res.msg)
       }
   }, function (error) {
       // 对响应错误做点什么
       return Promise.reject(error);
   });

3. 导出配有拦截器的axios实例

   export {
     axios_instance
   }

总结

• 在需要拦截请求or响应的地方，就可以使用新建的axios_instance实例来发起异步请求；而不需要拦截请求/响应的地方，就可以直接使用普通的axios来发起异步请求！！！
• 请求拦截器：其实就是先执行要添加的数据，然后再执行Ajax，如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器了
• 响应拦截器：就是是在请求结果的返回后的同时，先不直接导出，而是先对响应码等等的进行处理，处理好之后再导出给页面，如果将这个对象响应码的处理过程抽出来，就成了所谓的响应拦截器