Скасування асинхронних операцій

const controller = new AbortController();

fetch("/api/user", { signal: controller.signal });
fetch("/api/notifications", { signal: controller.signal });

// Скасує обидва запити
controller.abort();

const controller = new AbortController();

try {
  const response = await fetch("/api/products", {
    signal: controller.signal
  });

  if (!response.ok) {
    throw new Error(`HTTP-помилка: ${response.status}`);
  }

  const products = await response.json();
  console.log(products);
} catch (error) {
  if (error.name === "AbortError") {
    console.log("Запит скасовано");
  } else {
    console.error("Запит завершився помилкою:", error);
  }
}

// Наприклад, викликається після натискання кнопки «Скасувати»
controller.abort();

try {
  const response = await fetch("/api/data", {
    signal: controller.signal
  });

  return await response.json();
} catch (error) {
  if (error.name === "AbortError") {
    // Користувач або інша частина програми скасувала операцію
    return null;
  }

  // Обробляємо справжню помилку
  throw error;
}

let activeController = null;

async function searchUsers(query) {
  const normalizedQuery = query.trim();

  if (normalizedQuery.length < 2) {
    return [];
  }

  // Скасовуємо попередній запит, якщо він ще виконується
  activeController?.abort("Запущено новий пошук");

  const controller = new AbortController();
  activeController = controller;

  try {
    const response = await fetch(
      `/api/users?search=${encodeURIComponent(normalizedQuery)}`,
      {
        signal: controller.signal
      }
    );

    if (!response.ok) {
      throw new Error(`HTTP-помилка: ${response.status}`);
    }

    const users = await response.json();

    // Перевірка потрібна, якщо сервер або інший API не реагує
    // на скасування так, як очікується
    if (controller.signal.aborted) {
      return [];
    }

    return users;
  } catch (error) {
    if (controller.signal.aborted) {
      return [];
    }

    throw error;
  } finally {
    // Не очищаємо контролер, який уже замінив новий запит
    if (activeController === controller) {
      activeController = null;
    }
  }
}

async function handleSearchInput(event) {
  const resultsElement = document.querySelector("#results");

  try {
    const users = await searchUsers(event.target.value);

    resultsElement.replaceChildren(
      ...users.map((user) => {
        const item = document.createElement("li");
        item.textContent = user.name;
        return item;
      })
    );
  } catch (error) {
    resultsElement.textContent = "Не вдалося виконати пошук";
    console.error(error);
  }
}

document
  .querySelector("#search")
  .addEventListener("input", handleSearchInput);

const controller = new AbortController();

controller.abort("Користувач закрив діалог");

console.log(controller.signal.aborted); // true
console.log(controller.signal.reason);  // "Користувач закрив діалог"

const controller = new AbortController();

controller.abort(new Error("Перевищено ліміт часу"));

console.log(controller.signal.reason.message);
// Перевищено ліміт часу

function createAbortError(reason) {
  if (reason instanceof Error) {
    return reason;
  }

  return new DOMException(
    reason ?? "Операцію скасовано",
    "AbortError"
  );
}

function wait(ms, { signal } = {}) {
  return new Promise((resolve, reject) => {
    if (signal?.aborted) {
      reject(createAbortError(signal.reason));
      return;
    }

    let timerId;

    const cleanup = () => {
      clearTimeout(timerId);
      signal?.removeEventListener("abort", handleAbort);
    };

    const handleAbort = () => {
      cleanup();
      reject(createAbortError(signal.reason));
    };

    timerId = setTimeout(() => {
      cleanup();
      resolve();
    }, ms);

    signal?.addEventListener("abort", handleAbort, { once: true });
  });
}

async function runTask(signal) {
  console.log("Операція розпочалася");

  await wait(2000, { signal });

  console.log("Операція завершилася");
}

const controller = new AbortController();

runTask(controller.signal)
  .then(() => {
    console.log("Успішно виконано");
  })
  .catch((error) => {
    if (controller.signal.aborted) {
      console.log("Операцію скасовано:", controller.signal.reason);
      return;
    }

    console.error("Непередбачена помилка:", error);
  });

setTimeout(() => {
  controller.abort("Користувач скасував операцію");
}, 500);

const controller = new AbortController();
controller.abort();

await wait(1000, { signal: controller.signal });

function subscribeToEvents({ signal, onMessage }) {
  const handleMessage = (event) => {
    onMessage(event.data);
  };

  window.addEventListener("message", handleMessage);

  const cleanup = () => {
    window.removeEventListener("message", handleMessage);
  };

  if (signal?.aborted) {
    cleanup();
    return;
  }

  signal?.addEventListener("abort", cleanup, { once: true });
}

async function loadData() {
  const response = await fetch("/api/data", {
    signal: AbortSignal.timeout(5000)
  });

  if (!response.ok) {
    throw new Error(`HTTP-помилка: ${response.status}`);
  }

  return response.json();
}

