Асинхронный JavaScript: промисы, async/await и fetch

console.log("1. синхронный код: начало");

setTimeout(() => console.log("4. таймер — задача из очереди"), 0);

Promise.resolve().then(() => console.log("3. промис — микрозадача"));

console.log("2. синхронный код: конец");

$ node order.mjs
1. синхронный код: начало
2. синхронный код: конец
3. промис — микрозадача
4. таймер — задача из очереди

// Промис, который выполнится через ms миллисекунд
function wait(ms, value) {
  return new Promise((resolve) => setTimeout(() => resolve(value), ms));
}

// Промис, который отклонится через ms миллисекунд
function failAfter(ms, message) {
  return new Promise((resolve, reject) => setTimeout(() => reject(new Error(message)), ms));
}

const order = wait(200, "Капучино готов");
console.log(order);                               // ещё ожидает

order
  .then((text) => {
    console.log(text);
    return text.length;                           // значение уходит в следующий then
  })
  .then((length) => console.log("Символов:", length))
  .catch((error) => console.log("Ошибка:", error.message))
  .finally(() => console.log("Заказ закрыт"));

failAfter(100, "Закончилось молоко")
  .then(() => console.log("Сюда не попадём"))
  .catch((error) => console.log("Ошибка:", error.message));

$ node promise-basics.mjs
Promise { <pending> }
Ошибка: Закончилось молоко
Капучино готов
Символов: 14
Заказ закрыт

const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms));
const elapsed = (start) => `${Math.round((performance.now() - start) / 100) * 100} мс`;

async function makeOrder() {
  const coffee = await wait(300, "капучино");     // функция ждёт здесь, остальной код — нет
  const dessert = await wait(300, "чизкейк");
  return `${coffee} и ${dessert}`;                 // async-функция всегда возвращает промис
}

async function makeOrderParallel() {
  const [coffee, dessert] = await Promise.all([wait(300, "капучино"), wait(300, "чизкейк")]);
  return `${coffee} и ${dessert}`;
}

let start = performance.now();
console.log(await makeOrder(), "—", elapsed(start));

start = performance.now();
console.log(await makeOrderParallel(), "—", elapsed(start));

async function failingOrder() {
  await wait(100);
  throw new Error("Кофемашина на обслуживании");  // превращается в отклонённый промис
}

try {
  await failingOrder();
} catch (error) {
  console.log("Поймали:", error.message);
}

$ node async-await.mjs
капучино и чизкейк — 600 мс
капучино и чизкейк — 300 мс
Поймали: Кофемашина на обслуживании

export class HttpError extends Error {
  constructor(response) {
    super(`HTTP ${response.status} for ${response.url}`);
    this.name = "HttpError";
    this.status = response.status;
  }
}

// fetch + проверка статуса + разбор JSON в одном месте
export async function getJson(url, { signal } = {}) {
  const response = await fetch(url, { signal });  // отклоняется только при сетевой ошибке или отмене
  if (!response.ok) throw new HttpError(response); // 404 и 500 приходят как обычный ответ
  return response.json();                         // тоже промис: тело читается потоком
}

import { getJson } from "./get-json.mjs";

const API = "http://127.0.0.1:8090/api";

async function show(url) {
  try {
    const data = await getJson(url);
    console.log("OK:", data.map((item) => item.name).join(", "));
  } catch (error) {
    console.log(`${error.name}: ${error.message}`);
  }
}

await show(`${API}/menu`);
await show(`${API}/missing`);
await show("http://127.0.0.1:8091/api/menu");   // на этом порту никто не слушает

$ node fetch-demo.mjs
OK: Капучино, Латте, Раф, Чизкейк
HttpError: HTTP 404 for http://127.0.0.1:8090/api/missing
TypeError: fetch failed

import { getJson } from "./get-json.mjs";

const API = "http://127.0.0.1:8090/api";
const elapsed = (start) => `${Math.round((performance.now() - start) / 100) * 100} мс`;

// Promise.all: нужны все результаты, запросы идут одновременно
let start = performance.now();
const [menu, stock] = await Promise.all([
  getJson(`${API}/menu?delay=400`),
  getJson(`${API}/stock?delay=400`),
]);
console.log(`all: ${menu.length} позиции, зёрен ${stock.beans} кг — ${elapsed(start)}`);

// Если один запрос упал, Promise.all отклоняется целиком
try {
  await Promise.all([getJson(`${API}/menu`), getJson(`${API}/promo`)]);
} catch (error) {
  console.log("all отклонён:", error.message);
}

// Promise.allSettled: дождаться всех и узнать судьбу каждого
const results = await Promise.allSettled([
  getJson(`${API}/menu`),
  getJson(`${API}/promo`),
  getJson(`${API}/stock`),
]);
for (const r of results) {
  console.log("allSettled:", r.status, r.status === "fulfilled" ? "данные есть" : r.reason.message);
}

$ node parallel.mjs
all: 4 позиции, зёрен 12 кг — 400 мс
all отклонён: HTTP 503 for http://127.0.0.1:8090/api/promo
allSettled: fulfilled данные есть
allSettled: rejected HTTP 503 for http://127.0.0.1:8090/api/promo
allSettled: fulfilled данные есть

