AbortSignal

let controller;
const url = "video.mp4";

const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  if (controller) {
    controller.abort();
    console.log("");
  }
});

async function fetchVideo() {
  controller = new AbortController();
  const signal = controller.signal;

  try {
    const response = await fetch(url, { signal });
    console.log("", response);
    // 
  } catch (err) {
    console.error(`: ${err.message}`);
  }
}

async function get() {
  const controller = new AbortController();
  const request = new Request("https://example.org/get", {
    signal: controller.signal,
  });

  const response = await fetch(request);
  controller.abort();
  //  `AbortError` 
  const text = await response.text();
  console.log(text);
}

const url = "video.mp4";

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
  const result = await res.blob();
  // 
} catch (err) {
  if (err.name === "TimeoutError") {
    console.error(":  5 ");
  } else if (err.name === "AbortError") {
    console.error(
      "",
    );
  } else {
    // 
    console.error(`: : ${err.name}, : ${err.message}`);
  }
}

try {
  const controller = new AbortController();
  const timeoutSignal = AbortSignal.timeout(5000);
  const res = await fetch(url, {
    // 
    signal: AbortSignal.any([controller.signal, timeoutSignal]),
  });
  const body = await res.json();
} catch (e) {
  if (e.name === "AbortError") {
    // 
  } else if (e.name === "TimeoutError") {
    // 
  } else {
    // 
    console.log(`Type: ${e.name}, Message: ${e.message}`);
  }
}

function myCoolPromiseAPI(/* , */ { signal }) {
  return new Promise((resolve, reject) => {
    // 
    signal.throwIfAborted();

    // API 
    //  resolve(result) 

    // 'abort' 
    // `once: true` abort  Promise 
    signal.addEventListener(
      "abort",
      () => {
        // 
        // 
        reject(signal.reason);
      },
      { once: true },
    );
  });
}

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

startSpinner();

myCoolPromiseAPI({ /* , */ signal })
  .then((result) => {})
  .catch((err) => {
    if (err.name === "AbortError") return;
    showUserErrorMessage();
  })
  .then(() => stopSpinner());

controller.abort();