RN实战项目网络请求封装(二)

网络相关学习文档，参考 RN中文网文档

RN中主要是用fetch来完成异步网络请求的，传统的ajax慢慢的会被fetch替代

RN中文网fetch API 案例

fetch(‘https://mywebsite.com/endpoint/‘, {
  method: ‘POST‘, //请求方法 默认get 
  headers: {
    ‘Accept‘: ‘application/json‘,
    ‘Content-Type‘: ‘application/json‘, //数据格式 json或者key-value形式
  },
  body: JSON.stringify({ //json对象转换为json字符串
    firstParam: ‘yourValue‘,
    secondParam: ‘yourOtherValue‘,
  })
})


getMoviesFromApiAsync() {
    return fetch(‘https://facebook.github.io/react-native/movies.json‘)
      .then((response) => response.json())//回调结果，并转换为json对象 es6写法
      .then((responseJson) => {
        return responseJson.movies; //给调用者返回数据集合
      })
      .catch((error) => {
        console.error(error); //网络请求出现错误，或者getMoviesFromApiAsync 函数调用者自身出现错误都会被这里catch住
      });
 }

项目中NetUtils封装

import React,{Component} from ‘react‘;

//这里引入了一个md5加密的库，Github https://github.com/kmend/react-native-md5
//引入方式很简单，npm install react-native-md5 --save
//然后打开项目的package.json 查看，发现此时多了一个依赖 

import MD5 from "react-native-md5";
import {
    ToastAndroid,
} from ‘react-native‘;


/**
 * 网络请求的工具类
 */
export default class NetUtils extends Component{


    //构造函数，默认的props，以及state 都可以在这里初始化了
    constructor(props){
        super(props); 
    }

    /**
     * 普通的get请求 
     * @param {*} url 地址
     * @param {*} params  参数
     * @param {*} callback  成功后的回调
     */
    static get(url,params,callback){
       fetch(url,{
        method:‘GET‘,
        body:params
        })
        .then((response) => {
            if(response.ok){//如果相应码为200
                return response.json(); //将字符串转换为json对象
            }
        })
        .then((json) => {
            //根据接口规范在此判断是否成功，成功后则回调
            if(json.resultCode === "SUCCESS"){
                callback(json);
            }else{
                //否则不正确，则进行消息提示
                //ToastAndroid 只针对安卓平台，并不跨平台
                ToastAndroid.show(json.resultDesc,ToastAndroid.SHORT);
            }
        }).catch(error => {
            ToastAndroid.show("netword error",ToastAndroid.SHORT);
        });
    };

    /**
     * post key-value 形式 hader为‘Content-Type‘: ‘application/x-www-form-urlencoded‘
     * @param {*} url 
     * @param {*} service 
     * @param {*} params 
     * @param {*} callback 
     */
    static post(url,service,params,callback){
        //添加公共参数
        var newParams = this.getNewParams(service,params);//接口自身的规范，可以忽略

        fetch(url,{
        method:‘POST‘,
        headers:{
            ‘Content-Type‘: ‘application/x-www-form-urlencoded;charset=UTF-8‘//key-value形式
        },
        body:newParams
        })
        .then((response) => {
            if(response.ok){
               return response.json();
            }
        })
        .then((json) => {
            if(json.resultCode === "SUCCESS"){
                callback(json);
            }else{
                ToastAndroid.show(json.resultDesc,ToastAndroid.SHORT);
            }
        }).catch(error => {
            alert(error);
            //ToastAndroid.show("netword error",ToastAndroid.SHORT);
        });
    };

    /**
     * post json形式  header为‘Content-Type‘: ‘application/json‘
     * @param {*} url 
     * @param {*} service 
     * @param {*} jsonObj 
     * @param {*} callback 
     */
    static postJson(url,service,jsonObj,callback){
        fetch(url,{
        method:‘POST‘,
        headers:{
          ‘Content-Type‘: ‘application/json;charset=UTF-8‘
        },
        body:JSON.stringify(jsonObj),//json对象转换为string
        })
        .then((response) => {
            if(response.ok){
                return response.json();
            }
        })
        .then((json) => {
            if(json.resultCode === "SUCCESS"){
                callback(json);
            }else{
                ToastAndroid.show(json.resultDesc,ToastAndroid.SHORT);
            }
        }).catch(error => {
            ToastAndroid.show("netword error",ToastAndroid.SHORT);
        });
    };

    /**
     * 获取当前系统时间 yyyyMMddHHmmss
     */
    static getCurrentDate(){
        var space = "";
        var dates = new Date();
        var years = dates.getFullYear();
        var months = dates.getMonth()+1;
        if(months<10){
            months = "0"+months;
        }

        var days = dates.getDate();
        if(days<10){
            days = "0"+days;
        }

        var hours = dates.getHours();
        if(hours<10){
            hours = "0"+hours;
        }

        var mins =dates.getMinutes(); 
        if(mins<10){
            mins = "0"+mins;
        }

        var secs = dates.getSeconds();
        if(secs<10){
            secs = "0"+secs;
        }
        var time = years+space+months+space+days+space+hours+space+mins+space+secs;
        return time;
    };

    /**
     * 设置公共参数
     * @param {*} service  服务资源类型
     * @param {*} oldParams 参数 key-value形式的字符串 
     * @return 新的参数
     */
    static getNewParams(service,oldParams){
        var newParams = "";
        var currentDate = this.getCurrentDate();
        var MD5KEY = "XXXXXX";
        var digestStr = MD5KEY+service+currentDate+MD5KEY;
        newParams = oldParams+"&timestamp="+currentDate+"&digest="+this.MD5(digestStr);
        return newParams;
    };

    /**
     * 字符串加密
     * @param {*} str 
     */
    static MD5(str){
        return MD5.hex_md5(str);
    };


    /**
     * 获取当前系统时间 yyyyMMddHH
     */
    static getCurrentDateFormat(){
        var space = "";
        var dates = new Date();
        var years = dates.getFullYear();
        var months = dates.getMonth()+1;
        if(months<10){
            months = "0"+months;
        }

        var days = dates.getDate();
        if(days<10){
            days = "0"+days;
        }
        var time = years+space+months+space+days;
        return time;
    };
}

测试并使用

import NetUtils from ‘../net/NetUtils‘;

/**
 * 首页
 */
export default class Index extends Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        //加载数据
        var url = ‘http://192.168.2.112:8042/ShengDaAutoPlatform/remit!clerkDetail‘;
        var service = "clerkDetail";
        var userInfo;
        AsyncStorage.getItem("userInfo", (error, result) => {
            if (error) {

            } else {
                userInfo = eval(‘(‘ + result + ‘)‘);
                var params = "service=clerkDetail&pageSize=10&page=1&userId=" + userInfo.userId;
                NetUtils.post(url, service, params, (result) => {
                    ToastAndroid.show(result.resultDesc, ToastAndroid.SHORT);
                });
            }
        });
    };
  }
}

由于NetUtils是一个外部的js文件，所以在使用的地方一定要记得import NetUtils from ‘../net/NetUtils’;

这里遇到的坑：

一：import 的时候 NetUtils.js 后面的.js可以去掉，路径填写相对路径

二：NetUtils.js里面 export default class NetUtils extends Component{} 组件必须export default 声明，切记一个js文件中只能有且仅有一个default声明

三：get post postJson方法都用了static 声明，直接NetUtils.post/get/postJosn即可

END

简 书博客：http://www.jianshu.com/p/1cda2b889d47