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);
        });
}
上一篇 下一篇

猜你喜欢

热点阅读