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

相关文章
|
传感器 数据采集 编解码
多机协同操作系统
ROS(机器人操作系统)是一种开源的机器人软件平台,它提供了一系列工具和库,用于构建复杂的机器人应用程序。ROS支持分布式计算和协同工作,使得多台机器人可以协同完成任务。多机协同的目的是为了让每台设备都能和全体设备或者周边设备进行信息交互来实现相互感知相互控制的结果,通过算法收敛到一个最佳的轨迹,来实现协同工作从而可以提高运输效率和优化生产节拍,提高生产中的安全性和可靠性。在自动化工厂、仓储分拣、自动化货物超市等诸多场景,小车协同机械臂可以为物料的自动搬运、物品的上下料,以及物料的分拣提供自动化、柔性化的作业支持。
|
jenkins Java Shell
使用 Docker 安装 Jenkins 并实现项目自动化部署
Jenkins 是一款开源的持续集成(DI)工具,广泛用于项目开发,能提供自动构建,测试,部署等功能。作为领先的开源自动化服务器,Jenkins 提供了数百个插件来支持构建、部署和自动化任何项目。
35266 3
使用 Docker 安装 Jenkins 并实现项目自动化部署
|
编解码 网络协议 Linux
跨平台 scrcpy显示/控制安卓手机方案
• Genymotion、Parallels Desktop 等虚拟机软件 太专业, 需要配置太多软件, 适合开发者. • 国内一批安卓游戏助手都可以一试, 这里我随便下载了一款网易MuMu对字体的显示不太好. 可以尝试一下 傲软投屏(ApowerMirror) • Vysor Pro 收费较贵,免费版广告又多
962 0
|
消息中间件 Java Kafka
skywalking日志收集
skywalking日志收集
skywalking日志收集
|
6月前
|
人工智能 自然语言处理 运维
让搜索引擎“更懂你”:AI × Elasticsearch MCP Server 开源实战
本文介绍基于Model Context Protocol (MCP)标准的Elasticsearch MCP Server,它为AI助手(如Claude、Cursor等)提供与Elasticsearch数据源交互的能力。文章涵盖MCP概念、Elasticsearch MCP Server的功能特性及实际应用场景,例如数据探索、开发辅助。通过自然语言处理,用户无需掌握复杂查询语法即可操作Elasticsearch,显著降低使用门槛并提升效率。项目开源地址:&lt;https://github.com/awesimon/elasticsearch-mcp&gt;,欢迎体验与反馈。
1516 1
|
10月前
|
存储 安全 物联网
未来已来:区块链技术在物联网与虚拟现实中的应用
随着科技的不断进步,新兴技术如区块链、物联网(IoT)和虚拟现实(VR)正在逐渐改变我们的生活和工作方式。本文将探讨这些技术的发展趋势和应用场景,以及它们如何相互融合,为我们带来更便捷、安全和沉浸式的体验。
|
11月前
|
缓存 API 开发工具
有关Unity使用Rider编辑器无法弹出代码提示的有效解决方法
【11月更文挑战第13天】在 Unity 中使用 Rider 编辑器时,若遇到代码提示无法弹出的问题,可以通过检查 Rider 设置(如自动补全选项、Unity 插件安装、索引设置)、Unity 项目设置(如解决方案正确关联、脚本导入设置)以及环境和依赖关系(如 .NET SDK 版本兼容性、Unity 和 Rider 版本兼容性)等方面进行排查和解决。
1664 5
|
安全 数据处理 数据格式
深入浅出:FFmpeg 音频解码与处理AVFrame全解析(三)
深入浅出:FFmpeg 音频解码与处理AVFrame全解析
496 0
|
Ubuntu 安全 网络协议