How to cancel a request in JavaScript

51CTO 2022-08-06 20:03:10 阅读数:674

cancelrequestjavascript

众所周知,JavaScript 实现异步请求就靠浏览器提供的两个 API —— XMLHttpRequest 和 Fetch.我们平常用的较多的是 Promise 请求库 axios,它基于 XMLHttpRequest.

本篇带来 XMLHttpRequest、Fetch 和 axios 分别是怎样“取消请求”的.

闲话少说,冲就完事了~

取消 XMLHttpRequest 请求

当请求已经发送了,可以使用 XMLHttpRequest.abort() 方法取消发送,代码示例如下：

const xhr = new XMLHttpRequest();

xhr.open('GET', '<http://127.0.0.1:3000/api/get>', true);

xhr.send();

setTimeout(() => {

 xhr.abort();

}, 1000);
1.
2.
3.
4.
5.
6.

取消请求, readyState 会变成 XMLHttpRequest.UNSENT(0);请求的 xhr. status 会被设为 0 ;

不如在 Chrome DevTools Network 中,看看正常请求和取消请求的对比图：

JavaScript 中如何取消请求_xml

取消 Fetch 请求

取消 Fetch 请求,需要用到 AbortController API.我们可以构造一个 controller 实例：const controller = new AbortController() , controller 它有一个只读属性 AbortController.signal,可以作为参数传入到 fetch 中,用于将控制器与获取请求相关联;

代码示例如下：

const controller = new AbortController();

void (async function () {

 const response = await fetch('<http://127.0.0.1:3000/api/get>', {

 signal: controller.signal,

 });

 const data = await response.json();

})();



setTimeout(() => {

 controller.abort();

}, 1000);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

浏览器控制台对比图：

JavaScript 中如何取消请求_ios_02

我们其实可以在 controller.abort() 传入“取消请求的原因”参数,然后进行 try...catch 捕获

JavaScript 中如何取消请求_xml_03

取消 aixos 请求

axios 同样支持 AbortController

const controller = new AbortController();

const API_URL = '<http://127.0.0.1:3000/api/get>';

void (async function () {

 const response = await axios.get(API_URL, {

 signal: controller.signal,

 });

 const { data } = response;

})();

setTimeout(() => {

 controller.abort();

}, 1000);
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

控制台截图：

JavaScript 中如何取消请求_ios_04

错误捕获：

JavaScript 中如何取消请求_ios_05

注意：axios 之前用于取消请求的 CancelToken 方法已经被弃用,更多请见文档 https://axios-http.com/docs/cancellation;

OK,以上便是本篇分享.点赞关注评论,为好文助力
我是掘金安东尼 100 万阅读量人气前端技术博主 INFP 写作人格坚持 1000 日更文关注我,陪你一起度过漫长编程岁月

copyright：author[51CTO]，Please bring the original link to reprint, thank you. https://en.javamana.com/2022/218/202208061948520016.html

《 [Dark Horse-SpringCloud Technology Stack] [01] Complete Microservice Technology Stack_Microservice Technology Comparison

[Dark Horse-SpringCloud Technology Stack] [01] Complete Microservice Technology Stack_Microservice Technology Comparison 》