Async JavaScript: promises, await and fetch

const STOCK = { "TENT-2P": 4, "MUG-01": 0, "FLEECE-M": 11 };
async function getStock(sku) {
  return STOCK[sku] ?? 0;
}

async function firstInStock(skus) {
  // check each sku in order with getStock, and return the first with stock above 0
}

console.log(await firstInStock(["MUG-01", "FLEECE-M", "TENT-2P"]));

Errors nobody awaits

An error inside a promise travels with the promise. If something awaits it, or calls .catch, the error lands there. If nothing does, it's an unhandled rejection: Node stops the program with the error, and a browser logs it to the console, where no user will see it, while the page carries on half-finished.

Two habits prevent it. Await every promise you start, or return it to a caller who will; a call like saveDraft(text) with no await in front deserves a second look in code review. And put one try/catch around the code each event handler runs, so a failure becomes a message on the page instead of a silent line in the console.

fetch: calling an API

fetch(url) sends a request and returns a promise of a Response. Reading the body is a second wait, because the body can still be arriving: await res.json() or await res.text().

const res = await fetch("https://api.trailhead.test/products?max_price=100");
console.log(res.status, res.ok, res.headers.get("content-type"));
const { products } = await res.json();
console.log(products.map((p) => `${p.sku} ${p.price}`));

const created = await fetch("https://api.trailhead.test/orders", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({ sku: "FLEECE-M", qty: 2 }),
});
console.log(created.status, await created.json());

To send JSON, set the method, a content-type header and a string body from JSON.stringify. One rule matters more than any other: fetch only rejects when no response arrives at all, such as a network failure. A 404 or a 500 is still a response, so the promise fulfills and your code must check res.ok (true for 200 to 299) itself.

const res = await fetch("https://api.trailhead.test/orders/Z999");
console.log(res.ok, res.status);

async function getProduct(sku) {
  const res = await fetch(`https://api.trailhead.test/products/${sku}`);
  return await res.json();
}

console.log(await getProduct("TENT-2P"));
console.log(await getProduct("NOPE-1"));

Several requests at once: Promise.all

await inside a loop runs the requests one after another, each waiting for the last. When they don't depend on each other, start them all and wait for all of them together. One slow reply then no longer holds up the others:

const skus = ["TENT-2P", "MUG-01", "FLEECE-M"];
const load = async (sku) => (await fetch(`https://api.trailhead.test/products/${sku}`)).json();

let started = Date.now();
for (const sku of skus) await load(sku);
console.log("one by one:", Date.now() - started, "ms");

started = Date.now();
const products = await Promise.all(skus.map(load));
console.log("together:", Date.now() - started, "ms", products.map((p) => p.name));

Promise.all takes an array of promises and fulfills with an array of their values in the same order, however the replies were timed. If any one rejects, the whole thing rejects with that error. When you want every result, failures included, use Promise.allSettled, which gives { status, value } or { status, reason } per item.

const later = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));
const results = await Promise.all([later(60, "tent"), later(10, "mug"), later(30, "fleece")]);
console.log(results);

Giving up: timeouts and AbortController

A request with no time limit can wait for minutes. Give fetch a signal that can cancel it. For a time limit, AbortSignal.timeout(ms) makes one for you; the request then rejects with an error named TimeoutError. For a Stop button, make an AbortController, pass its signal, and call controller.abort() when the user clicks; the error is then named AbortError.

try {
  await fetch("https://api.trailhead.test/slow", { signal: AbortSignal.timeout(300) });
} catch (err) {
  console.log(err.name, "after 300 ms: show a message and offer to retry");
}

Some failures deserve a second try. A 503 or 429 often comes with a Retry-After header saying how many seconds to wait; a 400 or 404 won't change however often you ask. Retry the first kind a few times with a growing wait, and report the second kind at once.