react-native-io-fetch

学习react-native的时候，知道了fetch api，新的资源获取语法，比XmlHttpRequest具有更强大的功能：易读性、抽象性、简洁性、支持各种类型资源请求等。 现在对于fetch的使用，封装了一层，提取了便于开发者配置和使用的api.

using fetch

＃ 注意 此包是针对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