封装umi-request时通过 AbortController 配置取消请求

2024-04-29 07:28
文章标签 配置 封装 请求 取消 request umi abortcontroller

本文主要是介绍封装umi-request时通过 AbortController 配置取消请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、关键部分

一、在封装的request.ts中

  1. 声明一个 abortControllers 对象用于存储要取消的请求（我用了-s表示复数，多个abortcontroller对象，与下面👇的单个abortController区分）
  2. 封装取消请求的函数cancelRequest, 传入要取消的请求ID ( requestId ) 判断如果在AbortController对象中存在该请求，就可以通过abort来中断
  3. 在请求拦截器中，如果需要让请求可取消：
    1. 创建一个新的AbortController对象
    2. 在AbortController 对象存储这个请求ID，键为请求ID，值为刚创建的 abortController 对象
    3. 将该 abortController 的 signal 对象存到option的signal对象下
    4. 请求时发送option
  4. export { request, cancelRequest }
/**
* 创建一个全局的 AbortController 和 signal 对象, 用于取消请求
*/let abortControllers: { [key: string]: AbortController } = {};let signal: AbortSignal | null = null; // 没用到/**
* 取消当前的请求
*/const cancelRequest = (requestId: string) => {if (abortControllers[requestId]) {abortControllers[requestId].abort();delete abortControllers[requestId];}// if (signal) {//     signal.removeEventListener('abort', () => {});//     signal = null;    // }
};/**
* token拦截器
*/
request.interceptors.request.use((url: string, options: any) => {let newOptions = { ...options };if (options.requestId) {let abortController = new AbortController();// 存储当前请求的 AbortController 对象abortControllers[options.requestId] = abortController;let signal = abortController.signal;newOptions.signal = signal;}// 其他部分。。。。return { url, options: newOptions };
});export { request, cancelRequest };

二、封装调用 request 和 cancelRequest 的 callApi 与 cancelApi

 import qs from 'qs';import { request, cancelRequest } from './request’;interface IConfig {requestId?: string;cancelable?: boolean;}export const callApi = (method: string, path: string, params?: any, config: IConfig = {}) => {const body = ['GET', 'DELETE'].includes(method) ? null : JSON.stringify(params);const urlpath = method === 'GET' && params ? `${path}?${qs.stringify(params)}` : path;return request(urlpath, {method,body,requestId: config?.cancelable ? config.requestId : undefined});};export const cancelApi = (requestId: string) => {cancelRequest(requestId);};

三、调用请求并配置该请求为可取消

 try {const res = await callApi('GET', url, undefined,{  cancelable: true,requestId:  ‘xxx’,  //id可随意配置为任意字符串，只要保证唯一并且取消时能对应上就行 }).then((res) => res);return res;} catch (error) {console.error(error);return {error: {message: 'Error occurred while fetching data'}};
}

四、在合适的地方取消该请求，注意对应上请求ID requestId

cancelApi(‘xxx’);

二、完整代码：

api / request.ts

import { message } from 'antd';
import config from '../config/dev';
import { extend } from 'umi-request';
import { history, useModel } from 'umi';
import { isFormData } from '@/utils/utils';const API_URL = config.apiBase;
const codeMessage = {200: '服务器成功返回请求的数据',201: '新建或修改数据成功',202: '一个请求已经进入后台排队（异步任务）',204: '删除数据成功',400: '请求有误',401: '用户名或密码错误',403: '用户得到授权，但是访问是被禁止的',404: '请求失败，结果不存在',405: '操作失败',406: '请求的格式不可得',410: '请求的资源被永久删除',422: '操作失败',500: '服务器发生错误，请检查服务器',502: '网关错误',503: '服务不可用，服务器暂时过载或维护',504: '网关超时'
};
type mapCode = 200 | 201 | 202 | 204 | 400 | 401 | 403 | 404 | 405 | 406 | 410 | 422 | 500 | 502 | 503 | 504;/**
* 创建一个全局的 AbortController 和 signal 对象, 用于取消请求
*/
let abortControllers: { [key: string]: AbortController } = {};
let signal: AbortSignal | null = null;/**
* 取消当前的请求
*/
const cancelRequest = (requestId: string) => {if (abortControllers[requestId]) {abortControllers[requestId].abort();delete abortControllers[requestId];}// if (signal) {// 	signal.removeEventListener('abort', () => {});// 	signal = null;// }
};/**
* 异常处理程序
*/
const errorHandler = (error: { response: Response; data: any; type: string }): Response | undefined => {const { response, data } = error;// if (data?.error) {// // message.error(data.error.message);// return data;// }if (!response) {if (error.type === 'AbortError') {return;}if (error.type === 'Timeout') {message.error('请求超时，请诊断网络后重试');return;}message.error('无法连接服务器');} else if (response && response.status) {const errorText = codeMessage[response.status as mapCode] || response.statusText;message.error(errorText);}return response;
};/**
* 配置request请求时的默认参数
*/
const request = extend({timeout: 50000,timeoutMessage: '请求超时，请诊断网络后重试',prefix: process.env.NODE_ENV === 'development' ? API_URL : '/api',// prefix: process.env.NODE_ENV === 'development' ? API_URL : 'http://192.168.31.196/api',errorHandler //默认错误处理// credentials: 'include', //默认请求是否带上cookie
});/**
* token拦截器
*/
request.interceptors.request.use((url: string, options: any) => {let newOptions = { ...options };if (options.requestId) {let abortController = new AbortController();// 存储当前请求的 AbortController 对象abortControllers[options.requestId] = abortController;let signal = abortController.signal;newOptions.signal = signal;}const token = localStorage.getItem('token');if (token) {newOptions.headers['Authorization'] = token ? `Bearer ${token}` : null;}newOptions.headers['Content-Type'] = 'application/json';if (isFormData(newOptions.body)) {delete newOptions.headers['Content-Type'];}if (options.content_type) {newOptions.headers['Content-Type'] = options.content_type;delete newOptions['content_type'];}return { url, options: newOptions };
});request.interceptors.response.use((response: any, options: any) => {const token = localStorage.getItem('token');if (response.status === 401 && history.location.pathname === '/login' && options.method === 'POST') {message.error('用户名或密码错误');return;}if (response.status === 401 || response.status === 403 || (!token && history.location.pathname !== '/login')) {message.destroy();message.error('登录已过期，请重新登录');localStorage.removeItem('token');history.push('/login');return;}// 截获返回204的响应，由于后端只返回空字符串''，不便于处理，所以我将其转换为‘204’返回if (response.status === 204) {// message.success(codeMessage[response.status as mapCode]);return '204';}return response;
});export { request, cancelRequest };

api/index.ts中存放的callApi和cancelApi

import qs from 'qs';
import { request, cancelRequest } from './request';
import { IConfig } from '@/constants/interface';export const callApi = (method: string, path: string, params?: any, config: IConfig = {}) => {const body = ['GET', 'DELETE'].includes(method) ? null : JSON.stringify(params);const urlpath = method === 'GET' && params ? `${path}?${qs.stringify(params)}` : path;return request(urlpath, { method, body, requestId: config?.cancelable ? config.requestId : undefined });
};export const cancelApi = (requestId: string) => {cancelRequest(requestId);
};export const uploadApi = (path: string, params?: any) => {const formData = new FormData();Object.keys(params).forEach((item) => {formData.append(item, params[item]);});return request(path, {method: 'POST',body: formData});
};

Interface.ts

export interface IConfig {requestId?: string;cancelable?: boolean;
}

map.ts调用callApi

import { IConfig, IMapSerch, IMapStatistic } from '@/constants/interface';
import { callApi } from '.';
import { API } from './api';const basePath = '/map_search';
export const mapSearch = async (search: string | undefined, config?: IConfig): Promise<API.IResType<IMapSerch>> => {try {const res = await callApi('GET', search ? `${basePath}?search=${search}` : basePath, undefined, config).then((res) => res);return res;} catch (error) {console.error(error);return {error: {message: 'Error occurred while fetching data'}};}
};

页面中pages/map/index.tsx

import { GaodeMap } from '@antv/l7-maps’;
import { useEffect, useState, useRef } from 'react';
import { mapSearch } from '@/api/map';
import { cancelApi } from '@/api';const id = String(Math.random());export default function MapManage() {
const [height, setHeight] = useState<number>(window.innerHeight - 38);
const [mapScene, setScene] = useState<Scene>();useEffect(() => {let scene = new Scene({id,map: new GaodeMap({center: [89.285302, 44.099382],pitch: 0,style: 'normal',zoom: 12,plugin: ['AMap.ToolBar'],WebGLParams: {preserveDrawingBuffer: true}}),logoVisible: false});setScene(scene);scene.on('loaded', async (a) => {//@ts-ignorescene.map.add(new window.AMap.TileLayer.Satellite({ opacity: 0.4, detectRetina: true }));scene.on('moveend', (_) => handleBounds(scene)); // 地图移动结束后触发，包括平移，以及中心点变化的缩放。如地图有拖拽缓动效果，则在缓动结束后触发scene.on('zoomend', (_) => handleBounds(scene)); // 缩放停止时触发// =========加载图层数据==========const data = await fetchDataResult();setHeight(window.innerHeight - 38);});return () => {// 页面卸载前取消请求cancelApi('mapSearch');// @ts-ignorescene.layerService?.stopAnimate();scene.destroy();};
}, []);const fetchDataResult = async (query: string | undefined = undefined) => {const result = await mapSearch(query, {cancelable: true,requestId: 'mapSearch'});return result;
};return (<div><div id={id} style={{ height: height }} /></div>
);
}

三、效果

在这里插入图片描述

四、最后说明

前端取消请求只是停止等待服务器的响应，但并不会通知服务器端停止处理请求，如果服务器端不进行处理，仍然可能会继续占用资源并处理请求，所以，为了更有效地处理取消请求，应该在后端/服务器端也进行相应的处理

这篇关于封装umi-request时通过 AbortController 配置取消请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

原文地址:
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.chinasem.cn/article/945455。

相关文章

Linux线程之线程的创建、属性、回收、退出、取消方式

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识：线程号唯一、创建方式、属性设置（如分离状态与栈大小）、回收机制（join/detach）、退出方法（返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.
阅读更多...
Linux下进程的CPU配置与线程绑定过程

Linux下进程的CPU配置与线程绑定过程

《Linux下进程的CPU配置与线程绑定过程》本文介绍Linux系统中基于进程和线程的CPU配置方法,通过taskset命令和pthread库调整亲和力,将进程/线程绑定到特定CPU核心以优化资源分配... 目录1 基于进程的CPU配置1.1 对CPU亲和力的配置1.2 绑定进程到指定CPU核上运行2 基于
阅读更多...
Spring Boot spring-boot-maven-plugin 参数配置详解(最新推荐)

Spring Boot spring-boot-maven-plugin 参数配置详解(最新推荐)

《SpringBootspring-boot-maven-plugin参数配置详解(最新推荐)》文章介绍了SpringBootMaven插件的5个核心目标（repackage、run、start... 目录一 spring-boot-maven-plugin 插件的5个Goals二 应用场景1 重新打包应用
阅读更多...
Java中读取YAML文件配置信息常见问题及解决方法

Java中读取YAML文件配置信息常见问题及解决方法

《Java中读取YAML文件配置信息常见问题及解决方法》：本文主要介绍Java中读取YAML文件配置信息常见问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要... 目录1 使用Spring Boot的@ConfigurationProperties2. 使用@Valu
阅读更多...
Jenkins分布式集群配置方式

Jenkins分布式集群配置方式

《Jenkins分布式集群配置方式》：本文主要介绍Jenkins分布式集群配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1.安装jenkins2.配置集群总结Jenkins是一个开源项目，它提供了一个容易使用的持续集成系统，并且提供了大量的plugin满
阅读更多...
SpringBoot线程池配置使用示例详解

SpringBoot线程池配置使用示例详解

《SpringBoot线程池配置使用示例详解》SpringBoot集成@Async注解,支持线程池参数配置（核心数、队列容量、拒绝策略等）及生命周期管理,结合监控与任务装饰器,提升异步处理效率与系统... 目录一、核心特性二、添加依赖三、参数详解四、配置线程池五、应用实践代码说明拒绝策略（Rejected
阅读更多...
SQL Server配置管理器无法打开的四种解决方法

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一：桌面图标进入方法二：运行窗口进入检查版本号对照表php方法三：查找文件路径方法四：检查 S
阅读更多...
Linux中SSH服务配置的全面指南

Linux中SSH服务配置的全面指南

《Linux中SSH服务配置的全面指南》作为网络安全工程师,SSH（SecureShell）服务的安全配置是我们日常工作中不可忽视的重要环节,本文将从基础配置到高级安全加固,全面解析SSH服务的各项参... 目录概述基础配置详解端口与监听设置主机密钥配置认证机制强化禁用密码认证禁止root直接登录实现双因素
阅读更多...
嵌入式数据库SQLite 3配置使用讲解

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置（1）、下载安装SQLite库（2）、解压下载的文件（3）、
阅读更多...
Golang如何对cron进行二次封装实现指定时间执行定时任务

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》：本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2