小程序里使用async和await变异步为同步,解决回调地狱问题

简介: 小程序里使用async和await变异步为同步,解决回调地狱问题

一,异步问题


所谓异步:就是我们请求数据库的数据时,由于网速等各方面原因,数据返回的时间不确定,而我们要使用这些数据,就要等数据返回成功后才可以使用,否则就会报错。

1-1,问题描述

如下:

好多同学都会认为代码从上往下执行,会先执行请求成功,然后才会执行第11行的代码,商品个数也应该是2. 但是我们的第11行打印却是0.这是为什么呢。

这个错误的原因就是我们使用数据没有写在请求成功里面。正确数据请求返回是异步的,什么时候请求成功不知道,但是我们的第11行代码不会等我们数据请求成功才会执行,所以第11行的打印是0而不是2.


1-2,解决方案

要想解决上面的问题,把你使用数据的地方写到数据请求成功里。

这样就能解决异步的问题,但是如果我们有很多地方要使用请求成功的数据,该怎么办呢,总不能把所有的代码都写在数据请求成功里吧。这个时候就要借助async和await来解决这个问题了。


二,使用async和await变异步为同步


所谓的同步,就是我们保持代码正常的从上往下执行。但是呢只要有数据请求,就会有异步问题。所以我们这里要想办法变异步为同步。这就要用到async和await了。

代码如下:

可以看出,我们不用把使用到数据的代码写到请求成功里就可以了,这样代码读起来是不是常规的从上往下执行的了。


await翻译过来就是等待的意思,其实这里的意思就是,我们等待数据请求完成后,把数据的返回结果赋值给res,然后等数据请求成功以后,就可以正常使用数据请求返回的结果啦。

注意事项

我们在小程序里使用async和await时,一定是成对的。

async放在函数名前面,await放在数据请求前面。

并且也要勾选一下:增强编译

现在最新版本的小程序开发者工具好像已经支持async和await方法了,好像不勾选增强编译也没事。但是安全起见,还是勾选下增强编译比较好。


三,回调地狱


比如我们有这么一个需求:

用户注册的时候,要先查询是否注册过,没有注册过,才可以新注册。而注册成功后,才可以查看商品列表。


3-1,问题描述


这里给大家分析下需求

如果只看流程图,肯定会觉得很简单;但是里面的链路你要认清一个现实。

就是我们如果想最终把商品显示到页面上,必须依赖每个流程都要请求成功。现在是只有3个请求,如果有100个呢,一层套一层的,最后会把你绕晕。这就是回调地狱。


3-2,回调地狱代码


单纯的给你讲,你可能体会不到回调地狱的坏处。那么我用代码实现下我们上面的需求。

假设我们有

  • 用户表:user
  • 商品表:goods

比如我们要注册一个名为”小石头“的用户

第一步:先查询是否注册过

可以看出返回的个数为0,代表没有注册过


第二步:注册用户

可以看到我们已经可以注册成功了,但是这个时候代码已经嵌套了。

第三步:查询商品

由于我们第二步,已经注册’小石头‘成功,所以我们这一步注册一个’大石头‘,注册成功后查询商品。

首先看下代码,这个时候已经嵌套3层了。代码已经变得有点乱了

看下结果

可以看出我们已经能够成功的查询到商品数据了。


这里只嵌套了三层,看起来还可以接受,如果再继续一层层的嵌套呢。后面代码会变得越来越乱,为了避免回调地狱,我们也可以使用async和await来改造代码。


四,async结合await解决回调地狱


首先看下改造后的代码

可以看到代码简洁了很多,逻辑也就是正常的从上往下执行代码


为了更明显的比较。

到这里我们就讲完了,是不是感觉使用async和await让你的代码简洁了很多。赶紧跟着石头哥的这篇文章去体验下吧。

相关文章
|
7月前
|
小程序
微信小程序无法使用async await的问题
微信小程序无法使用async await的问题
177 0
|
5月前
|
前端开发 小程序 API
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
【微信小程序】使用 Promise、async 和 await 将异步API 改写为同步
89 0
|
7月前
|
小程序 算法 UED
【专栏】小程序图片合成就绪渲染的转变,从异步并发渲染到同步阻塞渲染
【4月更文挑战第29天】本文探讨了小程序图片合成就绪渲染的转变,从异步并发渲染(提高效率,并发处理但可能导致资源竞争和顺序难控)到同步阻塞渲染(顺序可控,资源管理更精细,可能引起界面卡顿)。同步阻塞通过任务队列和阻塞机制确保顺序,解决并发问题。注意避免长时间阻塞,及时释放资源,优化任务效率,并结合异步处理。选择合适方案取决于实际需求,以平衡效率与一致性。
101 1
|
7月前
|
小程序 前端开发 JavaScript
微信小程序——解决异步问题
微信小程序——解决异步问题
358 0
|
7月前
|
小程序 安全 搜索推荐
【社区每周】代创建小程序接口支持同步升级商家账号;提审接口上线审核驳回截图功能(2022年7月第四期)
【社区每周】代创建小程序接口支持同步升级商家账号;提审接口上线审核驳回截图功能(2022年7月第四期)
137 11
|
小程序 前端开发 JavaScript
小程序request请求回调函数异步的解决办法
小程序request请求回调函数异步的解决办法
246 0
|
小程序 数据库 数据安全/隐私保护
关于小程序云开发cms内容管理无法使用,无法同步内容模型到云开发数据库的解决方案
关于小程序云开发cms内容管理无法使用,无法同步内容模型到云开发数据库的解决方案
332 0
|
1月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
34 0
在线课堂+工具组件小程序uniapp移动端源码
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
340 3
|
2月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
57 0
微信小程序更新提醒uniapp
下一篇
DataWorks