详解将微信小程序接口Promise化并使用async函数
本文介绍如何在微信小程序中不使用框架的情况下,通过封装接口实现Promise化,并配合regeneratorRuntime兼容Async函数。详细说明了wxPromise.js的编写方法、regeneratorRuntime的引入与源码修改技巧,以及如何在页面中调用Promise化的微信API。
前言
小程序接口Promise化与Async兼容方案
截至目前,微信小程序的接口调用仍沿用早期的回调函数模式。若希望在不依赖额外框架的前提下,在小程序中结合Promise与Async语法进行开发,该如何实现?
2019最新解决方案
1. 将接口Promise化
首先,需要创建一个名为wxPromise.js的文件。
const promisify = name => option => {
return new Promise((resolve, reject) =>
wx[name]({
...option,
success: resolve,
fail: reject,
})
)
}
const wxPro = new Proxy(wx, {
get(target, prop) {
return promisify(prop)
}
})
export default wxPro
2. 使用regeneratorRuntime让小程序兼容async函数
从GitHub上的regenerator项目中下载packages/regenerator-runtime/runtime.js文件。
如果直接引入最新版本,可能会遇到报错。
错误提示为:Function is not a function....
此时需要手动修改源码。
具体操作是:删除源码末尾的try-catch语句,并将源码开头的var runtime修改为var regeneratorRuntime。
若不想修改源码,也可以直接下载0.13.1版本的源码文件。
最后
在需要使用相关功能的页面中引入上述文件。
import wxPro from './utils/wxPromise.js'
import regeneratorRuntime from './utils/runtime.js'
//app.js
App({
async onLaunch() {
// wxPro.login().then((res) => {
// console.log(res)
// })
const result = await wxPro.login()
console.log(result)
},
globalData: {
userInfo: null
}
})
完成以上步骤即可正常使用,唯一的不足之处在于每个需要使用的页面都必须单独引入一次。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数?详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决?
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28
