详解将微信小程序接口Promise化并使用async函数

作者:纸飞机时间:2026-10-23 10:06:37浏览:173

本文介绍如何在微信小程序中不使用框架的情况下,通过封装接口实现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
 }
})

完成以上步骤即可正常使用,唯一的不足之处在于每个需要使用的页面都必须单独引入一次。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

作者最新文章