Fetch实现timeout功能

原生Fetch并不支持timeout属性

Promise.race

Promse.race就是赛跑的意思，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

timeFetch接受 fetch 请求，并使用setTimeout调用打断方法，Promise.race立刻返回结果,从而实现timeout效果。

timeFetch:(requestPromise, timeout=8000) => {
        let timeoutAction = null;
        const timerPromise = new Promise((resolve, reject) => {
            timeoutAction = () => {
                reject(new Error('request timeout'));
            }
        })
        setTimeout(()=>{
            timeoutAction()
        }, timeout);
        return Promise.race([requestPromise,timerPromise]);
    }

包装之后的fetch方法:

post:(url,data, successCallBack, failCallBack) => {
        let reqData = "";
        for (let key in data) {
            reqData += key + "=" + data[key] + "&";
        }
        console.log("ApiUrl=" + url);
        console.log('reqData', reqData);

        let myFetch = fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: reqData
        });
        return new Promise((resolve,reject) => {
            this.timeFetch(myFetch,8000)
            .then((response) =>response.json())
            .then((response)=>{
                console.log(response);
                if(typeof successCallBack == 'function'){
                    successCallBack(response);
                }
            })
            .catch((error)=>{
                console.log(error);
                if(typeof failCallBack == 'function'){
                    failCallBack(error);
                }
            })
        });
    }