前端如何中断请求 ( axios、原生 ajax、fetch)

news/2024/7/17 3:31:18

使用场景

在前端开发中,我们经常需要中断请求来优化性能或处理特定的业务需求。以下是一些常见的使用场景:
比如

  1. 重复请求:当页面中多个组件并发调用同一个接口时,在第一个请求返回后,我们可能需要中断其他组件对该接口的调用,以避免重复请求和冗余数据。这在组件高度复用、不依赖公共 API 的情况下特别有用。
  2. 竞态请求:当页面定时轮询发起请求时,如果上一个请求的响应速度比下一个请求慢,会导致数据错乱。中断较慢的请求可以确保只处理最新的数据,避免竞态条件。
  3. 无效请求:在单页应用中,当组件加载过慢,路由跳转后可能会导致组件卸载,但请求仍在进行中。如果接口返回错误,错误提示可能会在其他页面弹出。中断无效请求可以避免不必要的错误提示。
  4. 大文件上传暂停与恢复:在实现大文件上传功能时,用户可能会需要暂停和恢复上传过程。中断请求可以实现暂停功能,并在需要时重新发起请求以实现恢复上传。

除了以上提到的场景,还有许多其他情况需要中断请求以减少对服务器的无效请求。

下面介绍几种终止请求的方案

原生ajax终止请求

abort() 方法

XMLHttpRequest.abort() 方法用于终止 XMLHttpRequest 对象的请求。调用该方法后,如果请求正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则不会执行任何操作。同时,调用该方法会触发 XMLHttpRequest 对象的 abort 事件,我们可以在事件处理函数中执行后续的逻辑代码,如清除请求相关的数据等。

当一个请求被终止后,它的 readyState 属性将变为 0,status 属性也会变为 0。

案例代码:

// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();
// 请求地址
const url = "https://developer.mozilla.org/";
// 初始化请求
xhr.open('GET', url, true);
// 发送请求
xhr.send();
// 监听取消请求
xhr.addEventListener('abort', function () {console.log('请求被abort()取消了');
});
// 定时器模拟取消请求
setTimeout(() => {// 取消请求xhr.abort();// 取消请求之后的状态statusconsole.log('abort()之后的xhr.status---', xhr.status);// 取消请求之后的状态readyStateconsole.log('abort()之后的xhr.readyState---', xhr.readyState);
}, 100);

fetch 终止请求

使用 AbortController 可以中断 Fetch 请求。AbortController 是一个新的 Web 标准,用于中止 DOM 请求和 Fetch 请求。在执行 Fetch 请求时,可以通过 AbortController 创建一个信号对象 signal,并将 signal 作为配置选项传递给 fetch() 方法,这样就可以通过调用 AbortController 对象的 abort() 方法来中止请求。

案例代码:

const controller = new AbortController();
const { signal } = controller;
// 请求地址
const url = "https://developer.mozilla.org/";
fetch(url, { signal }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));// 中止 fetch 请求
controller.abort();

axios 终止请求

AbortController(新版本)

从 axios 的 0.22.0 版本开始,推荐使用浏览器原生的 AbortController 来终止请求。当使用该方法终止请求时,如果请求正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则不会执行任何操作。

我们可以通过两种方式来监听终止请求的操作并进行后续处理:

  • 使用 AbortController 提供的 onabort 事件,通过监听该事件并绑定事件处理函数,在函数中执行后续处理逻辑。
  • 使用 try…catch,终止请求后会触发 catch,可以在 catch 中进行后续处理。如果同时使用 onabort 事件和 try…catch,则会先触发 onabort 事件,再触发 try…catch。

案例代码:

// 以vue项目中使用axios为例
// 创建请求控制器 
this.controller = new AbortController();
console.log("初始声明的请求控制器------", this.controller);const url = "https://developer.mozilla.org/";
// 第一种方法:绑定事件处理程序
this.controller.signal.addEventListener("abort", () => {console.log("请求已终止,触发了onabort事件");// 进行后续处理
});// 第二种方法:try...catch
try {// 发送文件上传请求const res = await this.$axios.post(url, {}, {timeout: 0, // 设置超时时间为 0/null 表示永不超时signal: this.controller.signal, // 绑定取消请求的信号量});
} catch (error) {console.log("终止请求时catch的error---", error);// 判断是否为取消上传if (error.message == "canceled"){// 进行后续处理};
}// 终止请求
this.controller.abort();
console.log("终止请求后的请求控制器------", this.controller);

需要注意的是,每个 AbortController 可以同时取消多个请求,但只能取消请求一次。终止请求后,该请求的 signal.aborted 属性会从 false 变为 true。目前,暂无方法可以将其恢复为 false。如果后续请求仍然绑定了该请求控制器,那么后续请求都会被提前终止,不会被发送。

