美文网首页React NativeReact-NativeReact Native开发经验集
ReactNative项目分享(2)封装网络模块

ReactNative项目分享(2)封装网络模块

作者: DecadeChan | 来源:发表于2017-03-03 13:47 被阅读205次

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

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

    /**
     * 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;
            }
        }
        
    }
    

    相关文章

      网友评论

        本文标题:ReactNative项目分享(2)封装网络模块

        本文链接:https://www.haomeiwen.com/subject/httrgttx.html