Skip to content
Enable computed properties to be async-aware.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon
app
config
tests
types/dummy
vendor
.editorconfig
.ember-cli
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.template-lintrc.js
.travis.yml
.watchmanconfig
CONTRIBUTING.md
LICENSE.md
README.md
ember-cli-build.js
index.js
package.json
renovate.json
testem.js
tsconfig.json

README.md

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.

You can’t perform that action at this time.