如何中止获取请求？

Question

我一直在使用新的fetch API而不是旧的XMLHttpRequest

它很棒,但我缺少一个关键功能,xhr.abort().

我找不到有关fetch功能的任何信息.

谢谢.

更新:用于中止获取的hacky解决方法https://github.com/Morantron/poor-mans-cancelable-fetch

基本上,您在Web worker中启动提取并取消Web worker以中止提取

Answer 1

它仍然是一个开放的问题所有相关的讨论都可以在这里找到

https://github.com/whatwg/fetch/issues/447 :(

Answer 2

可以通过AbortController中止获取：

export function cancelableFetch(reqInfo, reqInit) {
  var abortController = new AbortController();
  var signal = abortController.signal;
  var cancel = abortController.abort.bind(abortController);

  var wrapResult = function (result) {
    if (result instanceof Promise) {
      var promise = result;
      promise.then = function (onfulfilled, onrejected) {
        var nativeThenResult = Object.getPrototypeOf(this).then.call(this, onfulfilled, onrejected);
        return wrapResult(nativeThenResult);
      }
      promise.cancel = cancel;
    }
    return result;
  }

  var req = window.fetch(reqInfo, Object.assign({signal: signal}, reqInit));
  return wrapResult(req);
}

用法示例：

var req = cancelableFetch("/api/config")
  .then(res => res.json())
  .catch(err => {
    if (err.code === DOMException.ABORT_ERR) {
      console.log('Request canceled.')
    }
    else {
      // handle error
    }
  });

setTimeout(() => req.cancel(), 2000);

链接：

1. https://developers.google.com/web/updates/2017/09/abortable-fetch
2. https://developer.mozilla.org/en-US/docs/Web/API/AbortController