阅读数:

react项目中如何设置fetch超时

0

说明

上一篇我们讲到了,在react项目如何利用fetch进行网络请求,获取
我们想要的网络资源,但是有个细节上的问题,有时候网络环境特别查的时候,比如2g环境下,请求就不那么顺畅了,
如果没有超时设置包括友好提示的话,应用或者服务很有可能会被用户吐槽。但是用过fetch
童鞋都知道,它不像superagent 可以直接设计timeout,那怎么办呢?
两种方案:

  • 抛弃fetch,用superagent
    问题是如果是刚开始写,那没问题,但如果是项目已经成熟了,并存在了很久,小伙伴们都已经熟练上手了,这时候尤其是项目紧的时候还是三思;
  • follow me

实现

回顾下之前的源码 get为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function fetchList(dispatch) {
return fetch('/api/list')
.then((response) => response.json())
.then((json) => {
let hasError = false;
let text = '';
/// /api/list正常返回格式{errcode:0,errmsg:'',data:[]}
if (json.errcode !== 0) {
hasError = true;
text = json.errmsg;
} else {
hasError = false;
text = '';
}
// 网络异常 如断网
if (json.error) {
dispatch(list({
msg: strings.NET_ERROR,
data: []
}));
}
// 正常业务处理
else {
dispatch(list({
msg: hasError ? text : '',
data: hasError ? [] : json.data
}));
}
})
// 异常处理
.catch((err) => {
dispatch(list({
msg: (__DEBUG__ && err.message) ? err.message : strings.NET_ERROR,
data: []
}));
});
}

这里我们只有网络异常包括断网处理,今天我们补上timeout,我们利用promise的race函数,即我们逗乐说的赛跑函数
来实现它,思路就是让fetch和timeout_callback俩赛跑,谁快输出谁,比如我们设置为4s,到4s了正常的fetch还没回来,
那不好意思timeout赢了,这样我们就投机的实现了fetch的超时请求处理。当然有人会问,timeout后fetch还会执行么?
答案是会,但是resolve不在处理了,抛弃了。

  • 为了更加的方便调用我们新建一个reduxHeper.js类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function _fetch(url, timeout) {
var abort_fn = null;
var fetch_promise = fetch(url);
var abort_promise = new Promise(function (resolve, reject) {
abort_fn = function () {
reject({message: '网络超时'});
};
});
var abortable_promise = Promise.race([fetch_promise, abort_promise]);
setTimeout(function () {
abort_fn();
}, timeout);
return abortable_promise;
}
exports = module.exports = {
_fetch: _fetch
}

代码核心就是 Promise.race([fetch_promise, abort_promise]) 其中
fetch_promise就是正常fetch函数,abort_promise 是我们的超时服务,到点了我们会reject一个message
网络超时

  • 引用
1
import {_fetch} from '../reduxHelper’;
  • 调用
1
2
_fetch(url,4000) // 设置timeout为4s 改造后
fetch(url) // 改造前

是不是很简单。

最后

亲测好使


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^