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

这里简单介绍一下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;
        }
    }
    
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,422评论 25 708
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,969评论 19 139
  • 今天放点截图吧。截图的内容是关于“坚持”的话题。起因是因为有人发给我了某位朋友对坚持的观点,因为前半部分与之前的我...
    donLeon阅读 216评论 0 1
  • 盛夏的正午,天气燥热,知了有气无力地嘶叫着! 在书桌前练字的我,突然听到急促的敲门声,不用猜是女儿回来了,忙起身去...
    神奇女侠ahua阅读 563评论 4 2
  • 很早起来准备去车管所,好不容易找到地方,看到黑压压的人群,排队的人真不少啊!过来个负责人,长得不怎么好看,脾气倒是...
    小骨朵阅读 142评论 0 0