react native ajax,GitHub - zmrdlb/react-native-io-fetch: 学习react-native的时候，知道了fetch api，新的网络请求语法，比Xm...
react-native-io-fetch
学习react-native的时候，知道了fetch api，新的资源获取语法，比XmlHttpRequest具有更强大的功能：易读性、抽象性、简洁性、支持各种类型资源请求等。
现在对于fetch的使用，封装了一层，提取了便于开发者配置和使用的api.
＃ 注意
此包是针对react-native开发的，而且node现在还不支持某些新的web api, 如Request对象，所以请下载到react native项目中使用测试。
＃ 安装
npm install react-native-io-fetch --save
使用
将react-native-io-fetch中的model.js拷贝在react-native项目里，此处举例存放路径为：common/model.js
将model.js里面的const {IoConfig,Io} = require('./index');改成const {IoConfig,Io} = require('react-native-io-fetch');
将test.js里面的代码，放在react-native中的某处引用，注意修改里面model.js的引用路径
切换到目录react-native-io-fetch下，运行npm run interstart, 开启node接口模拟
运行react-native项目，执行里test.js中拷贝的代码，查看结果。
API说明
IoConfig
io接口请求配置：此处封装了io请求默认配置
Ioconfig.ioparams: 'io请求参数'. 默认：
{
headers: Ioconfig.headers
request: Ioconfig.request
/**
* 请求参数。可以是以下几种类型：
* Bolb
* BufferSource
* FormData
* URLSearchParams
* USVString
* String
* JSON: 如果是json, 则做特殊处理，请见下面isformdata的说明
*/
// data: {},
/**
* 如果data是json:
* 1. request.method不是GET或HEAD, 且isformdata为true, 那么将data转换成FormData格式
* 2. 如果不符合第1种，将data转换成querystring
* @type {Boolean}
*/
isformdata: false,
url: '', //请求url地址
/**
* 请求的数据类型，默认为json. 支持的数据类型有如下几种
* arrayBuffer
* blob
* formData
* json
* text
*/
type: 'json',
timeout: 6000, //接口超时时间
/**
* io请求前，统一的处理
* @return {[type]} [description]
*/
beforeSend: function(){
},
/**
* 对于接口返回错误，一般因为网络原因，进行的统一处理
*/
error: function(error){
//error或有或无 error.message
//Alert.alert('系统消息',error.message || '亲，忙不过来了');
},
/**
* 如果fail配置了funname为fail,则调用此方法. 此时fail.filter返回true
* @param {Object|Other} result 接口返回数据
* @param {Response} response 返回的response对象
* @return {[type]} [description]
*/
fail: function(result,response){
//Alert.alert('系统消息',result.errmsg || '亲，忙不过来了');
},
/**
* 成功调用方法。调用的情况有如下几种：
* 1. dealfail为true, 则fail.filter返回false时，调用success
* 此时如果dealdata为true, 则result为dealdatafun返回的数据
* 2. dealfail为false时，则接口返回后直接调用此方法(不发生error的情况下)
*
* @param {Object|Other} result 接口返回数据
* @param {Response} response 返回的response对象
*/
success: function(result,response){},
/**
* 接口请求完毕调用。无论success,fail,error
* @return {[type]} [description]
*/
complete: function(){},
/**
* 如果dealdata为true, 则success的result为此方法返回的数据
* @param {Object|Other} result 接口返回数据
* @return {[type]} [description]
*/
dealdatafun: function(result){return result.data},
/**
* 是否统一处理业务错误
* @type {Boolean}
*/
dealfail: true, //是否统一处理业务错误
/**
* 当业务成功时，调用success前，是否统一格式化数据
* 如果dealfail为true,并且fail.filter返回为false时，如果此项设置为true,则调用dealdatafun方法，返回处理后的数据
* @type {Boolean}
*/
dealdata: true
}
IoConfig.fail: 统一处理接口返回的业务错误。如接口返回格式为：
{
code: 'A0001', //A0001: 业务处理成功，A0002: 未登录，A0003: 其他业务处理错误
}
IoConfig.fail = {
funname: 'fail', //当发生业务错误的时候，调用的IoConfig.ioparams里配置的方法名
filter: function(result) {
if(result.code != 'A0001'){
return true; //说明发生了业务错误
}else{
return false;
}
}
}
IoConfig.headers: 请求头部配置Headers
{
//如果Content-Type设置为false,则不传Content-Type
'Content-Type': 'application/x-www-form-urlencoded'
}
IoConfig.request: 请求配置Request.默认：
{
method: 'GET', //GET|POST
mode: 'cors', //cors|no-cors|same-origin|navigate
//其他参数
//body: credentials: cache: redirect: referrer: integrity
/**
* same-origin: 同ajax一样，同域发送cookie
* include: 跨域发送cookie
* @type {String}
*/
credentials: 'same-origin'
}
Io
底层io请求方法
Io.request({...}) 参数格式同 IoConfig.ioparams
引用到自己项目中来
参考model.js添加项目io接口配置
参考test.js，如何使用model.js里面的接口
实例
请参考zmrdlb react-native-demo 中的common/model.js和page/list.js