微信小程序中如何使用异步/等待

　　介绍

这篇文章主要讲解了微信小程序中如何使用异步/等待,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

微信小程序中有大量接口是异步调用,比如<代码> wx.login() ,<代码> wx.request() ,<代码> wx.getUserInfo() 等,都是使用一个对象作为参数,并定义了<代码>成功(),<代码>失败()和<代码>完成()作为异步调用不同情况下的回调。

但是,以回调的方式来写程序,真的很伤,如果有一个过程需要依次干这些事情:

    <李> <代码> wx.getStorage() 获取缓存数据,检查登录状态李 <李> <代码> wx.getSetting() 获取配置信息,李 <李> <代码> wx.login() 使用配置信息进行登录 <李> <代码> wx.getUserInfo() 登录后获取用户信息李 <李> <代码> wx.request() 向业务服务器发起数据请求李 <>李……

那么,代码大概会长这样

wx.getStorage ({ 　　失败:()=比;{ 　　wx.getSetting ({ 　　成功:设置=比;{ 　　wx.login ({ 　　成功:({代码})=比;{ 　　wx.getUesrInfo ({ 　　代码, 　　成功:(用户信息)=比;{ 　　wx.request ({ 　　成功:()=比;{//做某事 　　} 　　})； 　　} 　　})； 　　} 　　})； 　　} 　　})； 　　} 　　});

显然,异步/等待可以同样逻辑的代码看起来舒服得多。不过默认情况下,“微信开发者工具”并不支持async/等待。如何启用?

1。用上异步/等待

如果有心,在微信小程序官方文档中搜索<代码>异步>

在<强> 1.02.1904282 以及之后版本的开发工具中,增加了增强编译的选项来增强ES6转ES5的能力,启用后会使用新的编译逻辑以及提供额外的选项供开发者使用。

特性原有逻辑增强编译async/等待不支持支持
    <李>支持async/等待语法,按需注入<代码> regeneratorRuntime>

总之呢,就是,只要把“微信开发者工具”更新到<代码> v1.02.1904282> npm安装再生器> 异步/等待特性了。这个配置就在“工具栏,# 8658;详情,# 8658;本地设置”页面中。

微信小程序中如何使用异步/等待

为了快速验证async/等待可用,在<代码>应用程序。js代码的<代码> onLaunch() 事件函数中加一段代码:

(异步()=比;{
　　const p=等待新的承诺(解决=比;{
　　setTimeout(()=比;解决(“你好async/await"), 1000);
　　})；
　　console.log (p);
　　})();

在短暂的自动编译运行之后,在调试器界面的控制台页签中可以看到输出:

 <代码>你好async/等待

如果不行,请先检查“微信开发者工具”的版本——至少,去下载一个最新版本总不会有问题的。

2。改造wx。abcd异步方法

虽然async/等待得到了支持,但是还得把<代码> wx.abcd() 封装成承诺风格才行。

节点。js在util模块中提供了<代码> promisify>

    <李>使用一个对象传递所有参数,包括三个主要的回调李 <李> <代码>成功:(res)=比;任何在异步方法成功时回调李 <李> <代码>失败:(err)=比;任何在异步方法失败时回调李 <李> <代码>完成:()=比;任何在异步方法完成(不管成功还是失败)时回调李

所以,如果<代码> wx.abcd() 改成了承诺风格,通过异步/等待来编写,大概应该是这个样子

微信小程序中如何使用异步/等待