js中async和await的基本使用

async和await是在es7中的內容,不過現在主流瀏覽器都支持,今天我們就來說說怎麼用。

首先你得先了解:es6中的promise,請自行了解,此篇文章不談。

async和await是用來處理異步操作的,把異步變為同步的一種方法。

async聲明一個function來表示這個異步函數,await用於等待函數中某個異步操作執行完成。

js中async和await的基本使用

async返回的是一個promise對象,返回值可在promise中的then方法中的第一個回調函數中使用。

await只能用於async的內部,await用於在一個異步操作之前,表示要等待這個異步操作的返回值。

如果await得到不是一個promise對象,那麼就不會等待這個異步操作。

如果是一個promise對象,await就會等待promise對象的resolve,得到傳入resolve的參數,作為返回值。

js中async和await的基本使用

依次輸出:1,20。

在attract函數中就使用await對象,它會等待edition函數執行完畢,在執行此函數下面的代碼,變為同步了。

如果在edition函數或者attract函數中報錯了,都將會直接進入then方法的第二個回調函數。

在edition函數中可以直接調用reject進行錯誤輸出,在attract函數則必須是主動拋出代碼錯誤才可以。

注意:當使用了await時,只會阻塞async函數中的代碼,外部代碼依舊是異步在執行的。


例子:

js中async和await的基本使用

程序第一肯定會輸出1,然後進入attract函數內部,接著輸出2,然後看見了await,等待edition函數的返回值,此時在attract函數中的代碼是被阻塞的,但是外部不會被阻塞,所以就接著輸出3。

然後兩秒後,輸出edition函數返回的4,最後回到attract函數then方法的第一個回調函數,輸出了5。

結果:

js中async和await的基本使用


分享到:


相關文章: