如何在Javascript中中止一批异步获取请求?

87 阅读1分钟

正如我们所知,fetch返回一个承诺。而JavaScript async通常没有 "中止 "一个承诺的概念。那么,我们怎样才能取消正在进行的javascript fetch呢?

举个例子

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

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

<!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>

正如我们所看到的,javascript AbortController只是一个在javascript abort()被调用时传递中止事件的手段。

我们可以在自己的代码中实现同样的javascript事件监听,而不用javascript AbortController对象。

但有价值的是,fetch知道如何与javascript AbortController对象一起工作。它已经集成在其中了。

与fetch一起使用

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

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