这次使用一个最舒服的姿势插入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请求/响应?

相关文章
|
6月前
|
Java Spring 容器
[JavaWeb]——过滤器filter与拦截器Interceptor的使用、执行过程、区别
[JavaWeb]——过滤器filter与拦截器Interceptor的使用、执行过程、区别
106 0
|
6月前
|
Java 应用服务中间件 数据安全/隐私保护
面试官:过滤器Filter和拦截器Interceptors有什么区别?
面试官:过滤器Filter和拦截器Interceptors有什么区别?
67 0
|
6月前
|
存储 Java 应用服务中间件
Servlet执行流程&生命周期&方法介绍&体系结构、Request和Response的功能详解(2)
Servlet执行流程&生命周期&方法介绍&体系结构、Request和Response的功能详解
67 2
|
6月前
|
Web App开发 XML Java
Servlet执行流程&生命周期&方法介绍&体系结构、Request和Response的功能详解(1)
Servlet执行流程&生命周期&方法介绍&体系结构、Request和Response的功能详解
114 2
|
6月前
|
前端开发 Java 应用服务中间件
SpringMvc拦截器和手写模拟SpringMvc工作流程源码详解
MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分。 M: Model,模型层,指工程中的JavaBean,作用是处理数据。 JavaBean分为两类: 1.实体类Bean:专门存储业务数据的,如Student User等 2.业务处理Bean:指Service或Dao对象,专门用于处理业务逻辑和数据访问。
|
XML JSON Java
深入解析 Java 中的 @RequestBody 注解:实现请求体数据的精准处理
在现代 Web 开发中,RESTful API 已经成为了构建应用程序的重要方式,而 Java 中的 `@RequestBody` 注解则是实现请求体数据处理的关键。通过该注解,我们可以将 HTTP 请求中的数据直接映射到 Java 对象,从而实现数据的精准处理和转换。本文将带您深入探索 Java 中的 `@RequestBody` 注解,揭示其原理、用法以及在实际开发中的应用场景。
|
Java Spring
SpringMVC源码分析:一个request请求的完整流程和各组件介绍
SpringMVC源码分析:一个request请求的完整流程和各组件介绍
51 0
|
存储 缓存 安全
SpringMVC源码剖析之自动注入Request,为什么可行?
我们知道在SpringMVC中controller层可以通过Autowire自动注入Request到当前类来使用。如果看过Spring源码,IOC容器进行实例化bean的时候,一级缓存中存放的都是单例Bean。
289 0
SpringMVC源码剖析之自动注入Request,为什么可行?
|
JSON 前端开发 数据格式
SpringMVC源码剖析之参数解析器处理handler参数流程
在适用springMVC的时候,通过注解可以很方便的封装请求数据,响应前端数据,很好奇怎么实现的,于是探索一下
|
前端开发 网络协议 Java
Servlet运行原理_API详解_请求响应构造进阶之路(Servlet_2)
Servlet运行原理_API详解_请求响应构造进阶之路(Servlet_2)
112 0
Servlet运行原理_API详解_请求响应构造进阶之路(Servlet_2)