从一个舒服的姿势插入 HttpClient 拦截器技能点
马甲哥继续写一点大前端,阅读耗时5 minute,行文耗时5 Days
今天我们来了解一下如何拦截axios请求/响应? 这次我们举一反三,用一个最舒适的姿势插入这个技能点。
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
(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{...})
有关.NET Core IHttpClientFactory的内幕请看这里。
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;
}
仔细围观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请求/响应?
旁白
当你的基础知识体系形成了知识树,你会发现各种语言的对于某个技能点的实现都是同一种套路,差别只在于场景。
这就会给你一个感觉,你目前虽然不知道怎么写, 但是你知道它就在那里,它在那里,就在那里......
从一个舒服的姿势插入 HttpClient 拦截器技能点的更多相关文章
- Angular4---认证---使用HttpClient拦截器,解决循环依赖引用的问题
在angular4 项目中,每次请求服务端需要添加头部信息AccessToken作为认证的凭据.但如果在每次调用服务端就要写代码添加一个头部信息,会变得很麻烦.可以使用angular4的HttpCli ...
- Spring Boot实现一个监听用户请求的拦截器
项目中需要监听用户具体的请求操作,便通过一个拦截器来监听,并继续相应的日志记录 项目构建与Spring Boot,Spring Boot实现一个拦截器很容易. Spring Boot的核心启动类继承W ...
- Okhttp 插入缓存拦截器 解析
我们在做网络请求的时候,如果网络请求过于频繁而且请求的数据变动不大,或者基本没有变动,这个时候如果没有缓存功能,我们想一下 会浪费掉多少资源,一次请求刷新一次,去请求一次,不但会消耗用户的流量,而且还 ...
- Apache httpclient拦截器对请求进行签名
Apahce httpclient 提供HttpRequestInterceptor和HttpResponseInterceptor两种拦截器分别处理请求和响应数据,下面讲一下如何对http请求进行拦 ...
- angular4 httpclient拦截器
1.创建服务: InterceptorService.ts import { Injectable } from '@angular/core'; import { HttpEvent,HttpInt ...
- 浅谈Struts2拦截器的原理与实现
拦截器与过滤器 拦截器是对调用的Action起作用,它提供了一种机制可以使开发者定义在一个action执行的前后执行的代码,也可以在一个action执行前阻止其执行.同时也是提供了 ...
- 从struts2拦截器到自定义拦截器
拦截器可谓struts2的核心了,最基本的bean的注入就是通过默认的拦截器实现的,一般在struts2.xml的配置中,package内直接或间接继承了struts-default.xml,这样st ...
- 六 Struts 拦截器、OGNL表达式
一.OGNL表达式1.概念:是表达式语言,专门用来访问对象取值用的.2.对比EL表达式使用场景: A.EL主要用在web的jsp页面取值 B.OGNL适用以下环境 1.java程序中 2.在页面使用( ...
- java 拦截器、过滤器、监听器
一.理解Struts2拦截器 1. Struts2拦截器是在访问某个Action或Action的某个方法,字段之前或之后实施拦截,并且Struts2拦截器是可插拔的,拦截器是AOP的一种实现. 2. ...
随机推荐
- 关于int和Integer缓存(一):以及设计构想(享元模式)
关于Integer的值缓存:在介绍Integer的值缓存之前,我们需要了解的是,java中的包装类型,我们都知道java中有包装类型int Integer ...
- Java程序设计学习笔记(一)
时间:2015-6-2 23:04 程序员,程序猿,程序媛,码农 ------------------------------------------------------- --Java的应用 ...
- Learning ROS: Running ROS across multiple machines
Start the master ssh hal roscore Start the listener ssh hal export ROS_MASTER_URI=http://hal:11311 r ...
- Cookie及通过Cookie常见应用
会话的概念 会话可以简单理解为:用户打开一个浏览器,点击多个超链接,访问服务器多个web资源,然后关闭浏览器,整个过程称之为一个会话. 会话需要解决的问题 每个用户与服务器进行交互的过程中,各自会有一 ...
- RHCS集群架构之mysql及共享存储iscsi
server1 172.25.7.1(配置Nginx.ricci和luci) server2 172.25.7.2(Apache.iscsi) server3 172.25.7.3(Apache) s ...
- uniapp H5 打包并部署到 nginx
个人也是了百度了挺久的了,花费的时间( 俩个半小时 ) uniapp 的打包首先要先配置,配置好了才能去进行打包,如图所示. 这只是第一步. 注意: 1.运行基础路径最好用 ./ ,如果配置了其他请自 ...
- vue 接入 vod-js-sdk-v6.js 完成视频上传
东西有点多,耐心看完.按照操作一步一步来,绝对能成功 首先:npm 引入 npm install vod-js-sdk-v6 mian.js 全局引入 //腾讯云点播 import TcVod f ...
- JUC原子操作类与乐观锁CAS
JUC原子操作类与乐观锁CAS 硬件中存在并发操作的原语,从而在硬件层面提升效率.在intel的CPU中,使用cmpxchg指令.在Java发展初期,java语言是不能够利用硬件提供的这些便利来提 ...
- 剑指 Offer 38. 字符串的排列
剑指 Offer 38. 字符串的排列 输入一个字符串,打印出该字符串中字符的所有排列. 你可以以任意顺序返回这个字符串数组,但里面不能有重复元素. 示例: 输入:s = "abc" ...
- Tars | 第6篇 基于TarsGo Subset路由规则的Java JDK实现方式(下)
目录 前言 1. 修改.tars协议文件 1.1 Java源码位置及逻辑分析 1.2 Java语言实现方式 1.3 通过协议文件自动生成代码 1.4 变更代码的路径 2. [核心]增添Subset核心 ...