XMLHttpRequest: abort 事件

基线 广泛可用

此功能已十分成熟，并在众多设备和浏览器版本上运行良好。 它自以下时间起在各浏览器中均已可用 2015 年 7 月.

注意： 此功能在 Web 工作线程 中可用，但 服务工作线程 除外。

abort 事件在请求被中止时触发，例如，程序调用了 XMLHttpRequest.abort()。

语法

在诸如 addEventListener() 之类的 方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("abort", (event) => {});

onabort = (event) => {};

事件类型

一个 ProgressEvent。 继承自 Event。

Event ProgressEvent

事件属性

除了下面列出的属性之外，父接口 Event 中的属性也可用。

lengthComputable 只读

一个布尔标志，指示基础进程要完成的总工作量以及已经完成的工作量是否可计算。 换句话说，它指示进度是否可衡量。

loaded 只读

一个 64 位无符号整数，指示基础进程已经完成的工作量。 已完成的工作量比例可以通过将此属性的值除以 total 来计算。 当使用 HTTP 下载资源时，这仅计算 HTTP 消息的主体，不包括标头和其他开销。

total 只读

一个 64 位无符号整数，表示基础进程正在进行的总工作量。 当使用 HTTP 下载资源时，它就是 Content-Length（消息正文的大小），不包括标头和其他开销。

示例

实时示例

HTML

html
<div class="controls">
  <input
    class="xhr success"
    type="button"
    name="xhr"
    value="Click to start XHR (success)" />
  <input
    class="xhr error"
    type="button"
    name="xhr"
    value="Click to start XHR (error)" />
  <input
    class="xhr abort"
    type="button"
    name="xhr"
    value="Click to start XHR (abort)" />
</div>

<textarea readonly class="event-log"></textarea>

JavaScript

js
const xhrButtonSuccess = document.querySelector(".xhr.success");
const xhrButtonError = document.querySelector(".xhr.error");
const xhrButtonAbort = document.querySelector(".xhr.abort");
const log = document.querySelector(".event-log");

function handleEvent(e) {
  log.textContent = `${log.textContent}${e.type}: ${e.loaded} bytes transferred\n`;
}

function addListeners(xhr) {
  xhr.addEventListener("loadstart", handleEvent);
  xhr.addEventListener("load", handleEvent);
  xhr.addEventListener("loadend", handleEvent);
  xhr.addEventListener("progress", handleEvent);
  xhr.addEventListener("error", handleEvent);
  xhr.addEventListener("abort", handleEvent);
}

function runXHR(url) {
  log.textContent = "";

  const xhr = new XMLHttpRequest();
  addListeners(xhr);
  xhr.open("GET", url);
  xhr.send();
  return xhr;
}

xhrButtonSuccess.addEventListener("click", () => {
  runXHR("my-picture.jpg");
});

xhrButtonError.addEventListener("click", () => {
  runXHR("https://example.com/some-path");
});

xhrButtonAbort.addEventListener("click", () => {
  runXHR("my-picture.jpg").abort();
});

结果

规范

规范
XMLHttpRequest 标准
# event-xhr-abort
XMLHttpRequest 标准
# handler-xhr-onabort

浏览器兼容性

BCD 表仅在启用 JavaScript 的浏览器中加载。

另请参阅