JavaScript 中如何取消请求

229 阅读1分钟

取消 XMLHttpRequest 请求

当请求已经发送了,可以使用 XMLHttpRequest.abort()  方法取消发送,代码示例如下: image.png 取消请求,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 中,用于将控制器与获取请求相关联;

代码示例如下:

image.png 浏览器控制台对比图: image.png 也其实可以在 controller.abort() 传入“取消请求的原因”参数,然后进行 try...catch 捕获

image.png

取消 axios 请求

axios 同样支持 AbortController

image.png

image.png

image.png

原文fe.ecool.fun/topic/97eb4…