promise與async和await的區別

什麼是async/await?

async/await是寫非同步**的新方式，以前的方法有**函式和promise。

async/await是基於promise實現的，它不能用於普通的**函式。

async/await與promise一樣，是非阻塞的。

async/await使得非同步**看起來像同步**，這正是它的魔力所在。

async/await語法

假設函式getjson返回值是 promise，並且 promise resolves 有一些json 物件。我們只想呼叫它並且記錄該json並且返回完成。

1）使用promise：

const makerequest = () =>
getjson().then(data => )
makerequest()

2）使用async：

const makerequest = async () => 
makerequest()

區別：

1）函式前面多了乙個aync關鍵字。await關鍵字只能用在aync定義的函式內。async函式會隱式地返回乙個promise，該promise的reosolve值就是函式return的值。(示例中reosolve值就是字串」done」)

2）第1點暗示我們不能在最外層**中使用await，因為不在async函式內。例如：

// 不能在最外層**中使用await
await makerequest()
// 這是會出事情的 
makerequest().then((result) => )

為什麼async/await更好？

1）使用async函式可以讓**簡潔很多，不需要像promise一樣需要些then，不需要寫匿名函式處理promise的resolve值，也不需要定義多餘的data變數，還避免了巢狀**。

2）錯誤處理：

async/await 讓 try/catch 可以同時處理同步和非同步錯誤。在下面的promise示例中，try/catch 不能處理 json.parse 的錯誤，因為它在promise中。我們需要使用 .catch，這樣錯誤處理**非常冗餘。並且，在我們的實際生產**會更加複雜。

const makerequest = () => )
// 取消注釋，處理非同步**的錯誤
// .catch((err) => )
} catch (err) 
}

使用aync/await的話，catch能處理json.parse錯誤:

const makerequest = async () =>  catch (err) 
}

3）條件語句

條件語句也和錯誤捕獲是一樣的，在 async 中也可以像平時一般使用條件語句

promise：

const makerequest = () => )
} else })}

async/await：

const makerequest = async () =>  else 
}

4）中間值

你很可能遇到過這樣的場景，呼叫promise1，使用promise1返回的結果去呼叫promise2，然後使用兩者的結果去呼叫promise3。

const makerequest = () => )})}

如果 promise3 不需要 value1，巢狀將會變得簡單。如果你忍受不了巢狀，你可以將value 1 & 2 放進promise.all來避免深層巢狀，但是這種方法為了可讀性犧牲了語義。除了避免巢狀，並沒有其他理由將value1和value2放在乙個陣列中。

const makerequest = () => ).then(([value1, value2]) => )
}

使用async/await的話，**會變得異常簡單和直觀。

const makerequest = async () =>

5）錯誤棧

如果 promise 連續呼叫，對於錯誤的處理是很麻煩的。你無法知道錯誤出在**。

const makerequest = () => )
}makerequest().catch(err => )

async/await中的錯誤棧會指向錯誤所在的函式。在開發環境中，這一點優勢並不大。但是，當你分析生產環境的錯誤日誌時，它將非常有用。這時，知道錯誤發生在makerequest比知道錯誤發生在then鏈中要好。

const makerequest = async () => 
makerequest().catch(err => )

6）除錯

async/await能夠使得**除錯更簡單。2個理由使得除錯promise變得非常痛苦:

《1》不能在返回表示式的箭頭函式中設定斷點

《2》如果你在.then**塊中設定斷點，使用step over快捷鍵，偵錯程式不會跳到下乙個.then，因為它只會跳過非同步**。

使用await/async時，你不再需要那麼多箭頭函式，這樣你就可以像除錯同步**一樣跳過await語句。