// 1. 創(chuàng)建 AbortController 實(shí)例
const controller = new AbortController();
const { signal } = controller;

// 2. 發(fā)起請(qǐng)求并綁定信號(hào)
fetch("/api/data", { signal })
  .then((response) => response.json())
  .then((data) => console.log("請(qǐng)求成功:", data))
  .catch((err) => {
    // 3. 捕獲中止錯(cuò)誤
    if (err.name === "AbortError") {
      console.log("主動(dòng)取消：請(qǐng)求被成功截?cái)?);
    } else {
      console.error("請(qǐng)求失敗:", err);
    }
  });

// 2 秒后主動(dòng)取消請(qǐng)求
setTimeout(() => {
  controller.abort(); 
}, 2000);

// 使用同一個(gè) AbortController 取消多個(gè)請(qǐng)求
const controller = new AbortController();

// 請(qǐng)求1
const request1 = fetch('url1', {
  signal: controller.signal
});

// 請(qǐng)求2
const request2 = fetch('url2', {
  signal: controller.signal
});

// 請(qǐng)求3
const request3 = fetch('url3', {
  signal: controller.signal
});

// 同時(shí)取消所有請(qǐng)求
document.getElementById('cancelBtn').addEventListener('click', () => {
  controller.abort();
  console.log('所有請(qǐng)求已取消');
});

// 等待所有請(qǐng)求
Promise.all([request1, request2, request3])
  .then(responses => Promise.all(responses.map(r => r.json())))
  .then(data => console.log('所有數(shù)據(jù):', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('請(qǐng)求被取消');
    }
  });