Cancelable Promises 和 Abortable Fetch

Warning: setState(...): Can only update a mounted or mounting component. This 
usually means you called setState() on an unmounted component. This is a no-op. 
Please check the code for the ... component.

// https://github.com/facebook/react/issues/5465
const makeCancelable = (promise) => {
  let hasCanceled = false;

  const wrappedPromise = new Promise((resolve, reject) => {
    promise.then(
      val => hasCanceled ? reject({isCanceled: true}) : resolve(val),
      error => hasCanceled ? reject({isCanceled: true}) : reject(error)
    );
  });

  return {
    promise: wrappedPromise,
    cancel() {
      hasCanceled = true;
    },
  };
};

const cancelablePromise = makeCancelable(fetch('/api/articles'));

cancelablePromise
  .promise
  .then((response) => console.log('resolved', response))
  .catch((reason) => console.log('canceled', reason.isCanceled));

cancelablePromise.cancel();

const makeCancelable = (promise) => {
  let hasCanceled = false;

  return [
    new Promise((resolve, reject) => {
      promise.then(
        val => hasCanceled ? reject({isCanceled: true}) : resolve(val),
        error => hasCanceled ? reject({isCanceled: true}) : reject(error)
      );
    }),
    () => {
      hasCanceled = true;
    },
  ];
};

const [promise, cancel] = makeCancelable(fetch('/api/articles'));

promise
  .then((response) => console.log('resolved', response))
  .catch((reason) => console.log('canceled', reason.isCanceled));

cancel();

const cancelToken = new CancelToken(cancel => {
  cancelButton.onclick = () => cancel("The cancel button was clicked");
});

doCancelableThing(cancelToken);

const { token, cancel } = CancelToken.source();

doCancelableThing(token);

cancel();

const { token: ct1, cancel: cancel1 } = CancelToken.source();
const { token: ct2, cancel: cancel2 } = CancelToken.source();

const ct3 = CancelToken.race([ct1, ct2]);

import {axios, CancelToken, isCancel} from 'axios';
const source = CancelToken.source();
const cancelToken = source.token;

axios.get(url, {cancelToken}).then(res => {
    // handle response
}).catch(err => {
  if (isCancel(err) {
    // handle cancellation
  } else {
    // handle error
  }
});

source.cancel('Canceled');

Promise.config({cancellation: true});

function makeCancellableRequest(url) {
  return new Promise(function(resolve, reject, onCancel) {
    var xhr = new XMLHttpRequest();
    xhr.on("load", resolve);
    xhr.on("error", reject);
    xhr.open("GET", url, true);
    xhr.send(null);
    // Note the onCancel argument only exists if cancellation has been enabled!
    onCancel(function() {
      xhr.abort();
    });
  });
}

var p = makeCancellableRequest(...);
p.cancel();

const xhr = new XMLHttpRequest();
xhr.onload = () => {};
xhr.onerror = () => {};
xhr.onabort = () => {};
xhr.open('GET', url, true);
xhr.send();

xhr.abort();

/**
 * A cancellation signal for cancellable fetch
 */
class CancelSignal extends EventTarget {
  constructor() {
    super();
    this._cancelled = false;
  }

  get cancelled() {
    return this._cancelled;
  }

  cancel() {
    this._cancelled = true;
  }

  onCancel(handler) {
    this.addEventListener('CancelEvent', handler);
  }
}

/**
 * A cancellation controller for cancellable fetch
 */
class CancelController {
  constructor() {
    this._signal = new CancelSignal();
  }

  get signal() {
    return this._signal;
  }

  cancel() {
    this._signal.cancel();
    this._signal.dispatchEvent(new CustomEvent('CancelEvent'));
  }
}

/**
 * Cancellable fetch
 * @param {RequestInfo} input
 * @param {RequestInit} init
 * @param {CancelSignal} init.cancelSignal
 * @returns {Promise<Response>}
 */
const cancellableFetch = (input, init) => {
  let hasCanceled = false;
  return new Promise((resolve, reject) => {
    const {cancelSignal, ...restInit} = init || {};
    if (cancelSignal) {
      if (cancelSignal.cancelled) {
        reject(new Error('CancelError'));
        return;
      }

      const listener = () => {
        cancelSignal.removeEventListener('CancelEvent', listener);
        hasCanceled = true;
        reject(new Error('CancelError'));
      };

      cancelSignal.onCancel(listener);
    }

    fetch(input, restInit).then(
      response => !hasCanceled && resolve(response),
      error => !hasCanceled && reject(error)
    );
  });
};

const controller = new CancelController();

cancellableFetch('/api/articles', {cancelSignal: controller.signal}).then(
  (response) => response.json().then((response) => {
    console.log(response);
  }),
  (error) => {
    console.error(error);
  });

// 调用后上面的 `cancellableFetch()` 无法再获取到请求的响应内容
controller.cancel();

// `controller.signal` 已被置为取消，这里同样无法再获取到请求的响应内容
cancellableFetch('/api/comments', {cancelSignal: controller.signal}).then(
  (response) => response.json().then((response) => {
    console.log(response);
  }),
  (error) => {
    console.error(error);
  });

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

fetch(url, {signal}).then(res => {
  // handle response
}).catch(err => {
  if (err.name === 'AbortError') {
  // handle cancellation
  } else {
  // handle error
  }
});

controller.abort();