React-Native 之 GD （八）GET 网络请求封装

1.到这里，相信各位对 React-Native 有所熟悉了吧，从现在开始我们要慢慢往实际的方向走，这边就先从网络请求这部分开始，在正式开发中，网络请求一般都单独作为一部分，我们在需要使用的地方只需要简单调用一下即可，这样做的好处是让整个 工程 的结构更加清晰，让组件们各司其职，只管好自己该管的事，并且后期维护成本也会相应降低。

首先，我们要先对 fetch 的 GET 和 POST 请求方式进行一层基础封装，也就是要把它们单独独立出来，那么这边先来看下 GET 这边：

 

HTTPBase.js

/**
 * GET 网络请求封装
 */

var HTTPBase = {};

/**
 *
 * GET请求
 *
 * @param url
 * @param params {}包装
 * @param headers
 *
 * @return {Promise} 返回一个Promise对象
 *
 * */
HTTPBase.get = function (url, params, headers) { // 参数
    if (params) {

        let paramsArray = [];

        // 获取 params 内所有的 key
        let paramsKeyArray = Object.keys(params);
        // 通过 forEach 方法拿到数组中每个元素,将元素与参数的值进行拼接处理,并且放入 paramsArray 中
        paramsKeyArray.forEach(key => paramsArray.push(key + '=' + params[key]));

        // 网址拼接
        if (url.search(/?/) === -1) {
            url += '?' + paramsArray.join('&');
        }else {
            url += paramsArray.join('&');
        }
    }

    // 向外部,返回一个Promise对象
    return new Promise(function (resolve, reject) {
        fetch(url, {
            method:'GET',
            headers:headers
        })
            .then((response) => response.json())
            .then((response) => {
                resolve(response);
            })
            .catch((error) => {
                reject({status:-1})
            })
            .done();
    })
}

module.exports = HTTPBase;

调用

// 网络请求
    fetchData(resolve) {
        HTTPBase.get('http://guangdiu.com/api/gethots.php')
            .then((responseData) => {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData.data),
                    loaded:true,
                });
                if (resolve !== undefined){
                    setTimeout(() => {
                        resolve();  // 关闭动画
                    }, 1000);
                }
            })
            .catch((error) => {

            })
    }

.