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

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

編程語言中任意一個關(guān)鍵字都是有意義的，我們先從字面意思來理解。

1.async

async 是“異步”的簡寫，帶async關(guān)鍵字的函數(shù)，是聲明異步函數(shù)，返回值是promise對象，如果async關(guān)鍵字函數(shù)返回的不是promise，會自動用Promise.resolve()包裝。

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

運行上面代碼返回結(jié)果如下

2.await

await 可以認為是 async wait 的簡寫。所以應(yīng)該很好理解 async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執(zhí)行完成。

如果它等到的不是一個 Promise 對象，那 await 表達式的運算結(jié)果就是它等到的東西。

如果它等到的是一個 Promise 對象，await 就忙起來了，它會阻塞后面的代碼，等著 Promise 對象 resolve，然后得到 resolve 的值，作為 await 表達式的運算結(jié)果。

我們看下面段代碼

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

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

我們以編輯器編輯器代碼執(zhí)行順序來理下，

1.首先我們定義一個方法，這個方法返回Promise 對象，.then()函數(shù)兩秒鐘后返回調(diào)用成功。

2.接下來實例化test()函數(shù)。

3.調(diào)用result對象的then()函數(shù)，接收返回值，注意，這里是異步的

4.打印日志結(jié)束

我們運行代碼，看結(jié)果

看到先打印“結(jié)束”，然后才打印的“hello word”，這就是異步，我們改造下代碼

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

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

用await關(guān)鍵字接test()函數(shù)，看這次返回結(jié)果

我們發(fā)現(xiàn)先打印“hello word”，然后才打印“結(jié)束”，由于test()造成的阻塞，console.log(‘結(jié)束')會等到兩秒后執(zhí)行。

再來說下優(yōu)缺點

優(yōu)點：相對于promise，async/await處理 then 的調(diào)用鏈，代碼要清晰很多，幾乎和同步代碼一樣。

缺點：濫用 await 可能會導(dǎo)致性能問題，因為 await 會阻塞代碼。

總結(jié)

到此這篇關(guān)于JavaScript中異步/等待的用法與理解的文章就介紹到這了,更多相關(guān)JavaScript異步/等待的用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論