request-h5

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

更新说明

• [phone] 增加全局设置 global
• [phone] Ajax 增加原型方法 then
• [phone] url开头出支持特殊参数传入 比如： 表示此次请求为 post
• [phone] ajax.Request.prototype.load 方法
• [phone] ajax.Request.prototype.shortcut 方法
• [phone] shortcut 增加events参数

特点

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

安装

npm install request-h5 -- save

使用

import request from "request-h5"

三层结构

流程图

事件说明

事件名称	说明	参数
timeout	请求超时	req
callback	请求完成	res
abort	请求中止	req
verify	验证数据	res
send	请求发送	req
progress	上传进度	event
open	send 之前，对传入的数据已经格式化完成	req
before	最先触发的事件，req 中保存的数据相对原始	req
path	对 url 格式化后触发

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 支持参数说明

名称	说明	默认值
baseURL	基础 url 路径	空字符串
paths	短路径(替换 url 中的短路径)	空对象
useFetch	是否使用 fetch,如果浏览器不支持，则降级为 xhr	true
url	请求 url，支持短路径	空字符串
method	请求方法	GET
dataType	请求数据格式	querystring
resType	返回数据格式	json
param	请求参数	null
header	请求头设置	null
jsonpKey	jsonp 请求是需要的 key	callback
cache	get 请求是否有缓存	true
withCredentials	跨域带上 cookie	false

事件参数 req 说明

名称	说明	默认值
outFlag	ajax 已经中止，内部使用	false
method	请求方法	GET
url	请求 url	空字符串
orginURL	保存的是原始传入的 url	url
formatURL	格式化后（最终使用的）的 url	短路径 -> 全路径
path	短路径目录截取值	短路径 url 开头处 : 前面的字符，默认为 空字符串
cache	get 请求是否有缓存	true
resType	请求类型	空字符串，默认为 querystring
isFormData	是否为 FormData 数据，针对非 GET 请求	按照 param 类型数据自动判定
param	请求参数	空对象
header	请求头	空对象
baseURL	基础 url 路径	空字符串
isCross	是否跨域	按照 url 路径自动判断
xhr	xhr 请求的对象
withCredentials	跨域带上 cookie	false

事件参数 res 说明

名称	说明	默认值
withReq	req 的引用	req
root	this 引用	Ajax
err	错误内容	默认为 null，便是正确返回
json	json object	空对象
text	获取到的字符串	空字符串
result	返回内容
getHeader(key)	获取 key 对应的 header	null
cancel	验证节点设置为 true，中止回调	false
status	状态吗	0
getDate()	获取服务器时间
getJSON(key)	获取 res.json 中的子字符串
jsonKey	jsonKey 中的对象	json

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

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) 销毁全局的事件