[JavaScript知识库]fetch请求超时取消请求封装

AbortController 可以终止一个或者多个fetch请求
1创建一个 AbortController 实例
2该实例具有 signal 属性
3将 signal 传递给 fetch option 的 signal
4调用 AbortController 的 abort 属性来取消所有使用该信号的 fetch。
一．简单使用：

const controller = new AbortController();
const { signal } = controller;

fetch("http://localhost:8000", { signal }).then(response => {
    console.log(`Request 1 is complete!`);
}).catch(e => {
    console.warn(`Fetch 1 error: ${e.message}`);
});
// Abort request
controller.abort(); //终止fetch的请求

二．做超时并终止接口请求封装

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

let timeoutPromise = (timeout) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(new Response("timeout", { status: 504, statusText: "timeout " }));
            controller.abort();
        }, timeout);
    });
}
let requestPromise = (url) => {
    return fetch(url, {
        signal: signal
    });
};
//Promise.race([promise1,promise2]) 传入多个Promise对象，等待最快对象完成
Promise.race([timeoutPromise(1000), requestPromise("https://www.baidu.com")])
    .then(resp => {
        console.log(resp);
    })
    .catch(error => {
        console.log(error);
});