在微信开发中使用async/await(请简述如何使用微信开发者工具)

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

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

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

Wx.getSetting()获取配置信息，

Wx.login()使用配置信息登录。

Wx.getUserInfo()登录后获取用户信息

Wx.request()向业务服务器发起数据请求。

因此，代码可能看起来像这样

wx . get storage({ fail:()= gt；{ wx . get setting({ success:settings = gt；{ wx . log in({ success:({ code })= gt；{ wx.getUesrInfo({ code，success:(userInfo)= gt；{ wx . request({ success:()= gt；{ //做点什么} })；} });} });} });}});显然，async/await看起来更适合使用相同的逻辑代码。但是，默认情况下，微信开发者工具不支持async/await。如何启用？

1.使用异步/等待

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

总之，只要把“微信开发者工具”更新到v1.02.1904282或以上，就不需要做npm安装再生器之类的事情了。您只需要修改一个配置项来使用async/await特性。此配置位于“工具栏详细信息本地设置”页面。

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

(async()= gt；等待新的承诺(resolve = gt{ setTimeout(()= gt；解决( 你好异步/等待 ), 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)= gt；当任何异步方法成功时回调。

失败:(err)= gt；当任何异步方法失败时回调。

完整:()= gt当任何异步方法完成时回调(无论成功还是失败)

所以，如果wx.abcd()改成Promise风格，通过async/await编写，大概应该是这样的。

try { const RES = wx . ABCD()；//在成功回调中做任何事情} catch(err){//在失败回调中做任何事情} finally {//在完全回调中做任何事情}当然catch和finally部分不是必须的，也就是说，不一定要用try语句块。但是，如果不用catch，就会有神坑。我们以后再谈这个。现在首先要做的是改革。

2.1.定义promisify()

IsPromise()是一个封装函数，传入原来的wx.abcd作为参与者，返回一个带有promisify风格的新函数。代码解释如下:

function Promisinify(fn){//Promisinify()返回一个函数，//该函数与输入fn (wx.abcd)签名相同(或兼容){//接受单参数对象，返回新的promise ((resolve，reject)= >；{//返回一个Promise对象fn({//调用原函数，使用修改后的新参数对象...(args || {}))，///这个新的parameter对象必须有原来传入的参数，而且//当然要兼容没有传入参数成功的情况:RES = >；resolve(RES)，//0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 });};}以此为例:

const async login = promisify(wx . log in)；//注意不要写wx.login()。为什么，我不说试试{ const RES = asyn login()；const code = res.code//用code做点什么} catch(err){//loginerror } finally {//promis infy不具体注入complete回调，//因为complete的内容可以写在这里}2.2 .定义wx.async()

不过说实话，通过promisify把要用的异步方法一个个写出来，还是挺烦的。不如写一个工具函数，把要用的方法转换一次。不过查了一下，不知道wx中定义了多少个异步方法，所以还是退而求其次吧。但是可以批量传输，传输的结果仍然封装在一个对象中。整个过程是迭代处理，最后每个处理结果都集中在一起:

to async(names){//此处names应为数组返回(names|| [])。map(name = >；({ name，member: wx[name] }))。过滤器(t = gttypeof t.member = = = 函数 ) .reduce((r，t)= gt；{ r[t . name]= promisify(wx[t . name])；return r；}, {});}这个toAsync的用法大致如下

const awx = to async([ ；登录 ， 请求 ]);await awx . log in()；等待awx.request({...});有些人可能更习惯单个参数传入的方式，就像这样。

const awx = to async( ；登录 ， 请求 );那么在toAsync的定义中，最好将参数改为...也就是名字

同步功能(...姓名){...}尚未完成，因为我不想从导入{toAsync}...在每个JS文件中。所以注入到App.onLaunch()中的wx对象中，就像这样。

App({ onLaunch: function() { //...wx.async = toAsync// ...}});3.等待带来的神坑

工具已经准备好了，代码已经被彻底修改了。看起来舒服多了，但是一旦运行就报错！为什么？？？

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

wx . get storage({ key: ；blabla ，success:RES = gt；{//do with RES } })；改造后是这样的。

const RES = await awx . get storage({ key: ；blabla });// lt；= =运行时错误//dowithresawx.getStorage引发了异常，因为它被称为“blabal 该数据不存在。

为什么没有出问题，现在却报错了？

因为未定义失败回调，所以该错误被忽略。但是promisify()将失败回调封装为reject()，所以awx.getStorage()返回的Promise对象需要由catch()处理。我们没有直接使用Promise对象，而是使用await语法，所以reject()将以抛出异常的形式反映出来。

换句话说，代码必须这样修改:

请尝试{ const RES = await awx . get storage({ key: ；blabla });// lt；= =运行时错误//do with RES } catch(err){//我知道有问题，就是不存在的时候！}难过是不是？如果没有悲伤，想想吧。每个调用都必须使用一个尝试...捕捉...代码块。能没有悲伤吗？

3.1.忽略不需要处理的错误

处理错误确实是一个好习惯，但并不是所有的错误情况都需要处理。其实忽略错误也很简单。只是以承诺的形式直接在每个异步音后加一句话，比如

const res = await awx。get storage({ key: ；blabla }) .catch(()= gt；{});//捕捉错误，但什么也不做。稍微解释一下，这里awx.getStorage()返回一个Promise对象，调用。这个对象上的catch()将封装拒绝情况，它将返回一个新的Promise对象，这是await正在等待的承诺。

但是感觉上。catch(()= >；{})写起来怪怪的，就封装成一个方法，这个方法要改变Promise类的原型。

promise . prototype . ignore error = function(){ return this . catch(()= gt；{ });};只需在定义toAsync()之前放上这段代码。

它也是这样工作的。

const res = await awx。get storage({ key: ；blabla }) .ignore error()；对于单个await异步调用，如果您不想编写try...捕捉...块，也可以自己定义一个ifError(fn)来处理错误的情况。但是如果您需要成批处理错误，请尝试...捕捉...易于使用:

回到起点

try { 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的详细内容。更多请关注主机参考其他相关文章！

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：在微信开发中使用async/await(请简述如何使用微信开发者工具) https://zhujicankao.com/77832.html