使用async await更好的解決非同步問題

2021-09-12 00:15:05 字數 2212 閱讀 5259

async函式是generator的乙個語法糖,使用async函式實際上返回的是乙個promise物件。如下:

async function

fn()

// 或者

const fn = async () =>複製**

在宣告函式的時候,前面加上關鍵字async即可。我們可以使用console.log列印出上邊宣告的函式fn,結果如下:

console.log(fn());

// result

promise = 複製**

顯然,fn的執行結果其實就是乙個promise物件,因此我們可以使用then來處理後續邏輯。

fn().then(res =>)複製**

await的是含義是等待。意思是**需要等待await後面的函式執行完成並且有了返回結果之後,才繼續執行後續的**,以此來實現同步的效果。 需要注意的是,await關鍵字只能在async函式中使用,並且await後面的函式執行後必須返回乙個promise物件才能實現同步的效果

當我們使用乙個變數去接收await的返回值時,該返回值是promise中resolve出來的值(也就是promisevalue)。

// 定乙個返回promise物件的函式

function

f1(),1000);

})}function

f2(),1000);

})}function

f3(),1000);

})}const foo = async () =>

foo();

// 執行結果:

// 1

// 2

// 3複製**

執行這個例子我們可以看出,當在async函式中,執行遇到await時,就會等待await後面的函式執行完畢,而不會直接執行後續程式

如果我們直接使用promise的話,想要實現以上的結果,就不得不把後續的邏輯寫在then方法中。

function

f1(),1000);

})}function

f2(),1000);

})}function

f3(),1000);

})}const foo = () =>).then(t =>).then(t =>);

}foo();複製**

異常處理

在promise中,我們知道是通過catch的方式來捕獲異常。而當我們使用async時,則是通過try/catch來捕獲異常。

function

fn(),1000)

})}const foo = asyn () =>catch(e)

}foo();複製**

如果有多個await函式,那麼只會返回第乙個捕獲到的異常。

function

f1(),1000)

})}function

f2(),1000)

})}function

f3(),1000)

})}const foo = async () =>catch(e)

}foo();複製**

如果我們直接使用promise,實現以上效果,**應該寫成如下:

function

f1(),1000)

})}function

f2(),1000)

})}function

f3(),1000)

})}const foo = () =>).then(() =>).catch(err =>)

}foo();複製**

很顯然,如果使用async/await的話,**結構會更加簡潔,邏輯也更加清晰,更利於專案中的開發以及維護。

async await使用的要點

async await的使用 1 如果乙個方法標註了async,則其返回值只能是 void,task,task三者之一 2 如果非同步方法中沒有await,那麼這個方法將會以同步方式執行 3 單個async方法中可以擁有多個await 4 當遇到await表示式時,呼叫執行緒將會掛起,知道await...

async await的正確使用

經過一段時間的使用,對於async await的正確使用,我總結了一下幾點 必須使用try.catch。確保正確的流程控制。123 4567 891011 1213 1415 1617 1819 2021 2223 2425 2627 2829 resolve function getdata 10...

使用async await 總結

async await 迴圈並行處理 同步 同一執行緒之中,順序完成不同的操作,是一種阻塞模式 後乙個請求操作需要等待前乙個操作完成之後,才能發出。非同步 需要開啟不同的執行緒,是非阻塞模式。同步類似於打 而非同步相當於發簡訊。傳送請求獲取天氣非同步操作,利用node fetch完成請求 const...