ember.js Asynchronous Tasks in Components ember-concurrency task

Example

An alternative community de facto standard is an addon called ember-concurrency that makes a lot of the promise confusion go away.

It can be installed with the command ember install ember-concurrency.

Pros

• Intuitive reasoning of complex asynchronous code.
• Offers a complete API for managing tasks.
• Can be canceled.
• Can be used directly in a component without the need of a proxy object.
• Destructures promises inside the task function.
• Can use JavaScript try / catch / finally blocks to manage asynchronous assignment, exceptions, and cleanup.
• Tasks are automagically cancelled on willDestroy event, avoiding errors setting values on destroyed objects (e.g. after a timer)

Cons

• Not builtin – requires ember install ember-concurrency
• Uses generator functions that can confuse developers used to promise chains.

JavaScript

import Ember from 'ember';
import { task, timeout } from 'ember-concurrency';

const { Component, set } = Ember;

export default Component.extend({
  myTask: task(function * () {
    set(this, 'error', null);
    try {
      yield timeout(2000);
      return 'Foobar';
    } catch (err) {
      set(this, 'error', error);
    }
  }).keepLatest()
});

Template

{{#if myTask.isIdle}}
  <button onclick={{perform myTask}}>
    Start Task
  </button>
{{else}}
  Loading&hellip;
{{/if}} 

{{#if myTask.last.value}}
  Done. {{myTask.last.value}}
{{/if}}

{{#if error}}
  Something went wrong. {{error}}
{{/if}}