首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序里使用async和await变异步为同步,解决回调地狱问题

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

原创
作者头像
编程小石头
修改2021-05-31 10:31:45
1.2K0
修改2021-05-31 10:31:45
举报

最近好多同学,学习完石头哥的云开发基础以后,自己实际项目中,总会遇到各种各样的异步问题。

一,异步问题

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

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让你的代码简洁了很多。赶紧跟着石头哥的这篇文章去体验下吧。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一,异步问题
    • 1-1,问题描述
      • 1-2,解决方案
      • 二,使用async和await变异步为同步
        • 注意事项
        • 三,回调地狱
          • 3-1,问题描述
            • 3-2,回调地狱代码
              • 第一步:先查询是否注册过
              • 第二步:注册用户
              • 第三步:查询商品
          • 四,async结合await解决回调地狱
          相关产品与服务
          云开发 CloudBase
          云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档