Task lifecycle events

ember-concurrency implements a number of lifecycle events that allow for a host object to react to various changes in task instance lifecycle. Using lifecycle hooks allows for adding things like instrumentation to tasks or for separating and reusing error handling code across different tasks. Using the .evented() modifier will enable tasks to fire lifecycle events on their host objects.

In the below example, we refactor the AJAX throttling example to use task events for logging of the ajaxTask's state changes, instead of doing it manually in the looping task itself.

Live Example

  • Task 7: making AJAX request
  • Task 6: making AJAX request
  • Task 5: making AJAX request
const COLORS = [

function loopingAjaxTask(id) {
  return task(function * () {
    while (true) {
      try {
        yield this.get('ajaxTask').perform(id);
      } catch(e) {
        // Ignoring AJAX failures because we're being naughty.
      yield timeout(2000);

export default Component.extend({
  ajaxTask: task(function * () {
    // simulate slow AJAX
    const ms = 2000 + 2000 * Math.random();
    yield timeout(ms);

    if (parseInt(ms) % 7 === 0) {
      throw new Error("Unexpected matrix glitch");
    return {};

  ajaxTaskStarted: on('ajaxTask:started', function(taskInstance) {
    const [id] = taskInstance.args;
    this.log(COLORS[id], `Task ${id}: making AJAX request`);

  ajaxTaskSucceeded: on('ajaxTask:succeeded', function(taskInstance) {
    const [id] = taskInstance.args;
    this.log(COLORS[id], `Task ${id}: AJAX done`);

  ajaxTaskErrored: on('ajaxTask:errored', function(taskInstance, error) {
    const [id] = taskInstance.args;
    this.log(COLORS[id], `Task ${id}: AJAX failed because of '${error.message}'`);

  task0: loopingAjaxTask(0),
  task1: loopingAjaxTask(1),
  task2: loopingAjaxTask(2),
  task3: loopingAjaxTask(3),
  task4: loopingAjaxTask(4),
  task5: loopingAjaxTask(5),
  task6: loopingAjaxTask(6),
  task7: loopingAjaxTask(7),

  log(color, message) {
    let logs = this.logs || [];
    logs.push({ color, message });
    this.set('logs', logs.slice(-7));

  logs: null,