node-io-fetch v1.1.2

node-io-fetch

可通过参数配置，针对业务，考虑到兼容性，使用 whatwg-fetch 封装的 io接口请求npm包。

前言

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

using fetch

引用whatwg-fetch，对io请求进行业务层的封装，便于统一处理io业务逻辑。

浏览器兼容性

• Chrome
• Firefox
• Safari 6.1+
• Internet Explorer 10+

安装

npm install node-io-fetch --save

简单使用

• model.js

const {IoConfig,Io} = require('node-io-fetch');
const extend = require('extend');

/**
 * 设置自己的配置
 */

 /**
  * 业务错误条件配置
  * @param  {[type]} result [description]
  * @return {[type]}        [description]
  */
IoConfig.fail.filter = function(result){
    if(result.code != 'A0001'){
        return true; //说明发生了业务错误
    }else{
        return false;
    }
}

/**
 * io请求发送前执行
 * @return {[type]} [description]
 */
IoConfig.ioparams.beforeSend = function(){
    console.log('请求开始');
}

/**
 * io请求结束后
 */
IoConfig.ioparams.complete = function(){
    console.log('请求结束')
}

/**
 * 网络错误或者系统错误
 * @param  {[type]} error [description]
 * @return {[type]}       [description]
 */
IoConfig.ioparams.error = function(error){
    //error或有或无 error.message
    console.log(error.message || '亲，忙不过来了');
}

/**
 * 业务错误处理
 * @param  {[type]} result   [description]
 * @return {[type]}          [description]
 */
IoConfig.ioparams.fail = function(result){
    if(result.code == 'A0002'){
        console.log('未登录');
    }else{
        console.log(result.errmsg || '亲，忙不过来了');
    }
}

/**
 * 调用以下方法的时候，opt如ioparams。但是一般只传以下参数就可以了：
 *   data success
 *   以下方法已经统一处理了，如果想覆盖自行传入
 *   beforeSend error fail complete
 */
module.exports = {
    //listdata接口
    listdata(opt){
        return Io.request(extend(true,{
            request: {
                method: 'POST'
            },
            url: 'http://127.0.0.1:8000/listdata'
        },opt));
    }
};

• test.js

const Model = require('./model');

Model.listdata({
     data: {
         username: 'zmr',
         sex: '女'
     },
     //获取response对象
     getResponse: function(response){
         console.log(response);
     }
     //不接受统一的业务错误处理IoConfig.ioparams.fail
     //  fail: null
}).then(function(list){ //业务返回正确
     console.log(list);
}).catch(function(result){ //业务错误
     console.log(result.errmsg);
});

使用

• 将node-io-fetch中的model.js拷贝在具体项目里，此处举例存放路径为：common/model.js

• 切换到目录react-native-io-fetch下，运行npm run interstart, 开启node接口模拟

• 将node-io-fetch中的test.js拷贝到具体业务js，调用配置的接口

ps: 具体使用及运行结果请参见：https://github.com/zmrdlb/express-demo

设计思路

设计其实很简单，分为2部分：

• ioconfig.js: 接口参数默认配置声明

• io.js: 具体发送接口请求方法

API

IoConfig

io接口请求配置，并声明了默认值：

IoConfig.fail：对接口返回的业务数据，判断是否发送了业务错误

IoConfig.headers：请求头部配置

headers可以扩展添加任意Http Headers设置，MDN Headers官方说明

IoConfig.request：请求对象配置

MDN Request官方说明

IoConfig.ioparams：调用Io.request方法，默认的参数设置

• IoConfig.iocallback：接口结果获取说明

此项没有实际意义。由于Io.request(...)返回的是一个Promise对象，then和catch的回调只能在此说明

• catch: function(result){...}

  接口业务错误，则调用此方法。

  • 如果IoConfig.fail.filter返回为true, 说明发生了业务错误，则调用catch。如果dealfail为true，也会调用IoConfig.ioparams.fail方法。

  • result 为接口返回数据

• then: function(result){...}

  成功调用方法。调用的情况有如下几种：

  • 1. dealfail为true, 则IoConfig.fail.filter返回false时，调用then。此时如果dealdata为true, 则result为dealdatafun返回的数据；
  • 2. dealfail为false时，则接口返回后直接调用此方法（不发生error的情况下）

Io

接口请求方法封装

Io.request(ioparams)

发起接口请求。

• ioparams：格式同IoConfig.ioparams

• 返回Promise对象，then和catch处理方法说明，分别对应IoConfig.iocallback的then和catch

附录

数据类型和response对象获取返回结果的方法对应关系说明

MSN Response官方说明