ReactNative项目分享（2）封装网络模块

这里简单介绍一下RN的网络请求，并且封装好get和post请求。
需要注意的是我使用了async这种写法，个人认为比较简单。

另外还有一个AsyncStorage的方法，用起来还是挺顺手的，详情请看代码和注释吧。

http://www.jianshu.com/p/5d01e5447b74

/**
 * MYrnProject React Native App
 * @flow
 * @Create date 20170301
 * @Create by Decade
 */

import React, { Component } from 'react';
import {
    AsyncStorage,
} from 'react-native';

export default class Networking extends Component {
    static queryParams(params) {
        return Object.keys(params)
            .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
            .join('&');
    }
    /** 
     * 网络请求封装方法
     * @param 请求方法
     * @param 请求URL
     * @param 请求参数（字典形式）
     */
    static async fetchData(reqMethod, reqUrl, reqParams) {
        try {
            let headers = JSON.parse(await AsyncStorage.getItem('headers')) || {};
            let postBody = null;
            if (reqMethod == 'POST') {
                postBody = JSON.stringify(reqParams);
            }
            if (reqMethod == 'GET') {
                reqUrl += (reqUrl.indexOf('?') === -1 ? '?' : '&') + Networking.queryParams(reqParams);
            }
            let response = await fetch(reqUrl, {
                method: reqMethod, 
                body: postBody,    
                headers: Object.assign(headers, {
                    'Content-Type': 'application/json',
                }),
            });
            let responseJson = await response.json();
            return {
                json: responseJson,
                resp: response,
            };
        } catch(error) {
            console.error(error);
        }
    }

    /**
     * 异步获取或写入本地存储
     * @param inputKey
     * @param inputData 可选 没有inputData则为读取方法 有则为写入存储
     */
    static async getOrsetData(inputKey, inputData, callback) {
        let data = await AsyncStorage.getItem(inputKey);
        let original = JSON.parse(data) || {};
        if (inputData) {
            Object.assign(original, inputData);
            for (var key in original) {
                if (original[key] === null) delete original[key];
            }
            await AsyncStorage.setItem(inputKey, JSON.stringify(original), callback);
        } else {
            return await original;
        }
    }

}

 ReactNavite经验分享