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

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

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

1.async

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

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

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

2.await

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

如果它等到的不是一個(gè) Promise 對(duì)象，那 await 表達(dá)式的運(yùn)算結(jié)果就是它等到的東西。

如果它等到的是一個(gè) Promise 對(duì)象，await 就忙起來(lái)了，它會(huì)阻塞后面的代碼，等著 Promise 對(duì)象 resolve，然后得到 resolve 的值，作為 await 表達(dá)式的運(yùn)算結(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í)行順序來(lái)理下，

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

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

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

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

我們運(yùn)行代碼，看結(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é)束’)會(huì)等到兩秒后執(zhí)行。

再來(lái)說(shuō)下優(yōu)缺點(diǎn)

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

缺點(diǎn)：濫用 await 可能會(huì)導(dǎo)致性能問(wèn)題，因?yàn)?await 會(huì)阻塞代碼。

總結(jié)

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