const xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
  console.log(this.responseText);
});
xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
xhr.send();

// 返回
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

// xhr的取消操作：執(zhí)行過(guò)程比較模糊，不知道abort什么時(shí)機(jī)進(jìn)行處理
xhr.abort()

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos/1";
?
fetch(url, { signal })
  .then((res) => res.json())
  .then((json) => console.log(json));

ac.abort()

// 修改后的代碼
fetch(url, { signal: ac.signal })
  .then((res) => res.json())
  .then((json) => console.log(json))
  .catch(e => console.log(e)) // DOMException: signal is aborted without reason
ac.abort() // abort接受一個(gè)入?yún)ⅲ瑫?huì)被傳遞到signal的reason屬性中

const ac = new AbortController();
const { signal } = ac;
const url = "https://jsonplaceholder.typicode.com/todos";
?
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log(json))
    .catch((e) => console.log(e)); // DOMException: signal is aborted without reason
};
?
todoRequest(1, { signal });
todoRequest(2, { signal });
todoRequest(3, { signal });
?
ac.abort("cancled");

const signalAbout = AbortSignal.abort(); // AbortSignal {aborted: true, reason: DOMException: signal is aborted without reason...}

const signalAbout = AbortSignal.abort('abortedReason');
try {
    signalAbout.throwIfAborted(); // 拋出error： abortedReason
} catch (error) {
    console.log(error);
}

// 使用 AbortSignal.timeout 設(shè)置 10ms超時(shí)
const signalAbout = AbortSignal.timeout(10);
const todoRequest = (id, { signal }) => {
  fetch(`${url}/${id}`, { signal })
    .then((res) => res.json())
    .then((json) => console.log("json: ", json))
    .catch((e) => console.log("err: ", e)); //DOMException: signal timed out 
};
todoRequest(1, { signal: signalAbout });

const signalAbout = AbortSignal.timeout(10);
signalAbout.addEventListener("abort", (e) => {
    console.log("aborted: ", e);
})?

const ac = new AbortController();
const { signal } = ac;
?
const cancelablePromise = ({signal}) => 
    new Promise((resolve, reject) => {
        // 情況1：直接主動(dòng)取消
        signal?.throwIfAborted(); // 也可以用reject
?
        // 情況2：正常處理業(yè)務(wù)邏輯
?
        setTimeout(() => {
            Math.random() > 0.5 ? resolve('data') : reject('fetch error');
        }, 1000);
?
        // 情況3：超時(shí) todo?
?
        // 監(jiān)聽(tīng)取消
        signal.addEventListener("abort", () => {
            reject(signal?.reason);
        });
    })
// 發(fā)起網(wǎng)絡(luò)請(qǐng)求
cancelablePromise({signal})
.then(res => console.log('res: ', res))
.catch(err => console.log('err: ', err))
// 情況1 
// ac.abort('用戶離開(kāi)頁(yè)面了') // err:  用戶離開(kāi)頁(yè)面了
?
// 情況2 正常請(qǐng)求 err:  fetch error || res:  data

const ac = new AbortController();
const { signal } = ac;
const eleA = document.querySelector('#a');
const eleB = document.querySelector('#b');
?
function aEleHandler () {}; // 事件
eleA.addEventListener('click', aEleHandler, {signal}); // 無(wú)論綁定多少個(gè)事件，都只需要一個(gè)signal
?
eleB.addEventListener('click', () => {
    ac.abort(); // 只需要取消一次
})

const ac = new AbortController();
const { signal } = ac;
const fetchAndRenderAction = (signal) => {
    requestData(signal); // 多個(gè)串行或者并行的接口
    drawAndRender(signal); // 異步渲染
}
?
try{
    fetchAndRenderAction({signal})
}catch{
    // dosomething...
}