像写Axios一样的写小程序网络请求
发布于 3 年前 作者 hanchao 3773 次浏览 来自 分享

前言

接到个规范化统一小程序用户权限和请求统一处理的需求,春节自定义了很多封装都没有很好的解决问题,比如全局配置,自定义规范。当然微信请求其实已经做的很好了(肯定比原生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的内容请点击链接查看

文档预览
项目源码地址
GitHub

结尾

前进的动力源于喜欢,开源无大小,希望在我喜欢的行业里有更多先驱为这我们喜欢的事业奋斗!

回到顶部