DEV Community

loading...

c-promise2- a promise library with cancellation, decorators, progress capturing, and more

digitalbrainjs profile image Dmitriy Mozgovoy ・2 min read

Hi there! Just want some community feedback on my c-promise2 package that provides an extended promise class on top of the native. The library allows you to:

  • cancel a promise chain (with rejection)
  • use class decorators
  • pause/resume your promises
  • handle timeouts
  • capture promise chain progress
  • use internal/external AbortController for sending abort signals
  • use data flow

Any thoughts, which may arise when you see a code like the following are welcome :)
It's a generic React component that uses CPromise decorators to manage the life cycle of the async code including nested JSON requests. For example, this easily lets you avoid warnings like Warning: Can’t perform a React state update on an unmounted component when you unmount a component with running async tasks.
Demo1

import { async, listen, cancel, timeout } from "c-promise2";
import cpFetch from "cp-fetch";

export class TestComponent extends React.Component {
  state = {
    text: ""
  };

  @timeout(5000)
  @listen
  @async
  *componentDidMount() {
    console.log("mounted");
    const response = yield cpFetch(this.props.url);
    this.setState({ text: `json: ${yield response.text()}` });
  }

  render() {
    return <div>{this.state.text}</div>;
  }

  @cancel()
  componentWillUnmount() {
    console.log("unmounted");
  }
}
Enter fullscreen mode Exit fullscreen mode

Demo2

export class TestComponent extends React.Component {
  state = {
    text: "",
    items: [],
    progress: 0
  };

  constructor(props) {
    super(props);
    this.onAbortClick = this.onAbortClick.bind(this);
  }

  @cancel(E_REASON_CANCELED)
  onAbortClick() {}

  @canceled(function (err) {
    console.warn(`Canceled: ${err}`);
    if (err.code !== E_REASON_DISPOSED) {
      this.setState({ text: err + "" });
    }
  })
  @progress(function (progress) {
    console.log(`Progress: ${progress}`);
    this.setState({ progress });
  })
  @innerWeight(3)
  @listen
  @async
  *componentDidMount() {
    console.log("mounted");
    // concurrent requests with CPromise.all:
    const items = yield [
      this.fetchJSON(
        "https://run.mocky.io/v3/7b038025-fc5f-4564-90eb-4373f0721822?mocky-delay=2s"
      ),
      this.fetchJSON2(
        "https://run.mocky.io/v3/00758c80-8001-4bcc-bf7d-082ac3e1092b?mocky-delay=4s"
      )
    ];
    yield CPromise.delay(500); // just simulate another aync task
    yield CPromise.delay(500);
    yield CPromise.delay(500).weight(0);
    this.setState({ text: `${items.length} requests completed`, items });
  }

  @timeout(15000)
  @async
  *fetchJSON(url) {
    const response = yield cpFetch(url); // cancellable request
    return yield response.json();
  }

  @timeout(15000)
  @async
  *fetchJSON2(url) {
    const response = yield cpAxios(url);
    return response.data;
  }

  render() {
    return (
      <div>
        {this.state.text || (
          <div>
            <ProgressBar animated now={this.state.progress * 100 + ""} />
            <button
              type="button"
              className="btn btn-warning"
              onClick={this.onAbortClick}
            >
              Abort sequence
            </button>
          </div>
        )}
        <ul>
          {this.state.items.map((item, i) => (
            <li key={i}>{JSON.stringify(item)}</li>
          ))}
        </ul>
      </div>
    );
  }

  @cancel(E_REASON_DISPOSED)
  componentWillUnmount() {
    console.log("unmounted");
  }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide