封装umi-request时通过 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 配置取消请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---