本文内容
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返回的数据，返回数组格式
});
