前端快闪四： 拦截axios请求和响应
2024-08-25 06:40:41
马甲哥继续在同程艺龙写一点大前端：
今天我们来了解一下 如何拦截axios请求/响应？
axios是一个基于 promise 的网络请求库，可以用于浏览器和 node.js, promise 类似于C#的Task async/await机制，以同步的代码风格编写异步代码。
axios一般发起的是ajax请求，我们一般会封装处理一些通用的 请求/响应动作。
比如马甲哥就遇到：
- 在每次ajax跨域请求时，允许携带第三方凭据（cookie、authorization）
- 封装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
})
// 添加请求拦截器: 这是向后台服务器发起的ajax请求
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开发必不可少。
最新文章
- JAVA Day10
- [POJ3111]K Best（分数规划, 二分）
- 如何给Firefox附加组件签名
- 更改项目名或者多个项目时，发现多个"Home"匹配的Controller时，解决方法
- Network - Nmap
- ELK 信息统计分析-2
- react绑定事件
- tcp，第一个例子，客户端，服务端
- C++类型转换运算符
- VSTO 为Office已有右键菜单添加自己的菜单项（word,Excel）
- 【NOIP2006提高组】能量项链
- 顺序表(C++实现)
- ConcurrentDictionary内部函数的使用说明
- 深入.NET数据类型（1）
- Vue小问题汇总
- windows下搭建eclipse关于python的开发环境及初始化参数配置
- feedparser的安装
- 高级设计总监的设计方法论——5W1H需求分析法 KANO模型分析法
- python数据结构之哈希表
- html5 页面基本骨架