如何取消 Fetch 请求 All In One

cancel http request

AbortController

const controller = new AbortController();

controller;
// AbortController {signal: AbortSignal}signal: AbortSignalaborted: falseonabort: nullreason: undefined[[Prototype]]: AbortSignal[[Prototype]]: AbortController

controller.abort();
// undefined

controller;
// AbortController {signal: AbortSignal}signal: AbortSignal {aborted: true, reason: DOMException: signal is aborted without reason at :1:12, onabort: null} [[Prototype]]: AbortController

https://developer.mozilla.org/en-US/docs/Web/API/AbortController

demo

let controller;
const url = "video.mp4";

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

downloadBtn.addEventListener('click', fetchVideo);

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

function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;
  fetch(url, { signal })
    .then(function(response) {
      console.log('Download complete', response);
    })
    .catch(function(e) {
      console.log('Download error: ' + e.message);
    });
}

https://mdn.github.io/dom-examples/abort-api/

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！