本文内容

fetch设置超时时间

所需知识点：Promise.race

这次百米赛跑，我允许你先跑30秒，30秒内你跑完，我输，蛋糕归你。

30秒内跑不完，你输，蛋糕归我，赌不赌？！

延伸知识点：Promise.all

这次百米赛跑，我们同时出发，但是必须我们两个人都到达终点才可以享用那美味的蛋糕，比不比？！

Promise.race 定义

接收一个数组，不同的是只要该数组中的 Promise 对象的状态发生变化（无论是 resolve 还是 reject）该方法都会返回

根据这个就可以实现我们的超时时间设置
Promise.race：接收两个promise对象，一个是本身的请求，一个是30秒后的发送promise的对象，
根据Promise.race的定义，会有两种情况

IMG_3947.JPG

第一种返回超时Promise，即可处理超时

Promise.then((response) => '请求超时')

第一种返回请求Promise，即可处理数据

Promise.then((response) => '处理请求结果')

具体代码

/**
 * Created by chjwrr on 2017/7/24.
 */

const headers = {
    "Content-Type": "multipart/form-data",
};
const timeOut = 30000;

const _fetch = (fetch_promise, timeout = timeOut) => {
    let abort_fn = null;
// 超时promise
    const abort_promise = new Promise((resolve, reject) => {
        abort_fn = () => {
            const err = new Error('timeout');
            reject(err);
        }
    });
    // 接收一个数组，只要该数组中的 Promise 对象的状态发生变化（无论是 resolve 还是 reject）该方法都会返回
    const abortable_promise = Promise.race([fetch_promise, abort_promise]);
// 30秒以后才发送超时promise，这时如果请求结束，则返回请求promise，如果还在请求，则返回超时promise
 setTimeout(() => {
        abort_fn()
    }, timeout);
    return abortable_promise;

};

const upLoadImageManager = (url, data, loadingCallBack, successCallBack, failCallBack) => {

    loadingCallBack();

    if (global.token) {
        headers.Authorization = `Bearer ${global.token}`;
    }
    console.log('%c HTTP Request', 'color:blue');
    console.log(`%c request url ${url}`, 'color:green');
    console.log(`%c Request params ${JSON.stringify(data)}`, 'color:green');

    const myFetch = fetch(url, {
        method: 'POST',
        headers,
        body: data,
    });


    _fetch(myFetch, timeOut)
        .then((response) => response.json())
        .then((responseData) => {
            successCallBack(responseData);
        })
        .catch((error) => {
            failCallBack(error);
        });
};
export {
    upLoadImageManager,
};

延伸知识点：Promise.all

Promise.all 可以接收一个元素为 Promise 对象的数组作为参数，当这个数组里面所有的 Promise 对象都变为 resolve 时，该方法才会返回。

// 网络代码
var p1 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("Hello");
    }, 3000); // 3秒后
});

var p2 = new Promise(function (resolve) {
    setTimeout(function () {
        resolve("World");
    }, 1000); // 1秒后
});

Promise.all([p1, p2]).then(function (result) {
    console.log(result); // ["Hello", "World"] 3秒后执行，整合两个pormise返回的数据，返回数组格式
});