一、使用场景 Axios作为React，Vue，Angular最常使用的HTTP请求库，承担了大部分请求的发送和接收。 在项目中，开发者经常会遇到两种情景 一：在每次发送请求时，携带用户token方便后台做用户相关操作 二：服务器所有接口都会返回一个错误码，比如10001，请求参数错误。 10002，用户未授权等等，我们需要在收到响应后对错误码进行相关提示。 如果我们在每个接口都进行验证那太麻烦，代码冗余不说，后期维护成本也很高，到处找接口进行代码改动。Axios提供了非常方便的一种功能：请求/响应拦截器。我们就可以在这种场景派上用场。
二、请求拦截器 场景：在每次发送请求时，携带用户token方便后台做用户相关操作 在每次发送请求前，都会进入请求拦截器，我们可以在此处统一绑定上想要发送的参数，则每个请求都会自动携带token axios.interceptors.request.use( config => { //config是axios配置对象 //每次发送请求前都会进入此拦截器处理函数，可以在此处统一携带上token，每次请求都会自 config.headers.common['token'] = localStorage.getItem(“token”); return config }, err => { //请求出错的处理函数 return Promise.reject(err) })
三、响应拦截器 场景：服务器所有接口都会返回一个错误码，比如10001，请求参数错误。 10002，用户未授权等等，我们需要在收到响应后对错误码进行相关提示。 在每次收到响应时，都会先进入响应拦截器，在分发给各个请求函数，我们可以在此处统一先处理错误码，在进入各自的响应细节函数处理res
axios.interceptors.response.use(function(res){ //收到响应后，可以先统一处理错误码 switch (res.data.code) { case 10001: alert(‘非法操作’); router.push({path: '/}); case 10002: alert(‘权限不足’); ...... } return res; },function(err){ //响应出错进入的函数 return Promise.reject(err); }); 以上就是axios拦截器的使用教程及场景，希望对大家有所帮助，不管任何项目，只要使用的是axios发送请求，则都可以使用拦截器进行统一处理，减少冗余代码，降低二次开发及维护难度。 （本文由源码时代技术老师撰写，转载请注明出处）
