像写Axios一样的写小程序网络请求
前言
接到个规范化统一小程序用户权限和请求统一处理的需求,春节自定义了很多封装都没有很好的解决问题,比如全局配置,自定义规范。当然微信请求其实已经做的很好了(肯定比原生ajax好)由于个人对axios的好感,于是有了创建微信请求库的想法,我也想把我的想法带给有需要的人,于是Vxios诞生了。
关于Vxios
由于正好是微信小程序所以取了谐音字母2个字,为了达到web项目像小程序的迁移,借鉴了axios许多api的用法(没办法前辈们做的太好了),这样让许多从web到小程序重构这方面可以剩下很多力气
特性
- 支持Promise API
- CommonJS模块规范
- ES6书写风格
- 拦截请求和响应
- 集成所有wx请求
- 开箱即用的取消请求
原生和vxios写法的区别
微信原生 来自于微信官方文档
wx.request({
url: 'example.php', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})
vxios的请求方式
// 为给定 ID 的 user 创建请求
vxios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//如果更明确参数,也可以这么写
vxios.get("www.github.com/GAtomis/api/get",{name:"Gavin",age:"20"})
区别
由上示例代码可以总结区别
- Promise => 原生的wx请求是支持PromiseAPI的,vxios则返回的是一个Promise,这样有利于我们进行回调嵌套请求避免出现回调地狱的情况。
- 结构清晰 => 请求方式,接口和配置分离 通过api快捷定义了get和post请求,通过传参定义了接口地址和参数
- js的api => 支持es7中async&await
- 移植性 => 可继承axios70%0的api,最常用的支持是100%,包括拦截器,ceate实例等…,使得项目迁移没有更多心智负担
- typescript支持=>本项目已内置TS的描述文件使用TS构建小程序的小伙伴可以直接使用,目前还不够完善
更多的内容
vxios文档已经部署,想了解更多关于vxios的内容请点击链接查看
结尾
前进的动力源于喜欢,开源无大小,希望在我喜欢的行业里有更多先驱为这我们喜欢的事业奋斗!