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

Posted 2021-12-16 wukong1688

一、实现思路

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

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