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

server/2024/11/28 1:38:33/

学习 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/server/137754.html

相关文章

HTTP 405 Method Not Allowed:解析与解决

HTTP 405 Method Not Allowed&#xff1a;解析与解决 引言 在Web开发中&#xff0c;HTTP状态码是服务器与客户端之间通信的重要组成部分。当我们使用Python进行网络请求时&#xff0c;经常会遇到各种HTTP状态码。其中&#xff0c;HTTP 405 “Method Not Allowed” 错误是一个…

传统的自然语言处理评估指标

目录 传统的自然语言处理评估指标 EM(Exact Match) BLEU(Bilingual Evaluation Understudy) 传统的自然语言处理评估指标 传统评估指标 EM(Exact Match) 计算方式:如果生成的答案与参考答案完全相同(字符级完全匹配),则 EM 得分为 1,否则为 0。这是一种比较严格的…

基于SSM医院门诊互联电子病历管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;医生管理&#xff0c;项目分类管理&#xff0c;项目信息管理&#xff0c;预约信息管理&#xff0c;检查信息管理&#xff0c;系统管理 用户账号功能包括&#xff1a;系统首页&…

刘艳兵-DBA022-以下关于Oracle半连接的描述,哪些是正确的?

以下关于Oracle半连接的描述&#xff0c;哪些是正确的&#xff1f; A SQL中的NOT EXISTS子查询&#xff0c;通常会被转换为对应的半连接。 B SQL中的IN子查询&#xff0c;通常会被转换为对应的半连接。 C 半连接会去重 D SQL中的EXISTS子查询&#xff0c;通常会被转…

打造一个带报时功能的卡通数字时钟 —— 使用Python和Tkinter

引言 在这个数字化时代&#xff0c;我们周围充满了各种各样的电子设备。然而&#xff0c;有时候一个简单而有趣的数字时钟也能给我们的生活带来不少乐趣。本文将介绍如何使用Python和Tkinter库来创建一个带有背景图片和报时功能的卡通数字时钟。这个项目不仅能够展示当前时间&…

visual studio使用注意

一.每一个项目源文件的开头都要加一个define&#xff0c;这将禁用对不安全函数的警告。 #define _CRT_SECURE_NO_WARNINGS或者将 scanf 改为 scanf_s&#xff0c;并按照其要求提供额外的参数。 二.可以在SLN解决方案建多个项目&#xff0c;每一个项目都只能放一个文件。因为每…

51单片机应用开发---定时器(定时1S,LED以1S间隔闪烁)

实现目标 1、掌握定时器的配置流程&#xff1b; 2、掌握定时器初值的计算方法&#xff1b; 3、具体实现&#xff1a;&#xff08;1&#xff09;1mS中断1次&#xff0c;计数1000次中断&#xff0c;实现定时1S功能&#xff1b;&#xff08;2&#xff09;LED1每隔1S状态取反。 …

青少年编程与数学 02-002 Sql Server 数据库应用 18课题、性能监控

青少年编程与数学 02-002 Sql Server 数据库应用 18课题、性能监控 课题摘要:一、性能监控二、使用 XEvents创建 Extended Event 会话查询 Extended Events 数据管理 Extended Event 会话注意事项 三、XEvents图形界面 本课题介绍了SQL Server中性能监控的工具和方法&#xff0…