https://img-blog.csdnimg.cn/img_convert/018b01e4bd66f69c1076f003be3150e7.gif" alt="018b01e4bd66f69c1076f003be3150e7.gif" />
码甲哥继续在同程艺龙写一点大前端,今天我们来了解一下如何拦截axios请求/响应?这次我们举一反三,用一个最舒适的姿势插入这个技能点。
本文阅读耗时5 minute,行文耗时5 Days。
axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js;promise 类似于C#的Task async/await机制,以同步的代码风格编写异步代码;
而axios拦截器就类似于 C# HttpClient自定义message Handler, 给你一个请求/响应在被handler之前做一些自定义动作的机会。
https://img-blog.csdnimg.cn/img_convert/dff8bf0a3fd6633eff8b4d06e5dc808e.png" alt="dff8bf0a3fd6633eff8b4d06e5dc808e.png" />
C#请求/响应拦截器
https://img-blog.csdnimg.cn/img_convert/1d65b646cf13cca4379bfbd7afd62ab6.png" alt="1d65b646cf13cca4379bfbd7afd62ab6.png" />
axios请求/响应拦截器的定位就类似于 C# HttpClient的自定义message handler。
.NET默认的message handler是HttpClientHandler
,开发者可以插入自定义的message handler。
用途举例 ① 插入日志 ② 插入自定义Header
(1) 更具体的就是System.Net.Http.DelegatingHandler
类,开发者重写SendAsync
方法,可以拦截请求/响应, 注入动作。
protected override Task<HttpResponseMessage> SendAsync(
HttpRequestMessage request, System.Threading.CancellationToken cancellationToken)
}
自定义message handler形成的是pipeline, 肉眼可猜测使用的是责任链
模式。
(2) 添加自定义message handler
使用HttpCLientFactory.Create方法:
HttpClient client = HttpClientFactory.Create(new MessageHandler1(), new MessageHandler2());
自定义message handler的执行顺序,是传入Create
方法的顺序,也就是说,上面最后一个handler是最先接触到响应的。
------https://img-blog.csdnimg.cn/img_convert/cb392e0900c2a9097dfab7f19a0a0629.png" alt="cb392e0900c2a9097dfab7f19a0a0629.png" />
https://img-blog.csdnimg.cn/img_convert/3198e8398559e41774aef187a97ff9f9.png" alt="3198e8398559e41774aef187a97ff9f9.png" />以上是.NET Framework插入拦截器的用法-------
推及到.NET Core, 因为大量应用了提前配置
&&依赖注入
,实际由IHttpClientFactory
来注入HttpClient。
提前配置HttpClient拦截器的代码如下:
services.AddHttpClient("bce-request", x =>
x.BaseAddress = new Uri(Configuration.GetSection("BCE").GetValue<string>("BaseUrl")))
.ConfigureHttpMessageHandlerBuilder(_=> new LoggerMessageHandler{...} )
.ConfigurePrimaryHttpMessageHandler(_ => new BceAuthClientHandler{...})
更多有关.NET Core IHttpClientFactory的内幕请点这里。
https://img-blog.csdnimg.cn/img_convert/f86b70d99ee3e882d1b2d0fc47a6fa3b.png" alt="f86b70d99ee3e882d1b2d0fc47a6fa3b.png" />
axios 拦截器
https://img-blog.csdnimg.cn/img_convert/6bbea5f1c25330f040121132e8eb7ed0.png" alt="6bbea5f1c25330f040121132e8eb7ed0.png" />
axios一般发起的是ajax请求
,我们一般会封装处理一些通用的请求/响应动作。
码甲哥就遇到:
(1) 在每次ajax跨域请求时,允许携带第三方凭据(cookie、authorization)
(2) 封装4xx响应码的处理逻辑
其中就要用到axios的拦截器:
export interface AxiosInterceptorManager<V> {
use<T = V>(onFulfilled?: (value: V) => T | Promise<T>, onRejected?: (error: any) => any): number;
eject(id: number): void;
}
仔细围观use
sdk,支持传入两个函数,
表示请求(响应)一旦准备好了/失败了,你可以注入的动作。
精简代码如下:
import axios from 'axios';
import {
message
} from 'antd'
const service = axios.create({
baseURL: process.env.REACT_APP_APIBASEURL,
timeout: 5000
})
// 添加请求拦截器
service.interceptors.request.use((reqconfig) => {
reqconfig.withCredentials = true;
return reqconfig;
}, (error) => {
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use((response) => {
return response;
}, (error) => {
if (error.response && error.response.status === 401) {
message.error("无权限操作,请联系tvs运维.")
}
return Promise.reject(error);
});
以上对于前端老鸟不值一提,但是上述拦截动作对于把握全栈web开发必不可少。
本文另作为前端快闪四:如何拦截axios请求/响应?https://img-blog.csdnimg.cn/img_convert/ff0fc3ff2f88ece59fd4d894e9f6c16a.png" alt="ff0fc3ff2f88ece59fd4d894e9f6c16a.png" />
https://img-blog.csdnimg.cn/img_convert/38ba2951aa1cf9ec811271bc5e851801.png" alt="38ba2951aa1cf9ec811271bc5e851801.png" />
旁白
当你的基础知识体系形成了知识树,你会发现各种语言的对于某个技能点的实现都是同一种套路,差别只在于场景。
这就会给你一个感觉,你目前虽然不知道怎么写, 但是你知道它就在那里,它在那里,就在那里https://img-blog.csdnimg.cn/img_convert/04765c4637ad39f65eb261dd2bda6a53.png" alt="04765c4637ad39f65eb261dd2bda6a53.png" />......
https://img-blog.csdnimg.cn/img_convert/7c3683d912b45181bc62a3e4e0cbfadf.gif" alt="7c3683d912b45181bc62a3e4e0cbfadf.gif" />
●HttpClientFactory的套路,你知多少?
●HttpClientFactory日志不好用,自己扩展一个?
●我又踩坑了!如何为HttpClient请求设置Content-Type标头?
●前端快闪三:多环境灵活配置react
●大前端快闪二:react开发模式 一键启动多个服务http://mp.weixin.qq.com/s?__biz=MzI4NTU0NjYwOA==&mid=2247484721&idx=1&sn=e244dc59b0ba3fba69de333d73436219&chksm=ebebc42edc9c4d381732099da3a6afc60dbafdd2461027035b1185d7c3d770ba42f5db06127c&scene=21#wechat_redirect">
●大前端快闪:package.json文件知多少?
点“赞”https://img-blog.csdnimg.cn/img_convert/a73ef8146c4f6afcae8c1d9eb489b57b.gif" alt="a73ef8146c4f6afcae8c1d9eb489b57b.gif" />戳“在看”
https://img-blog.csdnimg.cn/img_convert/4c17c71971443c221e3894649701c8b7.gif" alt="4c17c71971443c221e3894649701c8b7.gif" />
体现态度很有必要!