工具类-基于 axios 的 http 请求工具 Request

server/2024/11/19 6:56:53/
http://www.w3.org/2000/svg" style="display: none;">

http__0">基于 axios 的 http 请求工具

基于 axios 实现一个 http 请求工具,支持设置请求缓存和取消 http 请求等功能

http__4">首先实现一个 简单的 http 请求工具

import axios, {AxiosError,AxiosInterceptorManager,AxiosRequestConfig,AxiosResponse,
} from 'axios';// 接口返回的数据格式
interface ResponseData<T = any> {code: number;data: T;message: string;
}// 发起请求的参数
interface RequestConfig extends AxiosRequestConfig {url: string;
}class Request {private instance = axios.create({headers: {'Content-Type': 'application/json;charset=utf-8',},withCredentials: true,});constructor() {// 设置请求拦截const request = this.instance.interceptors.request as AxiosInterceptorManager<RequestConfig>;request.use(config => this.handleRequest(config));// 设置响应拦截const { response } = this.instance.interceptors;response.use(config => this.handleResponse(config));}// 请求拦截private handleRequest(config: RequestConfig): RequestConfig {// TODO: 请求前拦截处理 loading, url 或请求头等return config;}// 响应拦截private handleResponse(response: AxiosResponse<Blob>): AxiosResponse {// TODO: 响应后拦截处理 loading, 状态码或数据等return response;}// 错误拦截: 处理错误private handleError(error: AxiosError) {// TODO: 请求出错时的处理return Promise.reject(error);}async request<T = any>(requestConfig: RequestConfig) {const { method = 'GET', ...config } = requestConfig;try {const response = await this.instance.request<ResponseData<T>>({ ...config, method });return response.data;} catch (error) {this.handleError(error as AxiosError);throw error; // 将异常重新抛出去,不要吃掉异常}}get<T = any>(requestConfig: RequestConfig) {return this.request<T>({ method: 'GET', ...requestConfig });}post<T = any>(requestConfig: RequestConfig) {return this.request<T>({ method: 'POST', ...requestConfig });}put<T = any>(requestConfig: RequestConfig) {return this.request<T>({ method: 'PUT', ...requestConfig });}patch<T = any>(requestConfig: RequestConfig) {return this.request<T>({ method: 'PATCH', ...requestConfig });}delete<T = any>(requestConfig: RequestConfig) {return this.request<T>({ method: 'DELETE', ...requestConfig });}
}

封装 Request 类,将 axios 示例缓存在 instance 中,在 Request 类构造函数中设置拦截器。封装 request 函数作为发起请求的函数, 接收泛型表示接口返回的 data 字段的数据类型。增加 get、post、patch 等别名函数,代替传入 method。

示例

interface ResData {name: string;age: number;
}const request = new Request()
const result = await request.get<ResData>({url: '/user-info',params: {id: '12138',},
});

增加拦截器的处理

在拦截器中同意处理一些东西,比如在请求拦截中发起全局 loading,在响应拦截中处理数据等等

loading

import axios, {AxiosError,AxiosInterceptorManager,AxiosRequestConfig,AxiosResponse,
} from 'axios';// 接口返回的数据格式
interface ResponseData<T = any> {code: number;data: T;message: string;
}// 发起请求的参数
interface RequestConfig extends AxiosRequestConfig {url: string;// 请求时是否需要发起 loaing,默认为 trueloading?boolean}class Request {...constructor() {// 设置请求拦截const request = this.instance.interceptors.request as AxiosInterceptorManager<RequestConfig>;request.use(config => this.handleRequestLoading(config));request.use(config => this.handleRequest(config));// 设置响应拦截const { response } = this.instance.interceptors;response.use(config => this.handleResponseLoading(config));response.use(config => this.handleResponse(config));}// 请求拦截: 处理 loadingprivate handleRequestLoading(config: RequestConfig): RequestConfig {const { loading = true, url } = config;if (loading) openLoading(); // openLoading 是开启全局 Loading 的方法return config;}// 响应拦截: 处理 loadingprivate handleResponseLoading(response: AxiosResponse<Blob>): AxiosResponse {const {config: { url, loading },} = response;closeLoading(); // closeLoading 是关闭全局 Loading 的方法return response;}// 请求拦截private handleRequest(config: RequestConfig): RequestConfig {// TODO: 请求前拦截处理 loading, url 或请求头等return config;}// 响应拦截private handleResponse(response: AxiosResponse<Blob>): AxiosResponse {// TODO: 响应后拦截处理 loading, 状态码或数据等return response;}// 错误拦截: 处理错误private handleError(error: AxiosError) {// TODO: 请求出错时的处理return Promise.reject(error);}...
}export default Request;

上面的代码分别在请求拦截和响应拦截中获取 requestConfig 中的 loading 字段的值,如果 loading 的值为 true,则开启/关闭全局的 loading。

但是这样做有一个缺陷,全局 loading 一般都是单例的,如果同时有两个需要 loading 的请求发起,那么当一个请求完成时会关闭 loading,此时另一个请求还未完成,这样就不符合实际需求了

我们可以设计一个 Loading 类来管理 loading 状态

class Loading {private loadingApiList: string[] = [];open(key: string) {if (this.loadingApiList.length === 0) openLoading();this.loadingApiList.push(key);}close(key: string) {const index = this.loadingApiList.indexOf(key);if (index > -1) this.loadingApiList.splice(index, 1);if (this.loadingApiList.length === 0) closeLoading();}
}
  • Loaing 类使用了 loadingApiList 将正在进行且需要 loading 的请求的 url 缓存起来。
  • 每次请求需要 loading 时,调用 Loading 类的 open 函数,open 函数会判断当前是否有还在 Loading 的请求,如果没有则调起 loading,将请求的 url 存入 loadingApiList
  • 当请求结束时调用 Loading 类的 close 函数,close 函数会将该请求的 url 从 loadingApiList 中删除,再判断当前是否还有请求需要 Loading,如果没有则关闭 loading
class Request {...constructor(){...this.loading = new Loagn();}// 请求拦截: 处理 loadingprivate handleRequestLoading(config: RequestConfig): RequestConfig {const { loading = true, url } = config;if (loading) this.loading!.open(url);return config;}// 响应拦截: 处理 loadingprivate handleResponseLoading(response: AxiosResponse<Blob>): AxiosResponse {const {config: { url },} = response;this.loading!.close(url!);return response;}...
}

注:使用 Class 类来处理 loading 是基于业务系统上的其他需要,或为了更优雅的应对其他复杂情况,并非一定要使用 Class 写法,用 hooks 或工具函数也可以

http__251">处理 http 响应状态和业务响应状态

// http 状态码对应的 message
const RESPONSE_STATUS_MESSAGE_MAP: Record<number | 'other', string> = {400: '客户端请求的语法错误,服务器无法理解。',401: '请求未经授权。',403: '服务器是拒绝执行此请求。',404: '请求不存在。',405: '请求方法不被允许。',500: '服务器内部错误,无法完成请求。',501: '服务器不支持当前请求所需要的功能。',502: '作为网关或代理工作的服务器尝试执行请求时,从上游服务器接收到无效的响应。',503: '由于临时的服务器维护或者过载,服务器当前无法处理请求。',504: '作为网关或者代理服务器尝试执行请求时,没有从上游服务器收到及时的响应。',other: '未知错误, 请稍后尝试',
};class Request {...constructor(){...const { response } = this.instance.interceptors;response.use(config => this.handleResponseLoading(config));response.use(config => this.handleResponseStatus(config),error => this.handleError(error));}// 请求拦截: http 响应状态和业务响应状态private handleResponseStatus(response: AxiosResponse<ResponseData>): Promise<AxiosResponse> {const { status, data } = response;if (status !== 200) {const statusMessage = RESPONSE_STATUS_MESSAGE_MAP[status] || '服务器错误, 请稍后尝试';return Promise.reject(new AxiosError('', response.statusText, response.config, response.request, response));}// 业务状态码根据自身系统接口规范处理const { code } = data || {};if (code === 401) {// 401 一般为未登录或 token 过期处理,这里一般处理为退出登录和 refreshreturn this.refresh(response); // refresh 函数会实现 token 刷新并重新请求,这里可以忽略}// 一般非 200 未错误状态,显示提示消息if (code !== 200) {const { message } = data;// 将接口的 message 传递给 AxiosErrorreturn Promise.reject(new AxiosError(message, response.statusText, response.config, response.request, response));}return Promise.resolve(response);}// 错误拦截: 处理错误,处理通知消息private handleError(error: AxiosError) {this.loading.close(error.config!.url!);// 判断请求是否被取消,若果被取消不需要处理通知消息if (axios.isCancel(error)) return error;const { status, message } = error as AxiosError;// 如果是 http 错误,使用状态码匹配错误信息,否则使用接口返回的 mesageconst _message = status === 200 ? message : RESPONSE_STATUS_MESSAGE_MAP[status!];sendMessage(_message || RESPONSE_STATUS_MESSAGE_MAP.other); // 发送错误信息的 messagereturn error;}...
}

实现取消请求功能 – abort

未完待续…

http___cache_322">实现 http 缓存功能 – cache

未完待续…uq


http://www.ppmy.cn/server/143103.html

相关文章

华为刷题笔记--题目索引

文章目录 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记简单题目 更多关于刷题的内容欢迎订阅我的专栏华为刷题笔记 该专栏题目包含两部分&#xff1a; 100 分值部分题目 200 分值部分题目 所有题目都会陆续更新&#xff0c;订阅防丢失 简单题目 –题目分值试卷1华为OD机…

数据科学与SQL:如何计算排列熵?| 基于SQL实现

目录 0 引言 1 排列熵的计算原理 2 数据准备 3 问题分析 4 小结 0 引言 把“熵”应用在系统论中的信息管理方法称为熵方法。熵越大&#xff0c;说明系统越混乱&#xff0c;携带的信息越少&#xff1b;熵越小&#xff0c;说明系统越有序&#xff0c;携带的信息越多。在传感…

【Unity基础】对比Unity中碰撞类与触发类交互机制

碰撞类回调&#xff08;Collision-based&#xff09;和触发类回调&#xff08;Trigger-based&#xff09;是Unity中两种不同的物理交互机制。它们各自有不同的应用场景和使用方式&#xff0c;理解它们的区别有助于我们在游戏开发中选择合适的解决方案。下面是这两者的详细对比&…

【算法】【优选算法】前缀和(下)

目录 一、560.和为K的⼦数组1.1 前缀和1.2 暴力枚举 二、974.和可被K整除的⼦数组2.1 前缀和2.2 暴力枚举 三、525.连续数组3.1 前缀和3.2 暴力枚举 四、1314.矩阵区域和4.1 前缀和4.2 暴力枚举 一、560.和为K的⼦数组 题目链接&#xff1a;560.和为K的⼦数组 题目描述&#x…

网页web无插件播放器EasyPlayer.js H.265流媒体播放器的decoder.js报Unexpected token ‘<‘错误

EasyPlayer.js H.265流媒体播放器属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff1b;支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#xff…

【android USB 串口通信助手】stm32 源码demo 单片机与手机通信 Android studio 20241118

android 【OTG线】 接 下位机STM32【USB】 通过百度网盘分享的文件&#xff1a;USBToSerialPort.apk 链接&#xff1a;https://pan.baidu.com/s/122McdmBDUxEtYiEKFunFUg?pwd8888 提取码&#xff1a;8888 android 【OTG线】 接 【USB转TTL】 接 【串口(下位机 SMT32等)】 需…

c++:模板

1.泛型编程 在认识模板之前&#xff0c;我们首先要认识泛型编程 泛型编程是一种编程范式&#xff0c;它使得算法和数据结构能够独立于特定数据类型进行设计和实现。通过使用泛型&#xff0c;开发者可以编写一次代码&#xff0c;然后在不同的数据类型上进行重用&#xff0c;从…

【AIGC】如何使用高价值提示词Prompt提升ChatGPT响应质量

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | 提示词Prompt应用实例 文章目录 &#x1f4af;前言&#x1f4af;提示词英文模板&#x1f4af;提示词中文解析1. 明确需求2. 建议额外角色3. 角色确认与修改4. 逐步完善提示5. 确定参考资料6. 生成和优化提示7. 生成最终响…