码迷,mamicode.com
首页 > 其他好文 > 详细

[RN] React Native Fetch请求设置超时

时间:2019-06-02 15:33:06      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:class   网络请求   set   网络   方法   lse   eject   结束   res   

一、实现思路

根据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

转载请著名出处!谢谢~~

 

[RN] React Native Fetch请求设置超时

标签:class   网络请求   set   网络   方法   lse   eject   结束   res   

原文地址:https://www.cnblogs.com/wukong1688/p/10963004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!