如果想要在终止请求后不影响后续请求的正常发送,并且后续请求也能够被终止,需要在每次发送请求之前都通过构造函数创建一个新的 AbortController,并将每次请求绑定到新的 AbortController 上,以确保多次请求之间不会相互干扰。

CancelToken( axios 旧版本)

在 axios 的 0.22.0 版本之前,可以使用取消令牌(CancelToken)来中止请求。不过,从 0.22.0 版本开始,该 API 已被弃用,不再建议使用。当使用该方法终止请求时,如果请求正在处理中,则会中止该请求;如果请求已经完成(即已经接收到完整的响应),则不会执行任何操作。

该方法只能通过try…catch来监听取消请求操作,终止请求之后,会触发catch,在catch中进行后续处理。而且该方法在取消请求时,可以通过参数自定义catch的error中的message内容。

案例代码:

// 以vue项目中使用axios为例// 这个地方需要导入原生的axios 最好不要使用二次封装后的axios
import axios from "axios";
const url = "https://developer.mozilla.org/";
// 创建请求令牌
this.source = axios.CancelToken.source();
console.log("初始声明的请求令牌---", this.source);// 第二种方法:try...catch
try {// 发送文件上传请求const res = await this.$axios.post(url, {}, {timeout: 0, // 设置超时时间为 0/null 表示永不超时cancelToken: this.source.token, // 绑定取消请求的令牌});
} catch (error) {console.log("终止请求时catch的error---", error);// 判断是否为取消上传if (error.message == "自定义取消请求的message"){// 进行后续处理};
}// 终止请求
this.source.cancel("自定义取消请求的message");
console.log("取消请求后的请求令牌---", this.source);

注意:该方法与AbortController相同,都可以同时取消多个请求,但是只能取消请求一次,一个CancelToken在终止过请求之后,如果后续请求还是绑定该请求令牌,则后续请求都会被提前终止,不会被发出。

同理,如果我们想要在终止请求之后,不影响后续请求的正常发出,且后续请求也是可以被终止的,那么需要在每次发出请求之前,都创建一个新的的 CancelToken,每次请求绑定的都是新的CancelToken,这样才能做到多次请求之间不干扰。


https://www.xjx100.cn/news/3118997.html

相关文章

ARM预取侧信道(Prefetcher Side Channels)攻击与防御

目录 一、预取侧信道简介 1.1 背景:预取分类 二、Arm核会受到影响吗? 2.1 先进的预取器

阿里云国际短信业务网络超时排障指南

选取一台或多台线上的应用服务器或选取相同网络环境下的机器,执行以下操作。 获取公网出口IP。 curl ifconfig.me 测试连通性。 (推荐)执行MTR命令(可能需要sudo权限),检测连通性,执行30秒。 m…

uniapp 使用 flex布局 将 图片展示 循环排列两列

将以下代码改成图片展示 循环排列两列 展示 <template><view><image v-for"(image, index) in imageList" :key"index" :src"image"></image></view> </template><script> export default {data() {…

Proteus的网络标号与总线

Proteus为了减少过多、复杂的连线&#xff0c;可以使用网络标号与总线配合使用。 Proteus的导线上添加了网络标号&#xff0c;意味着在Proteus上相同的网络标号是连在一起的&#xff0c;所说在图纸上看不出来。 如下图是比较好的Proteus中使用总线的绘制的图纸。可以效仿着画…

1091 Acute Stroke (三维搜索)

题目可能看起来很难的样子&#xff0c;但是看懂了其实挺简单的。&#xff08;众所周知&#xff0c;pat考察英文水平&#xff09; 题目意思大概是&#xff1a;给你一个L*M*N的01长方体&#xff0c;求全为1的连通块的总体积大小。&#xff08;连通块体积大于T才计算在内&#xf…

unity学习笔记12

一、物理系统 如何让一个球体受到重力的影响&#xff1f; 只要给物体添加刚体组件&#xff08;Rigidbody&#xff09;&#xff0c;就可以使其受到重力影响 1.刚体&#xff08;Rigidbody&#xff09;&#xff1a; 刚体是一个组件&#xff0c;用于使游戏对象受到物理引擎的控制。…

fasterxml 注解组装实体

使用 FasterXML Jackson 的注解 JsonTypeInfo 和 JsonSubTypes 可以实现多态类型的处理。在你的 User 类上&#xff0c;你可以添加这些注解来指示 Jackson 如何处理多态类型。 以下是使用 JsonTypeInfo 和 JsonSubTypes 注解的 User 类的修改&#xff1a; import com.fasterx…

小航助学题库蓝桥杯题库c++选拔赛(22年3月)(含题库教师学生账号)

需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09; 需要在线模拟训练的题库账号请点击 小航助学编程在线模拟试卷系统&#xff08;含题库答题软件账号&#xff09;