小程序里使用async和await變異步為同步，解決回調(diào)地獄問題
2021-08-06 13:53:28

最近好多同學(xué)，學(xué)習(xí)完石頭哥的云開發(fā)基礎(chǔ)以后，自己實(shí)際項(xiàng)目中，總會遇到各種各樣的異步問題。

一,異步問題

所謂異步：就是我們請求數(shù)據(jù)庫的數(shù)據(jù)時(shí)，由于網(wǎng)速等各方面原因，數(shù)據(jù)返回的時(shí)間不確定，而我們要使用這些數(shù)據(jù)，就要等數(shù)據(jù)返回成功后才可以使用，否則就會報(bào)錯(cuò)。

1-1，問題描述

如下：

好多同學(xué)都會認(rèn)為代碼從上往下執(zhí)行，會先執(zhí)行請求成功，然后才會執(zhí)行第11行的代碼，商品個(gè)數(shù)也應(yīng)該是2. 但是我們的第11行打印卻是0.這是為什么呢。
這個(gè)錯(cuò)誤的原因就是我們使用數(shù)據(jù)沒有寫在請求成功里面。正確數(shù)據(jù)請求返回是異步的，什么時(shí)候請求成功不知道，但是我們的第11行代碼不會等我們數(shù)據(jù)請求成功才會執(zhí)行，所以第11行的打印是0而不是2.

1-2，解決方案

要想解決上面的問題，把你使用數(shù)據(jù)的地方寫到數(shù)據(jù)請求成功里。

這樣就能解決異步的問題，但是如果我們有很多地方要使用請求成功的數(shù)據(jù)，該怎么辦呢，總不能把所有的代碼都寫在數(shù)據(jù)請求成功里吧。這個(gè)時(shí)候就要借助async和await來解決這個(gè)問題了。

二，使用async和await變異步為同步

所謂的同步，就是我們保持代碼正常的從上往下執(zhí)行。但是呢只要有數(shù)據(jù)請求，就會有異步問題。所以我們這里要想辦法變異步為同步。這就要用到async和await了。
代碼如下：

可以看出，我們不用把使用到數(shù)據(jù)的代碼寫到請求成功里就可以了，這樣代碼讀起來是不是常規(guī)的從上往下執(zhí)行的了。

await翻譯過來就是等待的意思，其實(shí)這里的意思就是，我們等待數(shù)據(jù)請求完成后，把數(shù)據(jù)的返回結(jié)果賦值給res，然后等數(shù)據(jù)請求成功以后，就可以正常使用數(shù)據(jù)請求返回的結(jié)果啦。

注意事項(xiàng)

我們在小程序里使用async和await時(shí)，一定是成對的。
async放在函數(shù)名前面，await放在數(shù)據(jù)請求前面。

并且也要勾選一下：增強(qiáng)編譯

現(xiàn)在最新版本的小程序開發(fā)者工具好像已經(jīng)支持async和await方法了，好像不勾選增強(qiáng)編譯也沒事。但是安全起見，還是勾選下增強(qiáng)編譯比較好。

三,回調(diào)地獄

比如我們有這么一個(gè)需求：
用戶注冊的時(shí)候，要先查詢是否注冊過，沒有注冊過，才可以新注冊。而注冊成功后，才可以查看商品列表。

3-1，問題描述

這里給大家分析下需求

如果只看流程圖，肯定會覺得很簡單；但是里面的鏈路你要認(rèn)清一個(gè)現(xiàn)實(shí)。
就是我們?nèi)绻胱罱K把商品顯示到頁面上，必須依賴每個(gè)流程都要請求成功?，F(xiàn)在是只有3個(gè)請求，如果有100個(gè)呢，一層套一層的，最后會把你繞暈。這就是回調(diào)地獄。

3-2,回調(diào)地獄代碼

單純的給你講，你可能體會不到回調(diào)地獄的壞處。那么我用代碼實(shí)現(xiàn)下我們上面的需求。
假設(shè)我們有

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

比如我們要注冊一個(gè)名為”小石頭“的用戶

第一步：先查詢是否注冊過

可以看出返回的個(gè)數(shù)為0，代表沒有注冊過

第二步：注冊用戶

可以看到我們已經(jīng)可以注冊成功了，但是這個(gè)時(shí)候代碼已經(jīng)嵌套了。

第三步：查詢商品

由于我們第二步，已經(jīng)注冊’小石頭‘成功，所以我們這一步注冊一個(gè)’大石頭‘，注冊成功后查詢商品。
首先看下代碼，這個(gè)時(shí)候已經(jīng)嵌套3層了。代碼已經(jīng)變得有點(diǎn)亂了

看下結(jié)果

可以看出我們已經(jīng)能夠成功的查詢到商品數(shù)據(jù)了。

這里只嵌套了三層，看起來還可以接受，如果再繼續(xù)一層層的嵌套呢。后面代碼會變得越來越亂，為了避免回調(diào)地獄，我們也可以使用async和await來改造代碼。

四，async結(jié)合await解決回調(diào)地獄

首先看下改造后的代碼

可以看到代碼簡潔了很多，邏輯也就是正常的從上往下執(zhí)行代碼

為了更明顯的比較。

到這里我們就講完了，是不是感覺使用async和await讓你的代碼簡潔了很多。趕緊跟著石頭哥的這篇文章去體驗(yàn)下吧。