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

本站:VPS参考评测推荐,专注分享VPS服务器优惠信息!若您是商家也可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
部分文章发布时间较久远,可能存在未知因素,购买时建议在本站搜索商家名称,可查看相关文章充分了解商家!若非中文页面可使用谷歌浏览器同步翻译!PayPal代付/收录合作

微信小程序中大量的接口都是异步调用的,比如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的详细内容。更多请关注本站其他相关文章!

本文由本站刊发,转载请注明:在微信开发中使用async/await(请简述如何使用微信开发者工具) https://本站.com/77832.html

推荐站内搜索:国内免备案服务器、国外十大免费服务器、本机ip查询、com域名注册、vps换ip、购买空间、免费ip代理服务器、注册 域名、租用服务器、如何查询域名备案号、