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

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

一,异步问题

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

1-1，问题描述

如下：

image

好多同学都会认为代码从上往下执行，会先执行请求成功，然后才会执行第11行的代码，商品个数也应该是2. 但是我们的第11行打印却是0.这是为什么呢。
这个错误的原因就是我们使用数据没有写在请求成功里面。正确数据请求返回是异步的，什么时候请求成功不知道，但是我们的第11行代码不会等我们数据请求成功才会执行，所以第11行的打印是0而不是2.

1-2，解决方案

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

image

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

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

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

image

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

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

注意事项

我们在小程序里使用async和await时，一定是成对的。
async放在函数名前面，await放在数据请求前面。

image

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

image

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

三,回调地狱

比如我们有这么一个需求：
用户注册的时候，要先查询是否注册过，没有注册过，才可以新注册。而注册成功后，才可以查看商品列表。

3-1，问题描述

这里给大家分析下需求

image

如果只看流程图，肯定会觉得很简单；但是里面的链路你要认清一个现实。
就是我们如果想最终把商品显示到页面上，必须依赖每个流程都要请求成功。现在是只有3个请求，如果有100个呢，一层套一层的，最后会把你绕晕。这就是回调地狱。

3-2,回调地狱代码

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

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

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

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

image

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

第二步：注册用户

image

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

image

第三步：查询商品

由于我们第二步，已经注册’小石头‘成功，所以我们这一步注册一个’大石头‘，注册成功后查询商品。
首先看下代码，这个时候已经嵌套3层了。代码已经变得有点乱了

image

看下结果

image

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

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

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

首先看下改造后的代码

image

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

为了更明显的比较。

image

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