try {
  const data = await loadData();
  console.log(data);
} catch (error) {
  if (error.name === "TimeoutError") {
    console.log("Сервер не відповів вчасно");
  } else if (error.name === "AbortError") {
    console.log("Операцію скасовано");
  } else {
    throw error;
  }
}

function createTimeoutController(ms) {
  const controller = new AbortController();

  const timerId = setTimeout(() => {
    controller.abort(new Error("Перевищено час очікування"));
  }, ms);

  controller.signal.addEventListener(
    "abort",
    () => clearTimeout(timerId),
    { once: true }
  );

  return controller;
}

async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
  const timeoutController = createTimeoutController(timeoutMs);

  try {
    return await fetch(url, {
      ...options,
      signal: timeoutController.signal
    });
  } finally {
    timeoutController.abort("Запит завершено");
  }
}

const userController = new AbortController();
const timeoutSignal = AbortSignal.timeout(5000);

const signal = AbortSignal.any([
  userController.signal,
  timeoutSignal
]);

try {
  const response = await fetch("/api/report", { signal });
  const report = await response.json();

  console.log(report);
} catch (error) {
  if (signal.aborted) {
    console.log("Звіт більше не потрібен:", signal.reason);
  } else {
    throw error;
  }
}

// Скасування з боку користувача
document
  .querySelector("#cancel")
  .addEventListener("click", () => {
    userController.abort("Користувач скасував завантаження");
  });

async function loadDashboard(signal) {
  const [profileResponse, messagesResponse] = await Promise.all([
    fetch("/api/profile", { signal }),
    fetch("/api/messages", { signal })
  ]);

  if (!profileResponse.ok || !messagesResponse.ok) {
    throw new Error("Не вдалося завантажити дані панелі");
  }

  return {
    profile: await profileResponse.json(),
    messages: await messagesResponse.json()
  };
}

const controller = new AbortController();

loadDashboard(controller.signal)
  .then((dashboard) => {
    console.log(dashboard);
  })
  .catch((error) => {
    if (controller.signal.aborted) {
      console.log("Завантаження панелі скасовано");
      return;
    }

    console.error(error);
  });

// Скасовує всі запити, пов'язані з панеллю
controller.abort("Сторінку закрито");

async function fetchFromAny(urls, { signal } = {}) {
  const controllers = urls.map(() => new AbortController());

  const abortAll = () => {
    for (const controller of controllers) {
      controller.abort(signal?.reason);
    }
  };

  if (signal?.aborted) {
    abortAll();
    throw createAbortError(signal.reason);
  }

  signal?.addEventListener("abort", abortAll, { once: true });

  try {
    return await Promise.any(
      urls.map(async (url, index) => {
        const response = await fetch(url, {
          signal: controllers[index].signal
        });

        if (!response.ok) {
          throw new Error(`HTTP-помилка: ${response.status}`);
        }

        const result = await response.json();

        // Після успішної відповіді зупиняємо решту запитів
        for (const controller of controllers) {
          controller.abort("Отримано результат з іншого джерела");
        }

        return result;
      })
    );
  } finally {
    signal?.removeEventListener("abort", abortAll);
  }
}

async function loadAndProcess(signal) {
  const response = await fetch("/api/large-data", { signal });
  const data = await response.json();

  if (signal.aborted) {
    return null;
  }

  const processedData = processData(data);

  if (signal.aborted) {
    return null;
  }

  return processedData;
}

function processData(data) {
  return data.map((item) => ({
    id: item.id,
    label: item.name.toUpperCase()
  }));
}

function calculate(items, signal) {
  const result = [];

  for (const item of items) {
    if (signal.aborted) {
      throw createAbortError(signal.reason);
    }

    result.push(expensiveCalculation(item));
  }

  return result;
}

function expensiveCalculation(item) {
  return item.value * 2;
}

function createDataLoader() {
  const controller = new AbortController();

  const promise = fetch("/api/data", {
    signal: controller.signal
  }).then((response) => response.json());

  return {
    promise,
    dispose() {
      controller.abort("Компонент більше не використовується");
    }
  };
}

const loader = createDataLoader();

loader.promise
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    if (!loader.signal?.aborted && error.name !== "AbortError") {
      console.error(error);
    }
  });

// Викликається під час знищення компонента
loader.dispose();

function startLoading() {
  const controller = new AbortController();

  return {
    signal: controller.signal,
    promise: fetch("/api/data", {
      signal: controller.signal
    }).then((response) => response.json()),
    cancel(reason = "Операцію скасовано") {
      controller.abort(reason);
    }
  };
}

const controller = new AbortController();

async function load() {
  return fetch("/api/data", {
    signal: controller.signal
  });
}

controller.abort();

// Наступний виклик одразу отримає вже скасований сигнал
load();

try {
  await fetch("/api/data", {
    signal: controller.signal
  });
} catch (error) {
  if (controller.signal.aborted) {
    return;
  }

  throw error;
}

catch (error) {
  if (signal.aborted) {
    // Це скасування саме цієї операції
    return;
  }

  throw error;
}

controller.abort();

heavySynchronousFunction();