異步函數(shù)async和await用法

先說(shuō)一下async的用法，它作為一個(gè)關(guān)鍵字放到函數(shù)前面，用于表示函數(shù)是一個(gè)異步函數(shù)，因?yàn)閍sync就是異步的意思， 異步函數(shù)也就意味著該函數(shù)的執(zhí)行不會(huì)阻塞后面代碼的執(zhí)行。

寫(xiě)一個(gè)async函數(shù)

async function timeout() {
　　return 'hello world';
}

語(yǔ)法很簡(jiǎn)單，就是在函數(shù)前面加上async關(guān)鍵字，來(lái)表示它是異步的，那怎么調(diào)用呢？

async函數(shù)也是函數(shù)，平時(shí)我們?cè)趺词褂煤瘮?shù)就怎么使用它，直接加括號(hào)調(diào)用就可以了，為了表示它沒(méi)有阻塞它后面代碼的執(zhí)行，我們?cè)赼sync函數(shù)調(diào)用之后加一句console.log;

async function timeout() {
    return 'hello world'
}
timeout();
console.log('雖然在后面，但是我先執(zhí)行');

打開(kāi)瀏覽器控制臺(tái)，我們看到了

async函數(shù) timeout調(diào)用了，但是沒(méi)有任何輸出，它不是應(yīng)該返回 'hello world',先不要著急，看一看timeout()執(zhí)行返回了什么？把上面的 timeout()語(yǔ)句改為console.log(timeout())

async function timeout() {
    return 'hello world'
}
console.log(timeout());
console.log('雖然在后面，但是我先執(zhí)行');

繼續(xù)看控制臺(tái)

原來(lái)async函數(shù)返回的是一個(gè)promise對(duì)象，如果要獲取到promise返回值，我們應(yīng)該用then方法，繼續(xù)修改代碼

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在后面，但是我先執(zhí)行');

看控制臺(tái)

我們獲取到了"hello world',同時(shí)timeout的執(zhí)行也沒(méi)有阻塞后面代碼的執(zhí)行，和我們剛才說(shuō)的一致。

這時(shí)，你可能注意到控制臺(tái)中的Promise有一個(gè)resolved，這是async函數(shù)內(nèi)部的實(shí)現(xiàn)原理。如果async函數(shù)中有返回一個(gè)值 ,當(dāng)調(diào)用該函數(shù)時(shí)，內(nèi)部會(huì)調(diào)用Promise.solve()方法把它轉(zhuǎn)化成一個(gè)promise對(duì)象作為返回，但如果timeout函數(shù)內(nèi)部拋出錯(cuò)誤呢？

那么就會(huì)調(diào)用Promise.reject()返回一個(gè)promise對(duì)象，這時(shí)修改一下timeout函數(shù)

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 調(diào)用Promise.resolve() 返回promise 對(duì)象。
console.log(timeout(false)); // 調(diào)用Promise.reject() 返回promise 對(duì)象。

控制臺(tái)如下：

如果函數(shù)內(nèi)部拋出錯(cuò)誤， promise對(duì)象有一個(gè)catch方法進(jìn)行捕獲。

timeout(false).catch(err => {
    console.log(err)
})

async關(guān)鍵字差不多了，我們?cè)賮?lái)考慮await關(guān)鍵字，await是等待的意思，那么它等待什么呢，它后面跟著什么呢？其實(shí)它后面可以放任何表達(dá)式，不過(guò)我們更多的是放一個(gè)返回promise對(duì)象的表達(dá)式。

注意await關(guān)鍵字只能放到async函數(shù)里面

現(xiàn)在寫(xiě)一個(gè)函數(shù)，讓它返回promise對(duì)象，該函數(shù)的作用是2s之后讓數(shù)值乘以2

// 2s 之后返回雙倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    } )
}

現(xiàn)在再寫(xiě)一個(gè)async函數(shù)，從而可以使用await關(guān)鍵字， await后面放置的就是返回promise對(duì)象的一個(gè)表達(dá)式，所以它后面可以寫(xiě)上doubleAfter2seconds函數(shù)的調(diào)用

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
 
testResult();

打開(kāi)控制臺(tái)，2s之后，輸出了60.

現(xiàn)在我們看看代碼的執(zhí)行過(guò)程，調(diào)用testResult函數(shù)，它里面遇到了await, await表示等一下，代碼就暫停到這里，不再向下執(zhí)行了，它等什么呢？

等后面的promise對(duì)象執(zhí)行完畢，然后拿到promise resolve的值并進(jìn)行返回，返回值拿到之后，它繼續(xù)向下執(zhí)行。具體到我們的代碼,遇到await之后，代碼就暫停執(zhí)行了，等待doubleAfter2seconds(30) 執(zhí)行完畢，doubleAfter2seconds(30)返回的promise開(kāi)始執(zhí)行，2秒之后，promise resolve了，并返回了值為60，這時(shí)await才拿到返回值60，然后賦值給result，暫停結(jié)束，代碼才開(kāi)始繼續(xù)執(zhí)行，執(zhí)行 console.log語(yǔ)句。

就這一個(gè)函數(shù)，我們可能看不出async/await的作用，如果我們要計(jì)算3個(gè)數(shù)的值，然后把得到的值進(jìn)行輸出呢？

async function testResult() {
    let first = await doubleAfter2seconds(30);
    let second = await doubleAfter2seconds(50);
    let third = await doubleAfter2seconds(30);
    console.log(first + second + third);
}

6秒后，控制臺(tái)輸出220, 我們可以看到，寫(xiě)異步代碼就像寫(xiě)同步代碼一樣了，再也沒(méi)有回調(diào)地域了。

注意：

• async和await基于promise的。使用async的函數(shù)將會(huì)始終返回一個(gè)promise對(duì)象。這一點(diǎn)很重要，要記住，這可能是你遇到的容易犯錯(cuò)的地。
• 在使用await的時(shí)候我們暫停了函數(shù)，而非整段代碼。
• async和await是非阻塞的。
• 你仍然可以使用Promise例如 Promise.all()。

async/await為什么叫異步

外異內(nèi)同

看看下面這段代碼

?? ?async function task () {
?? ? ?for (let val of [0, 1, 2, 3]) {
?? ? ? ?let address = ['https://mp.csdn.net','https://mp.csdn.net/mdeditor','https://baidu.com','https://mp.csdn.net/mdeditor']
?? ? ? ?let result = await fetch(`${address[val]}`);
?? ? ? ?console.log('in')
?? ? ?}
?? ?}
?? ?task();
?? ?console.log('out')

這段代碼先打印了 out , 然后打印兩次 in, 第三次因?yàn)榭缬? task函數(shù)返回錯(cuò)誤 , 不會(huì)繼續(xù)請(qǐng)求第四次

從上面的例子看到：

async 聲明了一個(gè) 異步函數(shù)，這個(gè) 異步函數(shù) 體內(nèi)有一行 await 語(yǔ)句，它告示了該行為同步執(zhí)行，并且與上下相鄰的代碼是依次逐行執(zhí)行的。就是說(shuō)：

• async函數(shù)執(zhí)行，返回了一個(gè) promise 對(duì)象, 不會(huì)阻塞后面的代碼, 所以可以理解 task 是一個(gè)異步方法
• await所在的那一行語(yǔ)句是同步的

既然返回promise, 上面task就可以這樣

task().then(res => {alert(res)}).catch(err=>alert(err))

task 整體是一個(gè)異步函數(shù)，內(nèi)部的await是同步, 簡(jiǎn)稱“外異內(nèi)同”

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論