如何中止獲取請求？

Question

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

這很棒，但我缺少一個關鍵功能， xhr.abort() 。

我找不到有關該 fetch 功能的任何信息。

謝謝。

更新：中止獲取的hacky解決方法https://github.com/Morantron/poor-mans-cancelable-fetch

基本上，您在網絡工作者中啟動提取並取消網絡工作者以中止提取

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

Answer 3

我通常使用類似這樣的東西，類似於@ixrock。

// Fetch and return the promise with the abort controller as controller property
function fetchWithController(input, init) {
  // create the controller
  let controller = new AbortController()
  // use the signal to hookup the controller to the fetch request
  let signal = controller.signal
  // extend arguments
  init = Object.assign({signal}, init)
  // call the fetch request
  let promise = fetch(input, init)
  // attach the controller
  promise.controller = controller
  return promise
}

然后用

let promise = fetchWithController('/')
promise.controller.abort()