javaScript教程——如何取消一个正在进行的fetch

155 阅读1分钟

Fetch返回一个承诺,而JavaScript一般没有 "中止 "一个承诺的概念。那么我们如何取消一个正在进行的fetch呢?

例子

如果用户在我们的网站上的行为表明不再需要取物了。

有一个特殊的内置的javascript对象用于这种目的。AbortController。它不仅可以用来终止获取,也可以用来终止其他的异步任务。

使用方法非常简单。

创建一个控制器

let controller = new AbortController();


当abort()

⦁ controller.signal发出javascript "abort "事件
⦁ controller.signal.aborted属性变为true。

<!DOCTYPE html>
<script>
"use strict";
let controller = new AbortController();
let signal = controller.signal;
// The party that performs a cancelable operation
// gets the "signal" object
// and sets the listener to trigger when controller.abort() is called
signal.addEventListener('abort', () => alert("abort!"));
// The other party, that cancels (at any point later):
controller.abort(); // abort!
// The event triggers and signal.aborted becomes true
alert(signal.aborted); // true
</script>

与fetch一起使用

let controller = new AbortController(); 
fetch(url, { signal: controller.signal });

⦁ AbortController是一个简单的javascript对象,当调用javascript abort()方法时,在其信号属性上产生一个中止事件(同时将signal.aborted设置为true)。
⦁ fetch与之集成:我们将信号属性作为选项传递,然后fetch监听它,所以有可能中止fetch。
⦁ 我们可以在代码中使用AbortController。"调用abort()"→"监听中止事件 "的交互方式简单而通用。我们甚至可以在没有fetch的情况下使用它。