AbortController

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

AbortController接口代表一个控制器对象,允许你在需要时中止一个或多个DOM请求。

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

构造函数

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

属性

AbortController.signal 只读
返回一个AbortSignal对象实例,它可以用来 with/abort 一个DOM请求。

方法

AbortController.abort()
中止一个尚未完成的DOM请求。这能够中止fetch 请求,任何响应Body的消费者和流。

示例

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

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

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

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var 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 rejects 一个 AbortError

你可以在github上找到完整示例 — abort-api 

规范

Specification Status Comment
DOM
AbortController
Living Standard Initial definition

浏览器兼容

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support661657 No5311.1
AbortController() constructor661657 No5311.1
signal661657 No5311.1
abort661657 No5311.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support666616575311.1 No
AbortController() constructor666616575311.1 No
signal666616575311.1 No
abort666616575311.1 No

参见

文档标签和贡献者

标签: 
此页面的贡献者: zhangchen, wuCrio
最后编辑者: zhangchen,