一、实现思路
根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现。
这个时候会有三种情况出现:
1.A任务在8秒内完成(假定8秒超时),Promise.race任务正常结束。
2.超过8秒A任务仍然未完成,由B任务计时结束自动中断Promise.race。
3.发生异常,Promise.race自动结束。
针对以上三种情况来设计网络超时方案。
一、实现思路
根据Promise.race的特性,我们在Promise.race里面添加两个任务,一个是正常的网络请求任务A,另外一个便是网络延时任务B,网络延时可以利用setTimeout方法实现。
这个时候会有三种情况出现:
1.A任务在8秒内完成(假定8秒超时),Promise.race任务正常结束。
2.超过8秒A任务仍然未完成,由B任务计时结束自动中断Promise.race。
3.发生异常,Promise.race自动结束。
针对以上三种情况来设计网络超时方案。
HttpUtil.js
//先定义延时函数
const delay = (timeOut = 8*1000) =>{
return new Promise((resolve,reject) =>{
setTimeout(() =>{
reject(new Error('网络超时');
},timeOut);
//fetch网络请求
const fetchPromise = (method,url, formData) =>{
return new Promise((resolve, reject) => {
fetch(url,{
method: method,
body:formData
}).then((response) => {
if (response.ok) {
return response.json();
} else {
reject(new Error('服务器异常'));
}).then((responseJson) => {
resolve (responseJson);
}).catch((err) => {
reject(new Error(err);
//race任务
const _fetch = (fetchPromise, timeout) => {
return Promise.race([fetchPromise,delay(timeout)]);
//post
const HttpPost = (url, formData,timeout = 8*1000) =>{
return _fetch(fetchPromise('POST', url, formData), timeout);
//get
const HttpGet = (url,timeout = 8*1000) =>{
return _fetch(fetchPromise('Get', url), timeout);
export {HttpPost ,HttpGet}
https://www.jianshu.com/p/2df7c6e3b3c3
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10963004.html
转载请著名出处!谢谢~~