Axios 请求取消：从原理到实践

Axios 请求取消：从原理到实践

在现代前端开发中，网络请求是不可或缺的一部分。Axios 是一个基于 Promise 的 HTTP 客户端，广泛应用于浏览器和 Node.js 环境中。然而，在某些场景下，我们可能需要取消正在进行的请求，例如用户在请求完成前跳转到其他页面，或者重复触发相同的请求时取消之前的请求。本文将深入探讨 Axios 请求取消的原理，并通过一个二次封装的例子来演示如何实现请求取消。

1. 请求取消的原理

Axios 的请求取消功能依赖于 CancelToken。CancelToken 是一个用于取消请求的令牌，它可以通过 CancelToken.source() 方法创建。每个 CancelToken 实例都有一个 token 和一个 cancel 方法。当调用 cancel 方法时，与该 token 关联的请求将被取消。

1.1 CancelToken 的工作原理

  1. 创建 CancelToken: 通过 CancelToken.source() 方法创建一个 CancelToken 实例，该实例包含一个 token 和一个 cancel 方法。
  2. 关联请求: 在发起请求时，将 token 传递给 Axios 请求配置中的 cancelToken 字段。
  3. 取消请求: 当需要取消请求时，调用 cancel 方法，Axios 会中断与该 token 关联的请求。

1.2 取消请求的流程

  1. 用户触发某个操作，发起一个请求。
  2. 在请求完成之前，用户触发了另一个操作，需要取消之前的请求。
  3. 调用 cancel 方法，Axios 中断之前的请求。
  4. 发起新的请求。

2. 二次封装 Axios 实现请求取消

为了更好地管理请求取消逻辑，我们可以对 Axios 进行二次封装。以下是一个简单的封装示例，展示了如何在封装中实现请求取消功能。

1. 代码结构分析

1.1 Axios 实例的创建

const instance: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000,headers: {'Content-Type': 'application/json',},
});
  • baseURL: 从环境变量中获取 API 的基础 URL。
  • timeout: 设置请求超时时间为 10 秒。
  • headers: 设置默认请求头为 application/json。

通过 axios.create 创建了一个 Axios 实例 instance，后续的所有请求都将基于这个实例。

1.2 取消令牌的管理

const cancelTokenMap = new Map<string, CancelTokenSource>();
  • cancelTokenMap: 使用 Map 数据结构来存储每个请求的取消令牌。键是请求的 URL，值是对应的 CancelTokenSource。
  • 作用: 通过 URL 快速查找和取消对应的请求。

1.3 请求拦截器

instance.interceptors.request.use((config) => {// 添加 token 到请求头const token = localStorage.getItem('token');if (token) {config.headers = config.headers || {};config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);
  • 功能: 在请求发送前，检查本地存储中是否存在 token，如果存在则将其添加到请求头中。
  • 作用: 实现全局的请求头管理，例如身份验证。

1.4 响应拦截器

instance.interceptors.response.use((response: AxiosResponse) => {// 清理已完成的请求记录const url = response.config.url;if (url && cancelTokenMap.has(url)) {cancelTokenMap.delete(url);}// 处理全局响应逻辑if (response.data.code !== 0) {return Promise.reject(response.data);}return response.data;},(error) => {// 清理失败的请求记录const url = error.config?.url;if (url && cancelTokenMap.has(url)) {cancelTokenMap.delete(url);}// 处理全局错误if (error.response?.status === 401) {// 处理未授权window.location.href = '/login';}return Promise.reject(error);}
);
  • 功能:
    • 在请求成功时，清理 cancelTokenMap 中对应的请求记录。
    • 在请求失败时，清理 cancelTokenMap 中对应的请求记录，并根据状态码处理全局错误（例如未授权时跳转到登录页）。
  • 作用: 实现全局的响应和错误处理逻辑。

1.5 封装的请求方法

const http = {get: <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.get(url, { ...config, cancelToken: source.token });},post: <T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.post(url, data, { ...config, cancelToken: source.token });},put: <T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.put(url, data, { ...config, cancelToken: source.token });},delete: <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.delete(url, { ...config, cancelToken: source.token });},// 取消指定请求cancelRequest: (url: string) => {const source = cancelTokenMap.get(url);if (source) {source.cancel(`Request canceled: ${url}`);cancelTokenMap.delete(url);}},// 取消所有请求cancelAllRequests: () => {cancelTokenMap.forEach((source, url) => {source.cancel(`Request canceled: ${url}`);cancelTokenMap.delete(url);});},
};
  • 功能:
    • 封装了 get、post、put、delete 方法，每个方法都会为请求创建一个 CancelToken，并将其存储到 cancelTokenMap 中。
    • 提供了 cancelRequest 和 cancelAllRequests 方法，用于取消指定请求或所有请求。
  • 作用: 简化请求调用，并提供灵活的请求取消功能。

