这次使用一个最舒服的姿势插入HttpClient拦截器技能点

简介: axios是一个基于 promise 的网络请求库,可以用于浏览器和 node.js;promise 类似于C#的Task async/await机制,以同步的代码风格编写异步代码; 而axios拦截器就类似于 C# HttpClient自定义message Handler, 给你一个请求/响应在被handler之前做一些自定义动作的机会。

C#请求/响应拦截器


axios请求/响应拦截器的定位就类似于 C# HttpClient的自定义message handler。


.NET默认的message handler是HttpClientHandler,开发者可以插入自定义的message handler。


用途举例 ① 插入日志 ② 插入自定义Header


063c15467813521c9e28202bef7593b6.png


(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是最先接触到响应的。


------以上是.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{...})


axios 拦截器


     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;
}


仔细围观usesdk,支持传入两个函数,

表示请求(响应)一旦准备好了/失败了,你可以注入的动作。


精简代码如下:


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请求/响应?

相关文章
|
7月前
|
Java 应用服务中间件 数据安全/隐私保护
面试官:过滤器Filter和拦截器Interceptors有什么区别?
面试官:过滤器Filter和拦截器Interceptors有什么区别?
74 0
|
7月前
|
前端开发 小程序
异常处理器与拦截器 深入探究 --拦截器状态码无法被识别
异常处理器与拦截器 深入探究 --拦截器状态码无法被识别
|
Java Apache 网络架构
【小家Spring】Feign发送Get请求时,采用POJO对象传递参数的最终解决方案 Request method ‘POST‘ not supported (附带其余好几个坑)(上)
【小家Spring】Feign发送Get请求时,采用POJO对象传递参数的最终解决方案 Request method ‘POST‘ not supported (附带其余好几个坑)
|
存储 缓存 安全
SpringMVC源码剖析之自动注入Request,为什么可行?
我们知道在SpringMVC中controller层可以通过Autowire自动注入Request到当前类来使用。如果看过Spring源码,IOC容器进行实例化bean的时候,一级缓存中存放的都是单例Bean。
297 0
SpringMVC源码剖析之自动注入Request,为什么可行?
|
负载均衡 Java Spring
【小家Spring】Feign发送Get请求时,采用POJO对象传递参数的最终解决方案 Request method ‘POST‘ not supported (附带其余好几个坑)(下)
【小家Spring】Feign发送Get请求时,采用POJO对象传递参数的最终解决方案 Request method ‘POST‘ not supported (附带其余好几个坑)(下)
【小家Spring】Feign发送Get请求时,采用POJO对象传递参数的最终解决方案 Request method ‘POST‘ not supported (附带其余好几个坑)(下)
|
NoSQL Java API
SSM(十四) 基于 annotation 的 http 防重插件(上)
针对于我们现在常用的RESTful API通常我们需要对请求进行唯一标识,也就是每次都要带上一个请求号,如reqNO。
|
JSON Java 数据格式
Spring拦截器获取request请求体中的json数据,并转换成Java对象的解决办法
Spring拦截器获取request请求体中的json数据,并转换成Java对象的解决办法
|
缓存 NoSQL Java
SSM(十四) 基于 annotation 的 http 防重插件(下)
针对于我们现在常用的RESTful API通常我们需要对请求进行唯一标识,也就是每次都要带上一个请求号,如reqNO。
|
Java 应用服务中间件 测试技术
轻松把玩HttpClient之封装HttpClient工具类(九),添加多文件上传功能
       在Git上有人给我提Issue,说怎么上传文件,其实我一开始就想上这个功能,不过这半年比较忙,所以一直耽搁了。这次正好没什么任务了,赶紧完成这个功能。毕竟作为一款工具类,有基本的请求和下载功能,就差上传了,有点说不过去。
1605 0
|
Java 测试技术
轻松把玩HttpClient之封装HttpClient工具类(八),优化启用Http连接池策略
div.fox_html_content { line-height: 1.5;} /* 一些默认样式 */ blockquote { margin-Top: 0px; margin-Bottom: 0px; margin-Left: 0.
2465 0