使用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: 'https://xxx.com/user/list',
method: 'get',
auth: true,
jsonp: false
},
"user.detail": {
url: 'https://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及描述:
- 结构:
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
方法,调用后可取消请求的发送 - 请求发送取消后将会
reject
promise
- 本
- 函数执行后即开始
前置步骤
:检查用户认证、验证参数等功能- 如果前置步骤
不通过
,直接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
,后续步骤类似
- 结构:
- 设置当前
iaxios
实例的配置对象
- 创建一个
iaxios
实例,并传递配置对象 - 不同实例共享
iaxios
的defaultOptions
,但使用实例方法setOptions
后,设置的是本身的配置
- #createRequest
- #setOptions
//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;
}
}
};
- 添加
formatUrl
支持
- 添加
jsonp
支持
- 在
rejectConvert
,resolveConvert
回调中新增参数computeOptions
——计算后的axios
请求配置对象
- 处理一些已知的BUG
- 重构
options
的获取机制,在执行request
发送时,options
会做一次合并,后续所有配置均在此合并后的对象上读取,合并规则:
var mergeOptions = util.extend(true, {}, iaxios.options, iaxios.options.requestConfigList[requestName], otherOptions, sendOptions);
- 删除
getOptionItem
方法 - 处理一些已知的BUG
- 为
handlers
的相关convert
方法添加第二个参数requestConfig
- 更新文档:添加options注释
- 处理一些已知的BUG
- 核心功能实现