react native ajax,GitHub - zmrdlb/react-native-io-fetch: 学习react-native的时候,知道了fetch api,新的网络请求语法,比Xm...

轩辕源
2023-12-01

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

 类似资料: