评论

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

点赞 16
收藏
评论

5 个评论

  • Sunday
    Sunday
    2023-03-17

    图呢,怎么看不到图


    2023-03-17
    赞同 1
    回复
  • 于庆涛
    于庆涛
    2021-06-13

    不点赞对不起我看过你这篇文章!

    2021-06-13
    赞同 1
    回复
  • 翟阳
    翟阳
    2023-01-04

    全网就这篇文章说的最简单易懂了

    2023-01-04
    赞同
    回复
  • ℀ 
    ℀ 
    2021-07-18

    微信小程序里原生支持async/await了吗?

    2021-07-18
    赞同
    回复
  • 于庆涛
    于庆涛
    2021-06-13

    await这种方式,为什么感觉比嵌套慢很多呢?

    2021-06-13
    赞同
    回复
登录 后发表内容