iaxios

iaxios

使用axios库发送请求，并封装多组灵活的、高效的工具插件和配置规约

核心功能

• 使用axios库发送网络请求
• 使用Promise API
• 热插拔多组插件，包括：
  • 发送前认证用户
  • 发送前验证参数
  • 请求完成后convert response
  • 可使用jsonp方式发送请求
  • formatUrl功能
• 可注册插件（暂未开放）
• 取消发送请求

待完善/添加的功能

• 更方便的区分request error，checkResult reject，feature reject
• 传给回调函数的参数丰富些
• 向外暴露类似生命周期的钩子函数

安装

npm i iaxios -S

使用

//api-index.js
import iaxios from 'iaxios';
iaxios.options({
    requestConfigList: {
        "user.list": {
            url: 'http://xxx.com/user/list',
            method: 'get',
            auth: true,
            jsonp: false
        },
        "user.detail": {
            url: 'http://xxx.com/user/{id}',
            method: 'get',
            auth: true,
            jsonp: false
        }
    },
    features: {
        auth: {
            enabled: true,
            handler: function () {
                return !!localStorage.getItem('LoginUser');
            },
            onUnAuth: function () {
                alert('您还未登录，请登录！');
                location.href = "/user/login";
            }
        }
    }
});

//user-api.js
import iaxios from 'iaxios';
export var getList = iaxios.createRequest('user.list');
export var getModel = iaxios.createRequest('user.detail');


//page1.js（已登录）
import * as UserApi from 'user-api.js';
UserApi.getList({
    pageIndex: 1,
    pageSize: 10
}).then(list => {
    render(list);
}).catch(error => {
    console.log(error);
})

//page2.js（未登录）
import * as UserApi from 'user-api.js';
//发送前会检查登录情况，并弹出alert、跳转到登录页
UserApi.getModel({
    id: 1
}).then(model => {
    render(model);
}).catch(error => {
    console.log(error);
})

//page3.js（已登录）
import * as UserApi from 'user-api.js';
//假定请求发送需要10s后返回结果
var promise = UserApi.getList({
    pageIndex: 1,
    pageSize: 100000
}).then(list => {
    render(list);
}).catch(error => {
    console.log(error);
});

//2s后取消发送
setTimeout(()=>{
    promise.cancel('传递自定义数据');
    //执行后，promise.catch回调队列会接收到下面的数据格式：
    [
        {
            data:{
                message:'传递自定义数据'
            },
            stage:'cancel',
            state:'reject'
        }
    ]
})

API

createRequest (requestName, otherOptions)

• 创建并返回一个函数，这个函数用于发送请求；
• 返回的函数API及描述：
  • 结构：fun(data, sendOptions)
  • 发送前按照优先级合并配置（mergeOptions）：sendOptions，otherOptions，options.requestConfigList[requestName]，defaultOptions（由高到低）
  • data参数是请求要发送的数据
    • 如果mergeOptions.method的值为get，则会将data传递给axios的parmas配置项
    • 如果mergeOptions.method的值为post，则会将data传递给axios的data配置项
  • sendOptions允许你在发送前最后一次传递配置对象
  • 函数执行后返回一个promise对象
    • 本promise对象保函一个cancel方法，调用后可取消请求的发送
    • 请求发送取消后将会rejectpromise
  • 函数执行后即开始前置步骤：检查用户认证、验证参数等功能
    • 如果前置步骤不通过，直接reject掉promise，并且会将执行的结果发送给mergeOptions.handlers.rejectConvert进行处理，将处理结束后的数据传递给reject函数；
    • 如果前置步骤通过，则会执行发送请求
  • 发送请求前还会执行mergeOptions.handlers.getUrl函数，获取请求的url；如果不配置此项，则会从mergeOptions.axios.url读取
  • 请求发送成功后，执行mergeOptions.handlers.checkResult函数判断请求结果
    • 如果mergeOptions.handlers.checkResult()==true || mergeOptions.handlers.checkResult().then后调用mergeOptions.handlers.resolveConvert处理请求成功的response对象，mergeOptions.handlers.resolveConvert执行后，resolve掉promise，并将处理结果传递给resolve函数
    • 如果mergeOptions.handlers.checkResult()==false || mergeOptions.handlers.checkResult().catch后调用mergeOptions.handlers.rejectConvert处理请求成功的response对象，mergeOptions.handlers.rejectConvert执行后，reject掉promise，并将处理结果传递给reject函数
  • 请求发送失败，执行mergeOptions.handlers.rejectConvert，后续步骤类似

setOptions (options)

• 设置当前iaxios实例的配置对象

create (options)

• 创建一个iaxios实例，并传递配置对象
• 不同实例共享iaxios的defaultOptions，但使用实例方法setOptions后，设置的是本身的配置

iaxios实例方法

• #createRequest
• #setOptions

Options

//options描述及默认配置
{
    requestConfigList: {}, //request配置元信息集合
    axios: {
        //axios配置
        method: 'get',
        paramsSerializer: util.paramsSerializer,
        headers: {
            common: {
                'Content-Type': 'application/json'
            },
            post: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        },
        transformRequest: [function (data, headers) {
            return util.stringifyData(data);
        }]
    },
    validators: {}, //验证器列表
    features: { //启用iaxios的哪些功能？
        auth: {
            enabled: false
        },
        formatUrl: {
            enabled: true,
            removeFormatedItem: true /*
            格式化后，是否移除已经用到的格式化项
            支持4中值：
            true:移除所有
            false:保留所有
            ['item1','item2']:移除'item1'和'item2'
            {item1:true,item2:false}:移除'item1',保留'item2'
             */
        },//格式化url
        jsonp: {
            enabled: false,
            callback: 'callback',
            link: null // 怎样连接params和data？
        }, //接口是否以jsonp方式发送
        validator: {
            enabled: false
        }//启用验证器，调用iaxios.createRequest()返回的方法时，先取request配置中的验证器去验证参数，验证通过才会执行下面的逻辑
    },
    handlers: {
        //获取请求的真实url
        getUrl(requestConfig) {
            return requestConfig.url;
        },
        //检查请求返回的结果，成功请resolve，失败请reject
        checkResult(res, requestConfig) {
            return res && res.data ? true : false;
        },
        //格式化请求成功的数据
        resolveConvert(res, requestConfig) {
            return res.data;
        },
        //格式化请求失败的数据
        rejectConvert(rejectDataMap, requestConfig) {
            return rejectDataMap;
        }
    }
};

更新日志

v0.2.1

• 添加formatUrl支持

v0.2.0

• 添加jsonp支持

v0.1.8

• 在rejectConvert，resolveConvert回调中新增参数computeOptions——计算后的axios请求配置对象

v0.1.7

• 处理一些已知的BUG

v0.1.5

• 重构options的获取机制，在执行request发送时，options会做一次合并，后续所有配置均在此合并后的对象上读取，合并规则：

var mergeOptions = util.extend(true, {}, iaxios.options, iaxios.options.requestConfigList[requestName], otherOptions, sendOptions);

• 删除getOptionItem方法
• 处理一些已知的BUG

v0.1.3

• 为handlers的相关convert方法添加第二个参数requestConfig
• 更新文档：添加options注释
• 处理一些已知的BUG

v0.1.0

• 核心功能实现