JavaScript 中如何取消请求

简介: 众所周知,JavaScript 实现异步请求就靠浏览器提供的两个 API —— XMLHttpRequest 和 Fetch。我们平常用的较多的是 Promise 请求库 axios,它基于 XMLHttpRequest。本篇带来 XMLHttpRequest、Fetch 和 axios 分别是怎样“取消请求”的。

本篇通译自:levelup.gitconnected.com/how-to-canc…

作者:Zachary Lee


众所周知,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);


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


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

image.png


取消 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);


浏览器控制台对比图:

image.png

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

image.png


取消 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);


控制台截图:

image.png

错误捕获:

image.png

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


相关文章
|
2月前
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
40 2
Node.js GET/POST请求
|
2月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
43 4
|
3月前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
193 15
|
3月前
|
JSON JavaScript 前端开发
js请求后端9
js请求后端9
41 2
|
4月前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
134 0
Vue项目打包后都产生了哪些JS请求?
|
4月前
|
JavaScript Serverless Linux
函数计算产品使用问题之遇到Node.js环境下的请求日志没有正常输出时,该如何排查
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5月前
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
161 24
|
4月前
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
135 0
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
空气质量在线监测平台JS逆向:请求响应数据加密
空气质量在线监测平台JS逆向:请求响应数据加密
60 0
|
6月前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
490 1
前端JS发起的请求能暂停吗?