Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.

há 3 anos
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. [![npm](https://img.shields.io/npm/v/make-cancellable-promise.svg)](https://www.npmjs.com/package/make-cancellable-promise) ![downloads](https://img.shields.io/npm/dt/make-cancellable-promise.svg) ![build](https://img.shields.io/travis/wojtekmaj/make-cancellable-promise/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/make-cancellable-promise.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/make-cancellable-promise.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
  2. # Make-Cancellable-Promise
  3. Make any Promise cancellable.
  4. ## tl;dr
  5. * Install by executing `npm install make-cancellable-promise` or `yarn add make-cancellable-promise`.
  6. * Import by adding `import makeCancellablePromise from 'make-cancellable-promise`.
  7. * Do stuff with it!
  8. ```js
  9. const { promise, cancel } = makeCancellablePromise(myPromise);
  10. ```
  11. ## User guide
  12. ### makeCancellablePromise(myPromise)
  13. A function that returns an object with two properties:
  14. `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.
  15. #### Usage
  16. ```js
  17. const { promise, cancel } = makeCancellablePromise(myPromise);
  18. ```
  19. Typically, you'd want to use `makeCancellablePromise` in React components. If you call `setState` on an unmounted component, React will throw an error.
  20. Here's how you can use `makeCancellablePromise` with React components:
  21. ```jsx
  22. class MyComponent extends Component {
  23. state = {
  24. status: 'initial',
  25. }
  26. componentDidMount() {
  27. this.cancellable = makeCancellable(fetchData());
  28. this.cancellable.promise
  29. .then(() => this.setState({ status: 'success' }))
  30. .catch(() => this.setState({ status: 'error' }));
  31. };
  32. componentWillUnmount() {
  33. this.cancellable.cancel();
  34. }
  35. render() {
  36. const { status } = this.state;
  37. const text = (() => {
  38. switch (status) {
  39. case 'pending': return 'Fetching…';
  40. case 'success': return 'Success';
  41. case 'error': return 'Error!';
  42. default: return 'Click to fetch';
  43. }
  44. })();
  45. return (
  46. <p>{text}</p>
  47. );
  48. }
  49. }
  50. ```
  51. or with React Hooks:
  52. ```jsx
  53. function MyComponent() {
  54. const [status, setStatus] = useState('initial');
  55. useEffect(() => {
  56. const { promise, cancel } = makeCancellable(fetchData());
  57. promise
  58. .then(() => setStatus('success'))
  59. .catch(() => setStatus('error'));
  60. return () => {
  61. cancel();
  62. };
  63. }, []);
  64. const text = (() => {
  65. switch (status) {
  66. case 'pending': return 'Fetching…';
  67. case 'success': return 'Success';
  68. case 'error': return 'Error!';
  69. default: return 'Click to fetch';
  70. }
  71. })();
  72. return (
  73. <p>{text}</p>
  74. );
  75. }
  76. ```