aixy-vue2-request v0.0.11

aixy-vue2-request

公共的 XMLHttpRequest 请求模块，独立于框架，目标：在 Vue/React 下均可使用；目前 Vue 框架下可用，React 框架测试中

前提

要求的接口返回 json 数据格式如下，尽量往这个标准上靠齐：

{
    code: 0,  //后端业务状态码
    success: true || false,
    message: '错误原因，没有错误为空即可',
    result: {}  //接口操作成功的的返回数据
}

使用方式：

const Request = require('aixy-vue2-request');

// 初始化一次即可, requestFn 是一个返回 Promise 实例的函数
let requestFn = Request({
    global: '__global__',  //全局任务队列健，用于存放某些无法区分是在哪个具体页面发出的请求，一般不需要修改
    host: '', // 域名 http://www.a.b
    apis: {}  // 接口别名映射表 
    crossOrigin: true,
    headers: {},  // 全局 headers
    query: {}, // 全局 query
    params: {}, // 全局 params
    err_code: {},  // 接口业务报错 code 数值和错误文本哈希映射
    tipHandler: function(err){  //xhr.status 为 200-300、304 时会用到，用于给用户自定义如何错误自动 提示，err.code 为错误状态码，err.tip为对应的错误提示语句
        console.log(`业务接口执行出错`);
        console.log(err);
    },
    beforeRequest: function(task){  //xhr.send 前的公共方法，可在此通过 vuex 控制全局 loading 显示
        console.log(`Page ${task.queueName} request ${queue.get(task).uri} start.`);
    },
    afterRequest: function(task){  //请求 abort/error/timeout/load 之后执行的公共方法，可在此通过 vuex 控制全局 loading 隐藏
        console.log(`Page ${task.queueName} request ${queue.get(task).uri} finished.`);
    },
    queueNameGetter(vm){  //获取 request 内部 queue 的 key 的方法，用户可以自定义，vm 为 requestFn 的调用者，这里是 vue-router 的例子，调用者为 Vue 实例 
        let router = vm.$router;
        return router && router.app && router.app.currentRoute && router.app.currentRoute.name || options.global;
    }
});

//更改 Request 内部初始设置，配置方式同上，会自动和上一次的配置做合并
requestFn.setOptions(opts);

//根据别名获取解析后的完整 url
requestFn.resolveUrl(url)

//发送请求
let task = requestFn({
    url,   // 接口别名
    method,   // 请求方法类型，默认为 get
    query: {},  // query参数
    params   // body 参数
})
.progress(function(loaded, total){
    //此处可定义本次请求的上传进度相关逻辑，不使用忽略即可
})
.onabort(function(err){
    //此处可定义本次请求取消后的相关逻辑，不使用忽略即可
})
.onerror(function(){
    //此处可定义本次请求 onerror/ontimeout 后的相关逻辑，不使用忽略即可
})
.then((result)=>{
    //业务请求成功相关逻辑：接口有返回值，返回 json 对象的 success 为 true
},err=>{
    //业务请求失败相关逻辑：接口有返回值，返回 json 对象的 success 为 false
});

//取消请求，promise 和 xhr 会一起取消
task.cancel()

//和 Vue 框架一起使用的话，建议挂载在 Vue 原型上
Vue.prototype.$request = requestFn;
//在 Vue 组件内使用方式如下
this.$request({ ... });