Vue中 async 和 await

前言

async 和 await 在 vue 和 .Net 中的用法基本一致。

async 表示該方法是異步的,在 vue 中 async 標記的方法返回一個 promise,在.Net中則返回一個 Task。vue中的 Promise 其實就相當於 .Net 中的 Task。都是任務的概念。

await 用在返回 Promise 或 task 的方法調用前,表示將等待任務的完成。重要的是不會阻塞線程

同步、異步、阻塞和非組賽

對於這幾個概念的解釋,通常都是用燒水這個例子。

  • 同步阻塞:老張燒水,將水壺放在爐子上,然後站在那裏等待水壺燒開。
  • 同步非阻塞:老張燒水,將水壺放在爐子上,然後去客廳看電視,然後時不時的去看看水有沒有燒開。
  • 異步阻塞:老張使用響水壺來燒水,將水壺放在爐子上,然後站在那裏等待水壺燒開,但是不用每隔一段時間去看水開,而是水燒開後,水壺會自動通知他。
  • 異步非阻塞:老張使用響水壺來燒水,將水壺放在爐子上,然後就去客廳看電視,然後水燒開後,水壺會自動通知他。

同步和異步:

  • 同步就是燒水,需要自己去輪詢(每隔一段時間看看水燒開了沒有)
  • 異步就是水燒開了,水壺會自動通知你,你就可以回來處理燒開的水了。

阻塞和非阻塞:

  • 阻塞:就是燒水的同時,你不可以去幹其它的事情。
  • 非阻塞:就是燒水的同時,你可以去幹其它事情,比如看電視,上網等等。

阻塞和非阻塞是相對於線程是否被阻塞。

async

在 Vue 中定義一個異步方法很簡單,在函數前邊加上 async 關鍵字即可。調用方法則和平時的調用一樣。如:

async function getData(){
    return "hello world!"
}
console.log(getData())
console.log("雖然我在後邊,但是我先執行")

輸出結果:

由此我們可以看到 async 返回的是一個 Promise 對象。但是要想獲取裏面的值,就需要藉助 then 的調用鏈方法去獲取。

async function getData(){
    return "hello world!"
}
getData().then(result => {
    console.log(result)
})
console.log("雖然我在後邊,但是我先執行")

輸出結果:

這就與我們想要的結果一致。

promise的特點:

  • 無等待,在沒有 await 的情況下執行 async 函數,它會立即執行,並立即返回一個 Promise 對象。
  • 無阻塞,既然是立即返回,那麼就不會阻塞後邊的代碼語句。

await

await 的含義爲等待,用於等待一個異步方法的執行完成,只有異步方法執行完成後,才能繼續執行後邊的操作。

不過按語法說明來解釋的話,await 操作符用於等待一個 Promise 對象.

語法:

[返回值] = await 表達式;

表達式:

一個 Promise 對象或任何要等待的值。

返回值:

返回 Promise 對象的處理結果。如果等待的不是 Promise 對象,則返回該值本身。

也就是說 await 可以指定任何對象。

描述:

await 表達式會暫停當前 async function 的執行,等待 Promise 處理完成。若 Promise 正常處理(fulfilled),其回調的 resolve 函數參數作爲 await 表達式的值,繼續執行 async function

若 Promise 處理異常(rejected),await 表達式會把 Promise 的異常原因拋出。

另外,如果 await 操作符後的表達式的值不是一個 Promise,則返回該值本身。

如果返回的是一個Promise對象,await 會阻塞後邊的代碼,等待 Promise 對象 resolve,然後得到 resolve 的值,作爲 await 表達式的結果。

因爲會阻塞,所以這也就是爲什麼 await 需要放在 async 方法中的原因。async 不會造成阻塞,它內部所有的阻塞都被封裝在一個Promise 中異步執行。

總結

async 會將後面函數的返回值封裝成一個 Promise 對象,而 await 會等待這個 Promise 完成,並將其 resolve 的結果返回出來。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章