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