1. 程式人生 > 實用技巧 >await和async代替promise

await和async代替promise

來到新公司,發現程式碼裡好多地方用到裡await搭配async的使用,尤其是呼叫介面的地方。 好奇這種同步獲取介面資料的方法,以前都是用promise.then()的方式,當要按順序呼叫介面時,得一層層的then巢狀。而現在只要並排的寫await就可以了。

首先async定義的函式,返回的都是一個primise物件:

async function timeout() {
  return 'hello world';
}

console.log(timeout());

打印出來如下圖

  • await的意思就是等待。它後面可以跟一個表示式。如果是值(如字串、數字、普通物件等等)的話,返回值就是本身的值。
  • 不過最常用的是後面跟一個promise物件。await會等待這個promise的狀態由pending轉為fulfilled或者rejected。在此期間它會阻塞,延遲執行await語句後面的語句。

所以為了解決await的阻塞問題, 一般都要配套async加在函式宣告時一起使用,這樣做就能把阻塞限制在函式內部,不影響函式外的程式碼執行。

如下是配套的使用方式

 async getData() {
     try {
        let dataList = await this.getList();
        this.dataList = dataList
        console.log(dataList)   
     } 
catch(err) { console.log(err); } }
async和await,把非同步執行的程式碼寫得像同步程式碼那樣直觀。async的函式中可以有一個或多個非同步操作,一旦遇到await就會立即返回一個pending狀態的Promise物件,暫時返回執行程式碼的控制權,使得函式外的程式碼得以繼續執行,這是保證非阻塞的部分。