【JavaScript】axios 二次封装拦截器(接口、实例、全局)

devtools/2024/11/6 14:30:58/

学习 coderwhy 老师结合 ts 二次封装 axios

目录结构

在这里插入图片描述

config

config\index.ts

// export const BASE_URL = "http://codercba.com:9002";
export const TIME_OUT = 10000;// 1. 根据环境变量区分接口地址
// let BASE_URL: string;
// if (process.env.NODE_ENV === "development") {
//   BASE_URL = "http://codercba.com:9002"
// } else {
//   BASE_URL = "http://codercba.com:9002"
// }// 2. 通过创建 .env 文件来自定义环境变量
const BASE_URL  = process.env.REACT_APP_BASE_URLexport { BASE_URL }

request

request\index.ts

import axios, {AxiosInstance, InternalAxiosRequestConfig} from "axios";
import { RequestConfig } from "@/service/request/type";class MyRequest {instance: AxiosInstance;constructor(config: RequestConfig) {this.instance = axios.create(config);// 1. 全局拦截器和实例拦截器this.instance.interceptors.request.use(function (config) {console.log("全局请求成功的拦截");return config;},function (error) {console.log("全局请求失败的拦截");return Promise.reject(error);});this.instance.interceptors.response.use(function (response) {console.log("全局响应成功的拦截");return response.data;},function (error) {console.log("全局响应失败的拦截");return Promise.reject(error);});// 2. 配置针对特殊的接口的单次请求拦截this.instance.interceptors.request.use(config.interceptors?.requestSuccessFn,config.interceptors?.requestFailureFn);this.instance.interceptors.response.use(config.interceptors?.responseSuccessFn,config.interceptors?.responseFailureFn);}/** 我们希望对每次请求每个接口 request 和 response 都进行定制化的拦截* request({*   url:'/xxx',*   interceptors:{*     requestSuccessFn:(config) => {*       console.log("针对 /xxx 请求成功的拦截");*       return config;*     },*   }* })** 某个接口的请求拦截 -> 全局请求拦截 -> 全局响应拦截 -> 某个接口的响应拦截* *//*** 封装请求方法* @param config*/request<T = any>(config: RequestConfig<T>) {if (config.interceptors?.requestSuccessFn) {// 返回拦截处理后新的 config // 如今新的源码里面需要使用 InternalAxiosRequestConfig 否则会报错config = config.interceptors.requestSuccessFn(config as InternalAxiosRequestConfig) as InternalAxiosRequestConfig;}return new Promise<T>((resolve, reject) => {this.instance.request<any, T>(config).then((res) => {if (config.interceptors?.responseSuccessFn) {res = config.interceptors.responseSuccessFn(res);}resolve(res);}).catch((err) => reject(err));});}get<T = any>(config: RequestConfig<T>) {return this.request({ ...config, method: "GET" });}post<T = any>(config: RequestConfig<T>) {return this.request<T>({ ...config, method: "POST" });}delete<T = any>(config: RequestConfig<T>) {return this.request<T>({ ...config, method: "DELETE" });}patch<T = any>(config: RequestConfig<T>) {return this.request<T>({ ...config, method: "PATCH" });}
}export default MyRequest;

request\type.ts

import {AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig} from "axios";/*** 自定义拦截器类型*/
export interface Interceptors<T = AxiosResponse> {requestSuccessFn?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>;requestFailureFn?: (err: any) => any;responseSuccessFn?: (res: T) => T;responseFailureFn?: (err: any) => any;
}/*** 针对于原有 axios 的配置进行二次封装(扩展)*/
export interface RequestConfig<T = AxiosResponse> extends AxiosRequestConfig {interceptors?: Interceptors<T>;
}

index

index.ts

import {BASE_URL, TIME_OUT} from "@/service/config";
import MyRequest from "@/service/request";export const request = new MyRequest({baseURL: BASE_URL,timeout: TIME_OUT
})

总结

  1. 配置的统一管理 .env 比如 timeout 和 baseUrl
  2. 拦截器二次封装(接口(通过 ts 类型约束和类的继承为每一个 request 方法添加自定义 interceptors 配置,配置上有请求和响应成功和失败的方法)、实例(类构造实例)、全局)
  3. 全局拦截(token 设置、loading 效果、message 弹窗提示)

整体下来最难的地方我感觉是 ts 类型的约束,不看一些源码真的理解不了。


http://www.ppmy.cn/devtools/131780.html

相关文章

RabbitMQ 不公平分发介绍

RabbitMQ 是一个流行的开源消息代理软件&#xff0c;它实现了高级消息队列协议&#xff08;AMQP&#xff09;。在 RabbitMQ 中&#xff0c;消息分发策略对于系统的性能和负载均衡至关重要。默认情况下&#xff0c;RabbitMQ 使用公平分发&#xff08;Fair Dispatch&#xff09;策…

Ollama AI 框架缺陷可能导致 DoS、模型盗窃和中毒

近日&#xff0c;东方联盟网络安全研究人员披露了 Ollama 人工智能 (AI) 框架中的六个安全漏洞&#xff0c;恶意行为者可能会利用这些漏洞执行各种操作&#xff0c;包括拒绝服务、模型中毒和模型盗窃。 知名网络安全专家、东方联盟创始人郭盛华表示&#xff1a;“总的来说&…

PyTorch实战-手写数字识别-MLP模型

1 需求 包懂&#xff0c;40分钟掌握PyTorch深度学习框架&#xff0c;对应神经网络算法理论逐行讲解用PyTorch实现图像分类代码_哔哩哔哩_bilibili 10分钟入门神经网络 PyTorch 手写数字识别_哔哩哔哩_bilibili pytorch tutorial: PyTorch 手写数字识别 教程代码 从零设计并训…

数据结构的双向链表

1、头插法创建双向链表&#xff0c;节点是学生信息&#xff08;学号&#xff0c;分数&#xff0c;姓名&#xff09; 2、调用函数遍历链表所有信息 3、调用函数&#xff0c;求出分数是完数的学生&#xff0c;并输出该学生所有信息 4、调用函数&#xff0c;按照姓名查找某个学…

富格林:揭露欺诈陷阱用心追损

富格林指出&#xff0c;现货黄金投资作为一种比较受青睐的投资方式&#xff0c;已经赢得了很多投资理财者的关注了。但是投资现货黄金需要对黄金相关的交易操作和技巧有深入的了解&#xff0c;才能够规避欺诈陷阱用心追损。事实上&#xff0c;掌握一定的交易技巧对于规避欺诈陷…

unity3d————线性插值知识点

一、线性插值的基本概念 线性插值是指在两个已知点之间&#xff0c;按照某种线性关系插入一个新的点的过程。在Unity3D中&#xff0c;线性插值通常用于在两个数值、向量、颜色等之间平滑过渡。 二、Unity3D中的线性插值函数 Unity3D提供了多个线性插值函数&#xff0c;以满足…

第三十三章:docker 启动mysql web管理工具- MyWebSQL

mysql web管理工具- MyWebSQL 目标 掌握docker 安装 mywebsqlMyWebSQL介绍 MyWebSQL 是一个基于 Web 的数据库管理工具,它允许用户通过浏览器管理 MySQL 数据库。与 Navicat 这样的桌面 SQL 客户端工具相比,MyWebSQL 有一些明显的优势和劣势: 优势: 跨平台性:MyWebSQL 作…

气膜网球馆:城市文体生活的新标杆—轻空间

在城市的喧嚣中&#xff0c;气膜网球馆为广大运动爱好者提供了一个理想的锻炼空间。宽阔的标准网球场地铺设着专业的运动地胶&#xff0c;确保每一次击球都伴随着畅快的回响&#xff0c;让您在运动中尽情释放热情。 满足多样化的需求 气膜网球馆不仅适合日常锻炼&#xff0c;还…