在微信开发中使用async/await（微信小程序异步await）。

微信小程序中大量的接口都是异步调用，比如wx.login（）、wx.request（）、wx.getuserinfo（）等。，它们都使用一个对象作为参数，并在异步调用的不同情况下将success（）、fail（）和complete（）定义为回调。

但是，用回调的形式写程序真的很伤人。如果有一个流程需要依次执行这些操作:

Wx.getStorage（）获取缓存的数据并检查登录状态。

获取配置信息，

Wx.login（）使用配置信息登录。

Wx.getUserInfo（）登录后获取用户信息。

Wx.request（）向业务服务器发起数据请求。

因此，代码可能如下所示。

wx . get storage（{ fail:（）=》{ wx . get setting（{ success:settings =》{ wx . log in（{ success:（{ code }）=》{ wx . getuesrinfo（{ code，success:（userInfo）=》{ wx . request（{ success:（）=》{//doing something } }）；} });} });} });}});显然，使用相同的逻辑代码，async/await看起来会舒服得多。但是，默认情况下，微信开发者工具不支持async/await。如何启用它？

使用异步/等待

如果您感兴趣，可以在微信小程序的官方文档中搜索ASYC，在“工具开发辅助代码编译”页面中找到对async/await的支持。它摘自“添加编译”一节中的一个表格:

总之，只要“微信开发者工具”更新到v1.02.1904282以上，您就不需要执行任何类似npm安装再生器的操作，只需要修改一个配置项即可使用async/await功能。此配置位于工具栏详细信息本地设置页面中。

要快速验证async/await是否可用，请向app.js的onLaunch（）事件函数添加一段代码:

（async（）=》{ const p = await new Promise（resolve =》{ setTimeout（（）=》resolve（“hello async/await“），1000）；});console . log（p）；})();短暂运行自动编译后，您可以在调试器界面的Console选项卡中看到输出:

Hello async/await如果不起作用，请先检查“微信开发者工具”的版本-至少，下载最新版本没有问题。

2.转换wx.abcd的异步方法

虽然支持async/await，但需要将wx.abcd（）打包成Promise样式。

Node.js在util模块中提供了promisify来将Node.js样式的回调转换为Promise样式，但显然不适合wx样式。自己去做，不要想太多。例如，wx风格的异步调用在形式上是一致的，其特征如下:

使用一个对象传递所有参数，包括三个主要回调。

成功:（RES）=》异步方法成功时的任何回调。

fail:（err）=》异步方法失败时的任何回调。

complete:（）=》异步方法完成时的任何回调，无论成功与否。

因此，如果将wx.abcd（）更改为Promise样式并由async/await编写，它可能应该看起来像这样。

请尝试{ const RES = wx . ABCD（）；//在成功回调中执行任何操作} catch（err）{//在失败回调中执行任何操作} finally {//在完成回调中执行任何操作}当然，catch和finally并不是必需的，也就是说，您不必使用try语句块。但是，如果不使用catch，就会出现天坑，这将在后面讨论。现在要做的第一件事就是转型。

2.1.定义promisify（）

Promisify（）是一个封装的函数，它将原始的wx.abcd作为参与者传入，并返回一个具有Promise样式的新函数。代码和解释如下:

函数promisify（fn）{//promisify（）返回一个函数。//此函数与传入的fn（即wx.abcd）具有相同（或兼容）的签名返回异步函数（args）{//接受单个参数对象返回新的Promise（（resolve，Reject）=》{//返回Promise对象fn（{//调用原始函数并使用修改后的新参数对象...（args || {}），//这个新的参数对象必须具有最初传入的参数。//当然必须兼容没有传入参数的情况。success:RES =》resolve（RES），//注入一个成功回调，并解析它fail:err =》reject（err）//。});};}以此为例:

const async login = promisify（wx . log in）；//注意不要写wx.login（），为什么，我不说try { const RES = asyn log in（）；const代码= res.code//用代码做点什么} catch（err）{/LoginError }最后{//Promisify没有特别注入complete回调，//因为complete的内容可以写在这里}2.2。定义wx .异步（）。

但是说实话，通过promisify逐个编写要使用的异步方法是相当烦人的。最好编写一个工具函数来转换一次要使用的方法。然而，经过检查，我不知道在wx下定义了多少个异步方法，但这是退而求其次的事情，但它可以批量转换，并且结果仍然封装在一个对象中。整个过程是迭代处理，最后每个处理结果都集中在一起:

函数to async（names）{//此处names应为数组返回（names ||【】）。map（name =》（{ name，member:wx【name】}）。filter（t =》type of t . member = = =“function“）。reduce（（r，t）=》{ r【t . name】= promisify（wx【t . name】）；return r；}, {});}这个toAsync的用法大致如下

const awx = to async（【“log in“，“request“】）；await awx . log in（）；等待awx . request （{...});有些人可能更习惯于像这样传入单个参数。

const awx = to async（“log in“，“request“）；那么在toAsync的定义中，最好将参数改为...也就是名字

功能同步（...姓名）{...}尚未完成，因为我不想从导入{toAsync}...所以把它放在App.onLaunch（）中，然后注入到wx对象中，就像这样。

app（{ on launch:function（）{//...wx.async = toAsync// ...}});3.等待带来上帝的深渊

工具已经准备好了，代码也做了很大的修改。它看起来舒服多了，但运行时会出错！为什么？？？

我们先来看一段原始代码，是这样的。

wx . get storage（{ key:“blabla“，success:RES =》{//do with RES } }）；改造后是这样的。

const RES = await awx . get storage（{ key:“blabla“}）；//{}）写起来很奇怪，所以将其封装到一个方法中，该方法必须更改Promise类的原型。

promise . prototype . ignore error = function（）{ return this . catch（（）=》{ }）；};只需在定义toAsync（）之前放置以下代码。

它也是这样工作的。

const res = await awx。get storage（{ key:“blabla“}）。ignore error（）；对于单个await异步调用，如果您不想编写try...捕捉...块中，还可以定义一个if error（fn）来处理该错误。但是如果您需要成批处理错误，请尝试...捕捉...易于使用:

回到起点

请尝试{ const store value = await awx . get storage（{ }）；const settings = await awx . get setting（）；const { code } = await awx . log in（）；const userInfo = await awx . get userInfo（{ code }）；} catch（err）{//处理错误}看，您不需要为每个异步调用定义一个失败回调和一个尝试...捕捉...处理所有可能的错误，这也是async/await的优势！

推荐教程:微信小程序

以上就是在微信开发中使用async/await的详细内容。更多内容请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信小程序中如何实现子对父的参数传递（页面沟通）（小程序父对子的价值传递）
• 详细讲解如何在微信小程序中安装和引用ECharts。(如何安装小程序示例)
• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）

本文由主机参考刊发，转载请注明：在微信开发中使用async/await（微信小程序异步await）。 https://zhujicankao.com/102990.html