Javascript async

Introduction

Example Code

Typical Failing Code

export function raceCondition() {
  let xhr = new XMLHttpRequest();
  let statuses = [];
  xhr.open("GET", "http://localhost:3000/ordersStatuses");

  // Success
  xhr.onload = () => {
    statuses = JSON.parse(xhr.responseText);
  };

  let xhr2 = new XMLHttpRequest();
  xhr2.open("GET", "http://localhost:3000/orders/1");

  // Success
  xhr2.onload = () => {
    const order = JSON.parse(xhr2.responseText);
    const description = status.map((t) => {
      if (t.id === order.orderStatusId) {
        return t.description;
      }
    })[0];

    setText("Order Status: ${description}");
  };

  xhr2.send();
}

This may fail because it finishes the second request before the first. I.E. we did not wait for the first request before using the second request.

Callback Pyramid Of Doom

Moving Second Request to after First Request solves the problem but this know as Callback Pyramid Of Doom as each request will indent on the previous request

export function raceCondition() {
  let xhr = new XMLHttpRequest();
  let statuses = [];
  xhr.open("GET", "http://localhost:3000/ordersStatuses");

  // Success
  xhr.onload = () => {
    statuses = JSON.parse(xhr.responseText);

    let xhr2 = new XMLHttpRequest();
    xhr2.open("GET", "http://localhost:3000/orders/1");

    // Success
    xhr2.onload = () => {
      const order = JSON.parse(xhr2.responseText);
      const description = status.map((t) => {
        if (t.id === order.orderStatusId) {
          return t.description;
        }
      })[0];

      setText("Order Status: ${description}");
    };

    xhr2.send();
  };
}