React Native 网络请求和Json-String封装

作者: Nickyzhang | 来源:发表于2017-05-07 10:14 被阅读872次
    Serialization
    'use strict';
    import React, {Component} from 'react';
    
    class JsonUtil extends Component {
        /*
         * 字符转换为JSON
         * */
        static strToJson(data) {
            return JSON.parse(data);
        }
        /*
         * JSON转换为字符
         * */
        static jsonToStr(data) {
            return JSON.stringify(data);
        }
        /*
         * map转换为json
         * */
        static mapToJson(map) {
            return JSON.stringify(JsonUtil.strMapToObj(map));
        }
        /*
         * json转换为map
         * */
        static jsonToMap(jsonStr) {
            return JsonUtil.objToStrMap(JSON.parse(jsonStr));
        }
        /*
         * map转化为对象(map所有键都是字符串,可以将其转换为对象)
         * */
        static strMapToObj(strMap) {
            let obj = Object.create(null);
            for (let [k, v] of strMap) {
                obj[k] = v;
            }
            return obj;
        }
        /*
         * 对象转换为Map
         * */
        static objToStrMap(obj) {
            let strMap = new Map();
            for (let k of Object.keys(obj)) {
                strMap.set(k, obj[k]);
            }
            return strMap;
        }
    }
    
    export default JsonUtil;
    
    网络请求
    'use strict';
    import React, {Component} from 'react';
    
    class NetUtil extends Component {
    
    static DouB_Api = 'https://api.douban.com/v2/movie/top250?start=0&count=20';
    /**
     * post请求
     * url : 请求地址
     * data : 参数(Json对象)
     * callback : 回调函数
     * */
    static postJson(url, data, callback) {
        var fetchOption = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        };
    
        fetch(url, fetchOption)
            .then((response) => response.text())
            .then((responseText) => {
                callback(JSON.parse(responseText))
            })
            .done();
    }
    
    /**
     * get请求
     * url : 请求地址
     * callback : 回调函数
     */
    static get(url, callback) {
        var fetchOptions = {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            }
        };
        fetch(url, fetchOptions)
            .then((response) => response.text())
            .then((responseText) => {
                callback(JSON.parse(responseText));
            }).done();
        }
    }
    /**
     * put请求
     * url : 请求地址
     * data : 参数(Json对象)
     * callback : 回调函数
     * */
    static putJson(url, data, callback) {
        var fetchOption = {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                //此处使用的LeanCloud
                'X-LC-Id': 'M401fErHUPYhDKmgp0wjqVRX-gzGzoHsz',
                'X-LC-Key': 'Jqnvt1Lmt34vQh1JDRUpRAqq'
            },
            body: JSON.stringify(data)
        };
    
        fetch(url, fetchOption)
            .then((response) => response.text())
            .then((responseText) => {
                callback(JSON.parse(responseText))
            })
            .done();
      }
    export default NetUtil;

    相关文章

      网友评论

        本文标题:React Native 网络请求和Json-String封装

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