Javascript async

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.