native封装卡片 react_React-Native爬坑中（网络层简单封装）

即将开始RN的深入坑，总结一下以前用到的一些点滴。。。

在RN中使用网络请求，一般会使用fetch来做，fetch具体用法：https://github.com/github/fetch https://segmentfault.com/a/1190000008484070，为了使用更加方便，做一个简单的封装，大体意思是这样，具体细节命名之类可根据需要修改。

首先，针对接口API，定义如下(const和get都是为了避免被调用者修改)：

const BaseUrl = "http://www.baidu.com/";

const Api = {

get GETPRICEBASEDATAAPI() {return BaseUrl + 'app/order/warehouse'},

get CALCULATEPRICEAPI() {return BaseUrl + 'app/utility/priceCalculation/appcalculation'},

...

};

针对请求状态，定义如下：

const Process = {

get FETCH_BEGIN() {return 'FETCH_BEGIN'},//请求开始

get FETCH_SUCCESS() {return 'FETCH_SUCCESS'},//请求成功

get FETCH_FAIL() {return 'FETCH_FAIL'}//请求失败

};

针对响应结果，定义如下：

class Response {}

Response.protoTypes = {

code: Number, //状态码

msg: String, //消息

data: Array //数据(这里假设所有接口返回结果都是数组形式)

};

准备工作做完后，开始启动fetch，其中的方法均使用静态方法(类方法)

class Net {

//首先定义最常使用的get和post，其中参数api为接口地址，params为请求参数，callback为请求结果的回调，在回调函数中传递Response

static commonSendGet(api, params, callback) {

return this.commonSend('GET', api, params, callback);

}

static commonSendPost(api, params, callback) {

return this.commonSend('POST', api, params, callback);

}

static commonModel(method, api, params, callback) {

if (method === 'GET') {

api = this.generateApi(method, api, params);

}

let setting = this.generateSetting(method, api, params);

return fetch(api, setting)

.then(response => {

return response.json();

})

.then(json=>{

this.dealWithJson(json, callback);

})

.catch(e=>{

this.dealWithJson(null, callback);

})

}

//对api进行处理

static generateApi(method, api, params) {

if (method === 'GET') {

api = this.appendParams(api, params);

}

return api;

}

//设置请求(请求头，请求体等)，主动保存或设置cookies，需要调用原生来设置，或者使用社区中提供的[react-native-cookiemanager](https://github.com/beefe/react-native-cookiemanager)

static generateSetting(method, api, params) {

let setting = {};

setting.credentials = 'same-origin'; //同域发送cookies

//setting.credentials = 'include'; //跨域+同域发送cookies

setting.method = method;

if (method === 'POST') {

setting.body = JSON.stringify(params);

}

let headers = this.setNetHeaders(api);

if (headers) setting.headers = headers;

return setting;

}

//设置请求头

static setNetHeaders(api) {

if (api.match(Api.CALCULATEPRICEAPI)) {

return {

'Accept': 'application/json',

'Content-Type': 'application/json'

}

}

return null;

}

//处理请求结果，并执行回调函数

static dealWithJson(json, callback) {

let res = this.generateResponse(json);

this.sendCallback(res, callback);

}

//将请求到的json数据转化为Response

static generateResponse(json) {

let res = new Response();

if (!json) {

res.code = 1;

res.msg = '网络错误';

return res;

}

res.code = json.status;

res.data = json.data;

res.msg = this.generateMsg(json);

return res;

}

//处理返回的消息

static generateMsg(json) {

if (!json) return null;

return json.msgs;

}

//执行回调函数

static sendCallback(res, callback) {

if (callback) callback(res);

}

}

//最后，将其暴露给其它文件调用

export {Net, Process, Api, Response};

以上简单封装告一段落，接下来在其它地方使用的时候，会变成这样(以redux中的action为例)：

import {Net, Process, Api, Response} from '../net/net';

import Type from './type'; //这个代表action的标示，后面说到redux的时候再细说

const calculatePrice = (params) => (dispatch, getState) => {

dispatch({type: Type.CALCULATEPRICE, name: Process.FETCH_BEGIN});

return Net.commonSendPost(Api.CALCULATEPRICEAPI, params, (res)=>{

if (res.code == 0 || res.code == 999) {

dispatch({type: Type.CALCULATEPRICE, name: Process.FETCH_SUCCESS, payload: res.data, msg: res.msg})//res.data

} else {

dispatch({type: Type.CALCULATEPRICE, name: Process.FETCH_FAIL, payload: null, msg: res.msg})

}

})

};

const getPriceBaseData = () => (dispatch, getState) => {

dispatch({type: Type.GETPRICEBASEDATA, name: Process.FETCH_BEGIN});

return Net.commonSendGet(Api.GETPRICEBASEDATAAPI, null, (res)=>{

if (res.code == 0 || res.code == 999) {

dispatch({type: Type.GETPRICEBASEDATA, name: Process.FETCH_SUCCESS, payload: res.data, msg: res.msg})//res.data

} else {

dispatch({type: Type.GETPRICEBASEDATA, name: Process.FETCH_FAIL, payload: null, msg: res.msg})

}

})

};

export {changePriceParams, calculatePrice, getPriceBaseData};