rn如何测试数据请求时间_RN-Fetch设置超时时间

本文内容

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返回的数据，返回数组格式

});