鲲圭填鸭后续(2)|给你代码（鲲字不认识,但根据偏旁猜测,它的意思可能是?）

前言

又是一篇后续加上其他的一些心得问题记录。

问题

1. 显示的信息匹配地址？
2. 超时fetch请求实现

实现

1. 先获得informations为所得到的所有数据，由上篇文章问题一所得到的url地址,进行过滤。

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];
})

2.由于网络的因素，特别是我最近网络波动有点大，那么在请求的时候加入超时的处理是非常有必要的，而且fetch不是原生的ajax不支持加入ontimeout这种，所以目前是用Promise.race实现它的问题。

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)]);
})

这样就可以返回超时。

更好的

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)])
}

给你代码｜往期回顾：

给你代码：短链接生成原理

给你代码：网站图标favicon自动抓取

鲲圭填鸭初实现｜给你代码