本文转载请联系精益码农公众号。axios是一个基于promise的网络请求库，可以在浏览器和node.js中使用；promise类似于C#的Taskasync/await机制，以同步代码风格编写异步代码；axios拦截器类似于C#HttpClient，因为定义消息处理程序使您有机会在请求/响应被处理程序处理之前执行一些自定义操作。C#请求/响应拦截器axios请求/响应拦截器的位置类似于C#HttpClient的自定义消息处理程序。.NET的默认消息处理程序是HttpClientHandler，开发人员可以插入自定义消息处理程序。使用示例①插入日志②插入自定义Headers(1)更具体地说，System.Net.Http.DelegatingHandler类，开发人员在该类中重写SendAsync方法以拦截请求/响应并注入操作。protectedoverrideTaskSendAsync(HttpRequestMessagerequest,System.Threading.CancellationTokencancellationToken)}自定义的消息处理器形成了一个管道，肉眼可以猜到它使用的是责任链模型。(2)使用HttpCLientFactory.Create方法添加自定义消息处理器：HttpClientclient=HttpClientFactory.Create(newMessageHandler1(),newMessageHandler2());自定义消息处理程序的执行顺序是Create方法被传递的顺序，也就是说，上面的最后一个处理程序最先得到响应。------以上是.NETFramework插入拦截器的用法--------扩展到.NETCore，因为应用了大量的预配置&&依赖注入，HttpClient是实际上是由IHttpClientFactory注入的。预先配置HttpClient拦截器的代码如下：services.AddHttpClient("bce-request",x=>x.BaseAddress=newUri(Configuration.GetSection("BCE").GetValue("BaseUrl"))).ConfigureHttpMessageHandlerBuilder(_=>newLoggerMessageHandler{...}).ConfigurePrimaryHttpMessageHandler(_=>newBceAuthClientHandler{...})有关.NETCoreIHttpClientFactory的更多详细信息，请单击此处。axios拦截器axios一般会发起ajax请求，而我们一般会封装处理一些常见的请求/响应动作。码哥遇到的：（1）每次ajax跨域请求中，允许携带第三方凭证（cookie，authorization）（2）封装4xx响应码的处理逻辑需要使用axios拦截器：exportinterfaceAxiosInterceptorManager{use(onFulfilled?:(value:V)=>T|Promise,onRejected?:(error:any)=>any):number;eject(id:number):void;}仔细看useddk，它支持传入两个函数，表示一旦request（response）就绪/失败，就可以注入action了。简化代码如下：importaxiosfrom'axios';import{message}from'antd'constservice=axios.create({baseURL:process.env.REACT_APP_APIBASEURL,timeout:5000})//添加请求拦截器service.interceptors.request.use((reqconfig)=>{reqconfig.withCredentials=true;returnreqconfig;},(error)=>{returnPromise.reject(error);});//添加响应拦截器service.interceptors.response.use((response)=>{returnresponse;},(error)=>{if(error.response&&error.response.status===401){message.error("未授权操作，请联系tvs运维。")}returnPromise.reject(错误);});以上这些对于前端老手来说不值一提，但是上面的拦截动作对于掌握全栈web开发是必不可少的。这篇文章又是前端闪四：如何拦截axios请求/响应？
