昨天更新的是“JavaScript中的Promise使用詳解”，其實也就是說了下基本用法和自己對Promise的理解，可能有錯誤之處，也歡迎指出。今天就說一說“JavaScript中的async/await的用法和理解”

JavaScript中非同步/等待的用法和理解

程式語言中任意一個關鍵字都是有意義的，我們先從字面意思來理解。

1.async

async 是“非同步”的簡寫，帶async關鍵字的函式，是宣告非同步函式，返回值是promise物件，如果async關鍵字函式返回的不是promise，會自動用Promise.resolve()包裝。

async function test() {
 return 'hello word'
}
test();

執行上面程式碼返回結果如下

2.await

await 可以認為是 async wait 的簡寫。所以應該很好理解 async 用於申明一個 function 是非同步的，而 await 用於等待一個非同步方法執行完成。

如果它等到的不是一個 Promise 物件，那 await 表示式的運算結果就是它等到的東西。

如果它等到的是一個 Promise 物件，await 就忙起來了，它會阻塞後面的程式碼，等著 Promise 物件 resolve，然後得到 resolve 的值，作為 await 表示式的運算結果。

我們看下面段程式碼

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"),2000);
 });
}

const result = test();
console.log(result.then((val)=>{console.log(val)}));
console.log('結束')

我們以編輯器編輯器程式碼執行順序來理下，

1.首先我們定義一個方法，這個方法返回Promise 物件，.then()函式兩秒鐘後返回呼叫成功。

2.接下來例項化test()函式。

3.呼叫result物件的then()函式，接收返回值，注意，這裡是非同步的

4.列印日誌結束

我們執行程式碼，看結果

看到先列印“結束”，然後才打印的“hello word”，這就是非同步，我們改造下程式碼

function test() {
 return new Promise(resolve => {
  setTimeout(() => resolve("hello word"),2000);
 });
}

const result = await test();
console.log(result);
console.log('結束')

用await關鍵字接test()函式，看這次返回結果

我們發現先列印“hello word”，然後才打印“結束”，由於test()造成的阻塞，console.log(‘結束')會等到兩秒後執行。

再來說下優缺點

優點：相對於promise，async/await處理 then 的呼叫鏈，程式碼要清晰很多，幾乎和同步程式碼一樣。

缺點：濫用 await 可能會導致效能問題，因為 await 會阻塞程式碼。

總結

到此這篇關於JavaScript中非同步/等待的用法與理解的文章就介紹到這了,更多相關JavaScript非同步/等待的用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！