2020-08-04 处理前端fetch请求超时问题
2020-08-04 本文已影响0人
gdlooker
由于之前用axios用的多一点,它写好了可以直接通过设置请求超时,这次由于维护别人的项目用到了fetch,这里我们知道在js的es6中有一个Promise.race 就是哪个快哪个先完成执行哪个 这样的话我们就可以通过设置延长超时时间来控制请求超时时间
参考链接:
https://www.cnblogs.com/yfrs/p/fetch.html
来一段我自己示例代码中的问题:
//定义一个超时函数
let timeoutPromise = (timeout) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("我是 timeoutPromise,已经完成了");
}, timeout);
});
}
/**
* 请求网络封装
*/
const get = (url, successCallBack, failCallBack) => {
// console.log(url);
//这句话的意思就是说 我让这个50s来跟这个网络请求比较 哪个快返回哪个
Promise.race([timeoutPromise(50000),fetchGet(url, successCallBack, failCallBack)])
}
//封装的get请求使用回调方式
const fetchGet = (url, successCallBack, failCallBack) => {
return fetch(url)
.then(function (response) {
if (response.status >= 200 && response.status < 300) {
return response.json();
} else {
failCallBack(response);
}
})
.then(function (json) {
successCallBack(json);
})
.catch(function (ex) {
failCallBack(ex);
});
}