import { getJson } from "./get-json.mjs";

const SLOW = "http://127.0.0.1:8090/api/slow";   // сервер отвечает через 5 секунд

// 1. Отмена по требованию: пользователь ушёл со страницы, нажал «Отмена»
const controller = new AbortController();
setTimeout(() => controller.abort(), 200);
try {
  await getJson(SLOW, { signal: controller.signal });
} catch (error) {
  console.log("1:", error.name);
}

// 2. Таймаут: не ждать дольше 500 мс
try {
  await getJson(SLOW, { signal: AbortSignal.timeout(500) });
} catch (error) {
  console.log("2:", error.name);
}

// 3. И то и другое: что наступит раньше
const userCancel = new AbortController();
const signal = AbortSignal.any([userCancel.signal, AbortSignal.timeout(3000)]);
setTimeout(() => userCancel.abort(), 300);
try {
  await getJson(SLOW, { signal });
} catch (error) {
  console.log("3:", error.name, "— отмена пользователем раньше таймаута");
}

$ node abort.mjs
1: AbortError
2: TimeoutError
3: AbortError — отмена пользователем раньше таймаута

import { createServer } from "node:http";
import { readFile } from "node:fs/promises";

const menu = [
  { id: 1, name: "Капучино", price: 1600 },
  { id: 2, name: "Латте", price: 1800 },
  { id: 3, name: "Раф", price: 2200 },
  { id: 4, name: "Чизкейк", price: 2400 },
];
const stock = { beans: 12, milk: 30 };
let flakyCalls = 0;

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

function sendJson(res, status, data) {
  res.writeHead(status, { "Content-Type": "application/json; charset=utf-8" });
  res.end(JSON.stringify(data));
}

const server = createServer(async (req, res) => {
  const url = new URL(req.url, "http://localhost");
  const delay = Number(url.searchParams.get("delay") ?? 0);
  if (delay) await wait(delay);                 // имитация медленной сети

  switch (url.pathname) {
    case "/":
      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
      return res.end(await readFile(new URL("index.html", import.meta.url)));
    case "/list.js":
      res.writeHead(200, { "Content-Type": "text/javascript; charset=utf-8" });
      return res.end(await readFile(new URL("list.js", import.meta.url)));
    case "/api/menu":
      return sendJson(res, 200, menu);
    case "/api/stock":
      return sendJson(res, 200, stock);
    case "/api/promo":
      return sendJson(res, 503, { error: "Promo service is down" });
    case "/api/slow":
      await wait(5000);
      return sendJson(res, 200, { ok: true });
    case "/api/flaky":                          // первые два запроса — 503, дальше 200
      flakyCalls++;
      return flakyCalls <= 2
        ? sendJson(res, 503, { error: "Try again later" })
        : sendJson(res, 200, menu);
    case "/api/search": {
      const q = (url.searchParams.get("q") ?? "").toLowerCase();
      return sendJson(res, 200, menu.filter((item) => item.name.toLowerCase().includes(q)));
    }
    default:
      return sendJson(res, 404, { error: "Not found" });
  }
});

server.listen(8090, "127.0.0.1", () => console.log("API: http://127.0.0.1:8090"));

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Меню кофейни</title>
  <script src="list.js" defer></script>
</head>
<body data-state="idle">
  <main>
    <h1>Меню</h1>
    <button type="button" id="load">Загрузить меню</button>
    <button type="button" id="cancel" hidden>Отменить</button>
    <p id="status" role="status"></p>
    <ul id="menu"></ul>
  </main>
</body>
</html>

const loadButton = document.querySelector("#load");
const cancelButton = document.querySelector("#cancel");
const statusText = document.querySelector("#status");
const list = document.querySelector("#menu");

let controller = null;

async function getJson(url, signal) {
  const response = await fetch(url, { signal });
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

function setState(state, message) {
  document.body.dataset.state = state;      // idle | loading | done | error
  statusText.textContent = message;
  loadButton.disabled = state === "loading";
  loadButton.textContent = state === "error" ? "Повторить" : "Загрузить меню";
  cancelButton.hidden = state !== "loading";
}

function renderMenu(items) {
  list.replaceChildren(...items.map((item) => {
    const li = document.createElement("li");
    li.textContent = `${item.name} — ${item.price} ₸`;
    return li;
  }));
}

async function loadMenu() {
  controller = new AbortController();
  const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(5000)]);
  setState("loading", "Загружаем меню…");
  list.replaceChildren();

  try {
    const items = await getJson("/api/menu", signal);
    renderMenu(items);
    setState("done", `Позиций в меню: ${items.length}`);
  } catch (error) {
    if (error.name === "AbortError") {
      setState("idle", "Загрузка отменена");
    } else if (error.name === "TimeoutError") {
      setState("error", "Сервер не ответил за 5 секунд");
    } else {
      setState("error", "Не удалось загрузить меню. Проверьте соединение");
    }
  } finally {
    controller = null;
  }
}

loadButton.addEventListener("click", loadMenu);
cancelButton.addEventListener("click", () => controller?.abort());