2. 请求取消的实现原理

2.1 CancelToken 的作用

  • CancelToken.source(): 创建一个 CancelTokenSource 对象，包含 token 和 cancel 方法。
  • token: 用于关联请求。
  • cancel: 用于取消请求。

2.2 请求取消的流程

  1. 发起请求时，创建一个 CancelTokenSource，并将其存储到 cancelTokenMap 中。
  2. 如果需要取消请求，调用 cancelRequest 或 cancelAllRequests 方法。
  3. 调用 cancel 方法后，Axios 会中断与该 token 关联的请求，并抛出一个 Cancel 错误。
  4. 在响应拦截器中，清理已完成的请求记录。

3. 使用场景

3.1 取消重复请求

当用户快速点击按钮多次触发相同的请求时，可以通过 cancelRequest 方法取消之前的请求，只保留最后一次请求。

http.get('/api/data').then((data) => console.log(data)).catch((error) => {if (axios.isCancel(error)) {console.log('Request canceled:', error.message);} else {console.error('Error:', error);}});// 取消之前的请求
http.cancelRequest('/api/data');

3.2 页面跳转时取消请求

当用户跳转到其他页面时，可以通过 cancelAllRequests 方法取消所有未完成的请求，避免无效请求占用资源。

window.addEventListener('beforeunload', () => {http.cancelAllRequests();
});

完整代码

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, CancelTokenSource } from 'axios';// 创建axios实例
const instance: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 10000,headers: {'Content-Type': 'application/json',},
});// 创建一个Map来存储取消令牌
const cancelTokenMap = new Map<string, CancelTokenSource>();// 请求拦截器
instance.interceptors.request.use((config) => {// 在这里可以添加token等全局请求头const token = localStorage.getItem('token');if (token) {config.headers = config.headers || {};config.headers.Authorization = `Bearer ${token}`;}return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
instance.interceptors.response.use((response: AxiosResponse) => {// 清理已完成的请求记录const url = response.config.url;if (url && cancelTokenMap.has(url)) {cancelTokenMap.delete(url);}// 在这里处理全局响应逻辑if (response.data.code !== 0) {return Promise.reject(response.data);}return response.data;},(error) => {// 清理失败的请求记录const url = error.config?.url;if (url && cancelTokenMap.has(url)) {cancelTokenMap.delete(url);}// 在这里处理全局错误if (error.response?.status === 401) {// 处理未授权window.location.href = '/login';}return Promise.reject(error);}
);// 封装请求方法
const http = {get: <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.get(url, { ...config, cancelToken: source.token });},post: <T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.post(url, data, { ...config, cancelToken: source.token });},put: <T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.put(url, data, { ...config, cancelToken: source.token });},delete: <T>(url: string, config?: AxiosRequestConfig): Promise<T> => {const source = axios.CancelToken.source();cancelTokenMap.set(url, source);return instance.delete(url, { ...config, cancelToken: source.token });},// 添加取消请求的方法// http.cancelRequest('/api/some-endpoint');cancelRequest: (url: string) => {const source = cancelTokenMap.get(url);if (source) {source.cancel(`Request canceled: ${url}`);cancelTokenMap.delete(url);}},// 取消所有请求cancelAllRequests: () => {cancelTokenMap.forEach((source, url) => {source.cancel(`Request canceled: ${url}`);cancelTokenMap.delete(url);});},
};export default http;

4. 总结

通过二次封装 Axios，我们实现了一个功能强大且易于使用的 HTTP 客户端。它不仅支持全局的请求和响应拦截，还提供了灵活的请求取消功能，适用于多种场景。希望本文能帮助你更好地理解和使用 Axios 的请求取消功能。

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[蓝桥杯 2023 省 B] 飞机降落

[蓝桥杯 2023 省 B] 飞机降落

[蓝桥杯 2023 省 B] 飞机降落 题目描述 N N N 架飞机准备降落到某个只有一条跑道的机场。其中第 i i i 架飞机在 T i T_{i} Ti​ 时刻到达机场上空&#xff0c;到达时它的剩余油料还可以继续盘旋 D i D_{i} Di​ 个单位时间&#xff0c;即它最早可以于 T i T_{i} Ti​ 时刻…
阅读更多...
Kafka详解——介绍与部署

Kafka详解——介绍与部署

