promise與async和await的區別

2022-09-06 03:45:06 字數 3068 閱讀 7593

什麼是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語句。

promise與async和await的區別

什麼是async await?async await是寫非同步 的新方式,以前的方法有 函式和promise。async await是基於promise實現的,它不能用於普通的 函式。async await與promise一樣,是非阻塞的。async await使得非同步 看起來像同步 這正是它的魔...

async 與 promise 的區別

async await是基於promise實現的,他不能用於普通的 函式 async await使得非同步 看起來像同步 async await與promise一樣,是非阻塞的。const makerequest else 這些 看著就頭痛。巢狀 6層 括號,return語句很容易讓人感到迷茫,而它...

promise 和 async 的用法

先構造乙個 promise 函式 resolve 和 reject 都是乙個函式 resolve 在成功時呼叫 reject 在失敗時呼叫 function promise 1000 else 1000 then 和 catch 第乙個引數為resolve狀態時的 第二個引數為reject狀態時的 ...