React Native Fetch请求设置超时

本文在CSDN同步更新：https://blog.csdn.net/weixin_42516118/article/details/88526381

React Native的fetch请求本身自带的超时时间比较长，也不能自定义超时时间，除非修改源码（Android底层是由OkHttp实现）。在实际的App网络连接当中，用户是接受不了那么长的网络超时的，所以我们得自己封装一个。在这里我们可以合理使用Promise来解决这个问题。

一、Promise是什么

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。（该段话摘自阮一峰老师的ES6入门教程http://es6.ruanyifeng.com/#docs/promise）

Promise对象有个race方法，可以满足我们的需求。Promise.race()方法接受一个Promise数组，数组里面的每个Promise都可以在里面同时运行，只要其中一个运行结束或者抛出错误，那么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}

调用

import {HttpPost ,HttpGet} from HttpUtil;

//省略代码。。。
let url = 'xxxxx'
let formData = new FormData();
formData.append("id",'123');
//timeout参数可以不写，自动调用默认
HttpPost(url,formData).then((response) =>{
  //do Something

}).catch((error) =>{
    //网络超时会在此抛出
    console.warn(error)
})

let getUrl = 'https://www.baidu.com/s?'+'wd=' +'123';
HttpGet(getUrl).then((response) =>{
  //do Something

}).catch((error) =>{
    //网络超时或网络异常会在此抛出
    console.warn(error)
})

四、总结

上面是实现思路，具体需要手动去编写代码实践体会，主要运用到 Promise.race函数的功能。

最后编辑于：2019.03.13 10:10:32