request-h5 v1.2.20

request-h5

一套支持分组拦截器的 ajax框架

更新说明

• +2019-10-26 增加全局设置 global
• +2019-10-28 Ajax 增加原型方法 then
• +2019-11-15 url开头出支持特殊参数传入 比如： 表示此次请求为 post
• +2019-11-19 ajax.Request.prototype.load 方法
• +2019-12-19 ajax.Request.prototype.shortcut 方法
• +2019-12-20 shortcut 增加events参数

特点

• 事件模型驱动；
• ajax 分组支持；
• 基于事件模型的拦截器，支持分组拦截器；
• 支持 promise；
• 灵活的默认配置，全局->分组->ajax；
• 短路径支持，方便统一切换接口路径；
• 提供实时获取服务器时间方法；
• jsonp 和 fetch 支持。

安装

npm install request-h5 -- save

使用

import request from "request-h5"

三层结构

流程图

事件说明

req.dataType 只有在 before 中能修改 req.isFormData 在 before 中无此属性

事件流程

新建一个分组

let ajaxOne = new ajax.Group()

添加事件拦截器

事件作用在一个分组上或者作用在单个请求上

// 这个事件作用在分组上
ajaxOne.on("open", req => {
    // 这个事件可以看做一个请求拦截器
});

ajaxOne.on("identity-err", () => {
    // 身份异常事件
});

ajaxOne
    .get("url", res => {
        // 这里的回调相当于ajaxOne.on("callback", res => {})

        // 这里可以触发自定义的事件
        res.root.emit("identity-err");
    })
    .on("open", req => {
        // 这个事件仅作用与当前请求，并且上面那个拦截器后触发
    });

// 更多参数设置，直接通过 setConf 来设置
ajaxOne
    .get("url", res => {})
    .setConf({
        type: "json"
    });

promise 支持

// 此时全局拦截器仍然有效
ajaxOne
    .fetch({
        url
    })
    .then(res => {
        // 当res.err 为 null
    })
    .catch(res => {
        // 当res.err 为 非null
    });

全局参数设置

ajax.Group.setConf({
    // 默认使用 fetch请求
    useFetch: true,
    // 返回资源类型为 json
    resType: "json",
    // jsonp的key为 callback
    jsonpKey: "callback"
});

短路径设置

ajaxOne.setConf({
    paths: {
        // 设置短路径
        webapi: "/data/api/"
    }
});

// 使用短路径
// webapi: 被替换为　/data/api/
ajaxOne.get("webapi:getuser.html", res => {}, { token: "----" });

服务器事件自动获取

// 这里返回服务器事件
ajaxOne.getDate();
ajaxOne.get(
    "webapi:getuser.html",
    res => {
        // 这里返回服务器事件
        res.getDate();
    },
    { token: "----" }
);

options 支持参数说明

事件参数 req 说明

事件参数 res 说明

• 设置全局参数，作用于全局的默认参数

AjaxGroup 原型方法

setConf(options)

• 当前分组实例的默认参数

create(options):Ajax

• 当前分组下创建一个 ajax 请求
• options 只作用于当前 ajax 请求
• 返回当前 Ajax 的实例

fetch(options)

• 当前分组下创建一个 ajax 请求，返回 Promise 对象

setDate(date:Date)

• 设置服务器时间，一般内部使用

getDate():Date

• 获取服务器时间

load(url, callback, param):Ajax get(url, callback, param):Ajax post(url, callback, param):Ajax put(url, callback, param):Ajax jsonp(url, callback, param):Ajax

• 快捷方式加载

Ajax 原型方法

constructor(group, options)

• 构造方法
• group 为属于的分组
• options 为预设的参数

setConf(options)

• 仅作用于当前 ajax 请求的参数

assign(key, value)

• 扩展当前 ajax 参数
• key 可以为 Object

abort()

• 中止当前 Ajax 请求

timeout(ms, callback)

• 超时中止

send(param, isOver)

• 发送请求
• param 请求参数
• isOver， 如果当此 ajax 正在请求是，是否中止 默认 false，为新发送的请求丢失

then(resolve:function)

• 返回 Promise 对象

emit(type, ...args)

• 触发事件
• type 事件名称
• args 事件参数

emit(type)

• 判断是否有此事件

on(type, eventcall)

• 添加事件
• type 事件名称
• eventcall 事件函数

off(type, eventcall)

• 移除事件
• type 事件名称
• eventcall 事件函数
• eventcall 不存在的时候，移除 type 对用的所有事件(不包含继承事件)

别名 get|post|put|jsonp(url, callback:function, param:any)

• ajax 请求别名
• url 请求地址，支持短路径
• callback 回调函数
• param 参数
• 返回 ajax 实例

全局设置

global.setConf(options) 配置全局默认参数 global.on(type, callback) 配置全局的事件 global.off(type) 销毁全局的事件