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

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

使用场景

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

  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();
	// 取消请求之后的状态status
	console.log('abort()之后的xhr.status---', xhr.status);
	// 取消请求之后的状态readyState
	console.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,这样才能做到多次请求之间不干扰。

转载请说明出处内容投诉
CSS教程_站长资源网 » 前端如何中断请求 ( axios、原生 ajax、fetch)

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买