封装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。

相关文章

Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
wolfSSL参数设置或配置项解释

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释：wolfCrypt是一个开源的、轻量级的、可移植的加密库，支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作，而不依赖其他加密库。 2. DTLS Support 解释：DTLS（Datagram Transport Layer Security）是一种基于UDP的安全协议，提供类似于
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机（Reduced Instruction SetCom
阅读更多...
log4j2相关配置说明以及${sys:catalina.home}应用

log4j2相关配置说明以及${sys:catalina.home}应用

${sys:catalina.home} 等价于 System.getProperty("catalina.home") 就是Tomcat的根目录：  C:\apache-tomcat-7.0.77 <PatternLayout pattern="%d{yyyy-MM-dd HH:mm:ss} [%t] %-5p %c{1}:%L - %msg%n" /> 2017-08-10
阅读更多...
DM8数据库安装后配置

DM8数据库安装后配置

1 前言 在上篇文章中，我们已经成功将库装好。在安装完成后，为了能够更好地满足应用需求和保障系统的安全稳定运行，通常需要进行一些基本的配置。下面是一些常见的配置项： 数据库服务注册：默认包含14个功能模块，将这些模块注册成服务后，可以更好的启动和管理这些功能；基本的实例参数配置：契合应用场景和发挥系统的最大性能；备份：有备无患；… 2 注册实例服务 注册了实例服务后，可以使用系统服务管理，
阅读更多...
JavaSE——封装、继承和多态

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性：封装、继承、多态 。而类和对象阶段，主要研究的就是封装特性。何为封装呢？简单来说就是套壳屏蔽细节 。     比如：对于电脑这样一个复杂的设备，提供给用户的就只是：开关机、通过键盘输入，显示器， USB 插孔等，让用户来和计算机进行交互，完成日常事务。但实际上：电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2