AbortController

Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。

你可以使用 AbortController.AbortController() 构造函数创建一个新的 AbortController。使用 AbortSignal 对象可以完成与 DOM 请求的通信。

构造函数

AbortController.AbortController(): 创建一个新的 AbortController 对象实例。

属性

AbortController.signal (en-US) 只读: 返回一个 AbortSignal 对象实例，它可以用来 with/abort 一个 Web(网络)请求。

方法

AbortController.abort(): 中止一个尚未完成的 Web(网络)请求。这能够中止 fetch 请求及任何响应体的消费和流。

BCD tables only load in the browser

在下面的代码片段中，我们想通过 Fetch API 下载一段视频。

我们先使用 AbortController() 构造函数创建一个控制器，然后使用 AbortController.signal (en-US) 属性获取其关联 AbortSignal 对象的引用。

当一个 fetch request 初始化，我们把 AbortSignal 作为一个选项传递到到请求对象（如下 { signal }）。这将 signal 和 controller 与这个 fetch request 相关联，然后允许我们通过调用 AbortController.abort() 中止请求，如下第二个事件监听函数。



const controller = new AbortController();
let signal = controller.signal;

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  //...
  fetch(url, {signal}).then(function(response) {
    //...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}


注意：当 abort() 被调用时，这个 fetch() promise 将 reject 一个名为 AbortError 的 DOMException。


您可以在 GitHub 上找到这个示例的完整源代码(也可以在线运行)。




 
  
   Specification
   Status
   Comment
  
  
   DOM
AbortController
   Living Standard
   Initial definition
  
 











 Fetch API
 Abortable Fetch by Jake Archibald