JSPM

make-cancellable-promise

1.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1823664
  • Score
    100M100P100Q215274F
  • License MIT

Make any Promise cancellable.

Package Exports

  • make-cancellable-promise
  • make-cancellable-promise/dist/cjs/index.js
  • make-cancellable-promise/dist/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (make-cancellable-promise) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm downloads CI tested with jest

Make-Cancellable-Promise

Make any Promise cancellable.

tl;dr

  • Install by executing npm install make-cancellable-promise or yarn add make-cancellable-promise.
  • Import by adding import makeCancellablePromise from 'make-cancellable-promise.
  • Do stuff with it!
    const { promise, cancel } = makeCancellablePromise(myPromise);

User guide

makeCancellablePromise(myPromise)

A function that returns an object with two properties:

promise and cancel. promise is a wrapped around your promise. cancel is a function which stops .then() and .catch() from working on promise, even if promise passed to makeCancellablePromise resolves or rejects.

Usage

const { promise, cancel } = makeCancellablePromise(myPromise);

Typically, you'd want to use makeCancellablePromise in React components. If you call setState on an unmounted component, React will throw an error.

Here's how you can use makeCancellablePromise with React:

function MyComponent() {
  const [status, setStatus] = useState('initial');

  useEffect(() => {
    const { promise, cancel } = makeCancellable(fetchData());

    promise.then(() => setStatus('success')).catch(() => setStatus('error'));

    return () => {
      cancel();
    };
  }, []);

  const text = (() => {
    switch (status) {
      case 'pending':
        return 'Fetching…';
      case 'success':
        return 'Success';
      case 'error':
        return 'Error!';
      default:
        return 'Click to fetch';
    }
  })();

  return <p>{text}</p>;
}