Have ideas to improve npm?Join in the discussion! »

ember-computed-promise-monitor
TypeScript icon, indicating that this package has built-in type declarations

0.4.0 • Public • Published

ember-computed-promise-monitor

Build Status Ember Observer Score

This provides the ability to manage async behavior with computed properties as a light-weight alternative to, or in conjunction with ember-concurrency.

Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above

Installation

ember install ember-computed-promise-monitor

Usage

import Component from '@ember/component';
import { PromiseMonitor } from 'ember-computed-promise-monitor';
import { reads } from '@ember-decorators/object/computed';
 
export default class MyComponent extends Component {
  // all the properties on the PromiseMonitor can be dependent keys of
  // other computed properties
  @reads('postName.isFulfilled') didSucceed;
  @reads('postName.isRejected') didFail;
  @reads('postName.isPending') isPending;
  @reads('postName.error') postNameError;
  @reads('postName.result') theNameOfThePost;
  
  @computed()
  get postName() {
    const promise = (async function() {
      const record = await this.store.findRecord('post', this.someId);
 
      resolve(record.name);
    })();
 
    return new PromiseMonitor(promise);
  }
}
{{#if postName.isPending}}
  Loading...
{{else}}
  {{postName.result}}
{{/if}}

or with a decorator:

import { monitor } from 'ember-computed-promise-monitor';
 
// ...
 
  @computed()
  @monitor
  get postName() {
    return this.store
      .findRecord('post', this.someId)
      .then(post => post.name);
  }

How is this different from PromiseProxy?

You can get similar functionality by using PromiseProxyMixin:

import { resolve } from 'rsvp';
import ObjectProxy from '@ember/object/proxy';
import PromiseProxyMixin from '@ember/object/promise-proxy-mixin';
 
let ObjectPromiseProxy = ObjectProxy.extend(PromiseProxyMixin);
 
let proxy = ObjectPromiseProxy.create({
  promise: somePromise.then(data => ({ result: data }))
});
{{#if postName.isPending}}
  Loading...
{{else}}
  {{postName.result}}
{{/if}}

The key differences are that the PromiseProxyMixin:

  • proxies all properties to the resolved value
  • uses content for the resulting value, which may be confusing (and is undocumented)
  • throws an exception on promise rejection. PromiseMonitor sets the error on the error property.

License

This project is licensed under the MIT License.

Install

npm i ember-computed-promise-monitor

DownloadsWeekly Downloads

57

Version

0.4.0

License

MIT

Unpacked Size

15.1 kB

Total Files

15

Last publish

Collaborators

  • avatar