1. 什么是 Kafka&#xff1f; Kafka 是一个分布式的消息队列系统&#xff0c;最初由 LinkedIn 开发&#xff0c;后来成为 Apache 开源项目。它的主要用途包括实时数据处理、日志收集、数据流管道构建等。Kafka 具备高吞吐量、可扩展性、持久性和容错性&#xff0c;广泛应用于大…
阅读更多...
win10搭建opengl环境搭建并测试--输出立方体球体和碗型并在球体上贴图

win10搭建opengl环境搭建并测试--输出立方体球体和碗型并在球体上贴图

参照本文档可以完成环境搭建和测试&#xff0c;如果想要快速完成环境的搭建可以获取本人的工程&#xff0c;包括所用到的工具链和测试工程源码获取&#xff08;非免费介意务下载&#xff09;&#xff1a;链接: https://pan.baidu.com/s/1H2ejbT7kLM9ore5MqyomgA 提取码: 8s1b …
阅读更多...
TCP、UDP协议的应用、ServerSocket和Socket、DatagramSocket和DatagramPacket

TCP、UDP协议的应用、ServerSocket和Socket、DatagramSocket和DatagramPacket

DAY13.1 Java核心基础 TCP协议 TCP 协议是面向连接的运算层协议&#xff0c;比较复杂&#xff0c;应用程序在使用TCP协议之前必须建立连接&#xff0c;才能传输数据&#xff0c;数据传输完毕之后需要释放连接 就好比现实生活中的打电话&#xff0c;首先确保电话打通了才能进…
阅读更多...
如何在 GoLand 中设置默认项目文件夹

如何在 GoLand 中设置默认项目文件夹

在使用 GoLand 进行开发时&#xff0c;设置一个默认的项目文件夹可以大大提高工作效率。默认项目文件夹会在你打开或新建项目时自动预选&#xff0c;避免每次都需要手动导航到目标目录。本文将详细介绍如何在 GoLand 中设置默认项目文件夹。 步骤一&#xff1a;打开系统设置 …
阅读更多...
SvelteKit 最新中文文档教程（5）—— 页面选项

SvelteKit 最新中文文档教程（5）—— 页面选项

前言 Svelte&#xff0c;一个语法简洁、入门容易&#xff0c;面向未来的前端框架。 从 Svelte 诞生之初&#xff0c;就备受开发者的喜爱&#xff0c;根据统计&#xff0c;从 2019 年到 2024 年&#xff0c;连续 6 年一直是开发者最感兴趣的前端框架 No.1&#xff1a; Svelte …
阅读更多...
Mac下Ollama安装全攻略：开启本地大模型之旅

Mac下Ollama安装全攻略：开启本地大模型之旅

文章目录 Mac下Ollama安装全攻略&#xff1a;开启本地大模型之旅一、Ollama 是什么功能特点优势应用场景 二、安装前准备&#xff08;一&#xff09;系统要求&#xff08;二&#xff09;硬件要求 三、下载安装包&#xff08;一&#xff09;官网下载&#xff08;二&#xff09;其…
阅读更多...
华为营销流程落地方案：MTC=MTL+LTC

华为营销流程落地方案：MTC=MTL+LTC

目录 简介 MTC流程 作者简介 简介 只讲最本质的底层逻辑&#xff0c;交付可落地的方案。 作为一个主打实践的产品老炮&#xff0c;接下来我将结合自己的经验&#xff0c; 以华为系的这套流程为基准&#xff0c; 将涉及业务层次的流程全部重构一套本地化、落地化的方案。 …
阅读更多...
vscode使用ssh同时连接主机CentOS:user和ubuntu20.04:docker

vscode使用ssh同时连接主机CentOS:user和ubuntu20.04:docker

主机为CentOS docker为Ubuntu20.04 两者可以使用一个vscode远程链接 1.使用已拉取好的Ubuntu镜像建立docker容器 2.进入容器内，下载一些关于ssh的安装包 apt-get install vim apt-get install openssh-client apt-get install openssh-server apt-get install ssh passwd …
阅读更多...
NFS网络文件共享服务

NFS网络文件共享服务

文章目录 1. NFS工作原理1.1 挂载结构介绍1.2 NFS的工作原理 2. NFS服务安装2.1 NFS软件列表2.2 启动NFS相关服务2.3 NFS服务常见进程2.4 实战配置NFS服务器端 3. NFS服务配置3.1 在NFS Server端执行的操作3.1.1 查看部署环境3.1.2 启动rpcbind及NFS服务&#xff0c;然后加入开…
阅读更多...
《多语言实时交流辅助系统前端的设计与实现》开题报告

《多语言实时交流辅助系统前端的设计与实现》开题报告

个人主页&#xff1a;大数据蟒行探索者 目录 一、选题目的与意义 1.选题目的 2选题意义 2.1技术挑战与创新 2.2市场需求 2.3促进文化交流 2.4教育应用 2.5社会影响 二、研究现状与文献综述 1.研究现状 2.文献综述 2.1 前端技术的发展与应用 2.2 自然语言处理技术…
阅读更多...
SpringCloud网关：Gateway路由配置与过滤器链

SpringCloud网关：Gateway路由配置与过滤器链

文章目录 引言一、Gateway基本架构二、路由配置方式2.1 配置文件方式2.2 Java代码方式 三、内置断言工厂四、内置过滤器工厂4.1 请求路径相关过滤器4.2 请求和响应头过滤器4.3 功能性过滤器 五、自定义过滤器5.1 自定义GatewayFilter5.2 自定义过滤器工厂 六、全局过滤器总结 引…
阅读更多...
咖啡点单小程序毕业设计（JAVA+SpringBoot+微信小程序+完整源码+论文）

咖啡点单小程序毕业设计（JAVA+SpringBoot+微信小程序+完整源码+论文）

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着社会的快速发展和…
阅读更多...
Excel（函数进阶篇）：Vlookup函数进阶、TAKE嵌套SORE函数、SUBTOTAL函数、INDIRECT函数

Excel（函数进阶篇）：Vlookup函数进阶、TAKE嵌套SORE函数、SUBTOTAL函数、INDIRECT函数

目录 Vlookup函数返回多列结果Vlookup函数多条件匹配Vlookup函数部分匹配TAKE函数嵌套SORT函数&#xff0c;提取排序数据SUBTOTAL函数&#xff1a;制作动态报表SUBTOTAL函数&#xff1a;创建连续编号INDIRECT函数Vlookup跨多表抓取数据INDIRECT函数常见跨表的错误Vloopup函数联…
阅读更多...
大模型 VS 传统算法：人工智能时代的“新老对话“

大模型 VS 传统算法：人工智能时代的“新老对话“

大模型 VS 传统算法&#xff1a;人工智能时代的"新老对话" 在AlphaGo击败李世石、ChatGPT掀起全民AI热潮的今天&#xff0c;人们往往将"大模型"与"算法"混为一谈。但当我们深入技术内核时会发现&#xff0c;这二者恰似人工智能发展的两个平行宇…
阅读更多...
【蓝桥杯每日一题】3.17

【蓝桥杯每日一题】3.17

&#x1f3dd;️专栏&#xff1a; 【蓝桥杯备篇】 &#x1f305;主页&#xff1a; f狐o狸x 他们说内存泄漏是bug&#xff0c;我说这是系统在逼我进化成SSR级程序员 OK来吧&#xff0c;不多废话&#xff0c;今天来点有难度的&#xff1a;二进制枚举 二进制枚举&#xff0c;就是…
阅读更多...
Matlab 汽车振动多自由度非线性悬挂系统和参数研究

Matlab 汽车振动多自由度非线性悬挂系统和参数研究

1、内容简介 略 Matlab 169-汽车振动多自由度非线性悬挂系统和参数研究 可以交流、咨询、答疑 2、内容说明 略 第二章 汽车模型建立 2.1 汽车悬架系统概述 2.1.1 悬架系统的结构和功能 2.1.2 悬架分类 2.2 四分之一车辆模型 对于车辆动力学&#xff0c;一般都是研究其悬…
阅读更多...
hackmyvm-Smol

hackmyvm-Smol

信息收集 ┌──(root㉿kali)-[/home/kali] └─# arp-scan -I eth1 192.168.56.0/24 Interface: eth1, type: EN10MB, MAC: 00:0c:29:34:da:f5, IPv4: 192.168.56.103 WARNING: Cannot open MAC/Vendor file ieee-oui.txt: Permission denied WARNING: Cannot open MAC/Vendo…
阅读更多...
深度学习项目--基于DenseNet网络的“乳腺癌图像识别”，准确率90%+，pytorch复现

深度学习项目--基于DenseNet网络的“乳腺癌图像识别”，准确率90%+，pytorch复现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 如果说最经典的神经网络&#xff0c;ResNet肯定是一个&#xff0c;从ResNet发布后&#xff0c;很多人做了修改&#xff0c;denseNet网络无疑是最成功的…
阅读更多...
基于x11vnc的ubuntu远程桌面

基于x11vnc的ubuntu远程桌面

1、安装VNC服务 sudo apt install x11vnc -y2、创建连接密码 sudo x11vnc -storepasswd3、安装lightdm服务 x11vnc 在 默认的 GDM3 中不起作用&#xff0c;因此需要使用 lightdm 桌面管理环境 sudo apt install lightdm -y切换至lightdm&#xff0c;上一步已经切换则跳过该…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023