鯤圭填鴨後續(2)｜給你代碼

前言

又是一篇後續加上其他的一些心得問題記錄。

問題

1. 顯示的信息匹配地址？
2. 超時fetch請求實現

實現

1. 先獲得informations為所得到的所有數據，由上篇文章問題一所得到的url地址,進行過濾。

<code>const hosts = background的信息;
//對於當前的地址進行過濾。
//ele { host為地址}
informations = informations.filter(ele => {  
    return hosts.includes(ele.host);
})​
//也可以進行匹配正則表達式，目的: www.qq.com => qq.com main.qq.com => qq.com
const pattern = /???/;
hosts.forEach((e, i, t) => {
     t[i] = e.match(pattern)[0];
})/<code>

2.由於網絡的因素，特別是我最近網絡波動有點大，那麼在請求的時候加入超時的處理是非常有必要的，而且fetch不是原生的ajax不支持加入ontimeout這種，所以目前是用Promise.race實現它的問題。

<code>const p1 = timeout => new Promise((res, rej) => {
    setTimeout(rej, timeout, "超時")
});
const p2 = url => fetch(url);
function request(timeout, url) {
    return Promise.race([p1(timeout), p2(url)]);
})/<code>

這樣就可以返回超時。

更好的

<code>const controller = new AbortController(); 
controller.abort();
//在函數里執行他來終止請求，不然請求還會繼續
const controller = new AbortController();
const signal = controller.signal;
const timeoutRes = new Response("timeout", {status: 504, statusText: "timeout "})
const p1 = timeout => new Promise((res, rej) => {
    setTimeout(() => {
        rej(timeoutRes);
        controller.abort();
    }, timeout,)
});
const p2 = url => fetch(url, {
    signal
});
function request(timeout, url) {
    return Promise.race([p1(timeout), p2(url)])
}/<code>

給你代碼｜往期回顧：

閱讀更多 鯤圭雲計算 的文章

關鍵字: qq Promise p1