前端小知識：大廠必考async

圖片來自互聯網

什麼是async？

async函數是ES7中出現的異步操作的解決方案，而且它被很多人認為是異步操作的終極解決方案，那麼回想一下，之前我們還學過哪些異步操作的解決方案。

如果你腦子裡兩個解決方案都想不出來，那說明你對Javascript異步操作的學習還不夠充分，建議回去重新溫習理解一下異步操作這塊知識。

現在我們按照出現時間的先後梳理一下：

• 回調函數
• Promise
• Generator
• async

對於前三者，本文暫不詳述，今天只針對async函數進行分析。

async函數用法詳解

瞭解了async的用途和基本概念之後，下面我們來講講async函數的用法。

async函數的用法中有三個點大家必須記住：

• async函數返回的是一個Promise對象（即使你返回的不是Promise對象，它也會幫你將返回的數據包裝成Promise對象返回），因此可以直接使用then方法添加回調函數
• await只能在async函數中使用，作用是獲取Promise函數中返回的內容，即獲取Promise中resolve或者reject中的內容
• async函數在執行時，一旦遇到await就會先返回執行主線程，等到異步操作完成後，再繼續執行函數體內的語句。

說了這麼多，下面上個例子幫助大家理解：

 1//請求城市天氣函數，返回Promise對象，實際工程中可以放入ajax請求
 2const reqWeather=(city)=>{
 3 return new Promise((resolve,reject)=>{
 4 if(city==="HangZhou"){
 5 resolve("sunny");
 6 }else{
 7 reject("失敗")
 8 }
 9 })
10}
11//定義async函數，函數名為getWeather
12const getWeather=async ()=>{
13 const weather=await reqWeather("HangZhou"); //此時await獲取的是resolve中的內容sunny
14 return weather
15};
16//async函數返回的是一個Promise對象，所以可以直接在後面添加then回調函數
17getWeather().then((data)=>{
18 console.log(data); //sunny
19});

async函數使用注意事項

上面說過，await獲取的是Promise對象中resolve或者reject中的內容，如果是獲取resolve中的內容，那是完全沒有問題，但是如果獲取的是reject中的內容，那麼就會報錯。

獲取reject內容例子：

將上面代碼中的第13行改為如下代碼：

1const weather=await reqWeather("Beijing");

我們發現最後打印的結果如下所示：

報錯截圖

顯然我們不想系統在運行時報如下紅色的錯誤提示。

解決辦法：

將await函數外層用try...catch...包裹，以此來捕捉錯誤

即將13行代碼改為如下代碼：

1try{
2 const weather=await reqWeather("HangZho");
3 return weather
4 }
5 catch (e) {
6 console.log(e);
7 }

1try{
2 const weather=await reqWeather("HangZho");
3 return weather
4 }
5 catch (e) {
6 console.log(e);
7 }

1try{
2 const weather=await reqWeather("HangZho");
3 return weather
4 }
5 catch (e) {
6 console.log(e);
7 }

改正後結果如下：

結果圖

以上就是今天的所有內容了，關注我，每天學習一點前後端知識，一起從碼農走向高級工程師

專欄

必須掌握的前端面試題

作者：小劉愛學習

10幣

0人已購

查看