React Native fetch实现timeout功能

前几天收到一个需求，就是在网络请求超时时，弹出一个toast告知用户“网络请求超时，请稍后重试！”。当接到这个需求时，一开始并没有觉得有多麻烦，直接在fetch请求时设置一下timeout属性就行了。于是乎就去React Native的开发文档中去找，可结果却让人“很难过”，居然没有找到，心里不免嘀咕“又掉到坑里面了”。

好吧，既然没有timeout属性就只能自己去想办法解决了。经过一段时间的思考，初步确定了三种解决方案：

• 通过和原生的交互来实现网络请求超时的功能；
• 把fetch重新封装一下，加上timeout的功能，参考博文；
• 使用其他的网络库，文档中说React Native中已经内置了XMLHttpRequest API(也就是俗称的ajax);

在项目中我选择了第二种方法，具体的实现如下：

//Http.js
export default fetchers = {
    post:(url, body = {}) => {
        return _fetch(fetch_promise(url, body = {}), 60000);
    }
}

function _fetch(fetch_promise, timeout) {
    var abort_fn = null;
    var abort_promise = new Promise((resolve, reject) => {
        abort_fn = function() {
            reject('abort promise');
        };
    });
    var abortable_promise = Promise.race([
        fetch_promise,
        abort_promise
    ]);
    setTimeout(function(){
        abort_fn();
    }, timeout);

    return abortable_promise;
}

function fetch_promise(url, body = {}) {
    return new Promise((resolve, reject) => {
        fetch(url,{
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8',
            },
        }).then((response) => { 
            return response.json();     
        }).then((jsonData) => {
            resolve(jsonData);
        }).catch((err) => {
            reject(err);//这里可以使用resolve(err),将错误信息传回去
            if (err.message === 'Network request failed'){
                console.log('网络出错');
            } else if (err === 'abort promise'){
                console.log('请求超时');
            }
        })
    })
}

/*
 * 此巧妙之处在于Promise.race()的使用
 */

这是目前项目中初步解决网络超时的方法，第一种和第三种方案还没有来得及去实现，后期如果有时间实现会在此后加上。如果发现有需要修改的地方或是好的建议，也可以留言告知，大家相互交流相互提高嘛！

参考链接：

• http://www.open-open.com/lib/view/open1472717659359.html
• https://github.com/facebook/react-native/issues/2394
• https://github.com/facebook/react-native/issues/3876