vue中非同步函式async和await的用法

天生不是寵兒發表於2018-12-18
Vue非同步函式AI

async 作為一個關鍵字放到函式前面，用於表示函式是一個非同步函式
async 函式返回的是一個promise 物件，如果要獲取到promise 返回值，我們應該用then 方法

async function timeout() {
    return 'hello world'
}
timeout().then(result => {
    console.log(result);
})
console.log('雖然在後面，但是我先執行');
複製程式碼

控制檯中的Promise 有一個resolved，這是async 函式內部的實現原理。如果async 函式中有返回一個值 ,當呼叫該函式時，內部會呼叫Promise.solve() 方法把它轉化成一個promise 物件作為返回，但如果timeout 函式內部丟擲錯誤呢？ 那麼就會呼叫Promise.reject() 返回一個promise 物件， 這時修改一下timeout 函式

async function timeout(flag) {
    if (flag) {
        return 'hello world'
    } else {
        throw 'my god, failure'
    }
}
console.log(timeout(true))  // 呼叫Promise.resolve() 返回promise 物件。
console.log(timeout(false)); // 呼叫Promise.reject() 返回promise 物件。
複製程式碼

如果函式內部丟擲錯誤， promise 物件有一個catch 方法進行捕獲。

timeout(false).catch(err => {
    console.log(err)
})
複製程式碼

sync 關鍵字差不多了，我們再來考慮await 關鍵字，await是等待的意思，那麼它等待什麼呢，它後面跟著什麼呢？其實它後面可以放任何表示式，不過我們更多的是放一個返回promise 物件的表示式。注意await 關鍵字只能放到async 函式裡面 現在寫一個函式，讓它返回promise 物件，該函式的作用是2s 之後讓數值乘以2

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

現在再寫一個async 函式，從而可以使用await 關鍵字， await 後面放置的就是返回promise物件的一個表示式，所以它後面可以寫上 doubleAfter2seconds 函式的呼叫

async function testResult() {
    let result = await doubleAfter2seconds(30);
    console.log(result);
}
現在呼叫testResult 函式
testResult();
複製程式碼

開啟控制檯，2s 之後，輸出了60.

現在我們看看程式碼的執行過程，呼叫testResult 函式，它裡面遇到了await, await 表示等一下，程式碼就暫停到這裡，不再向下執行了，它等什麼呢？等後面的promise物件執行完畢，然後拿到promise resolve 的值並進行返回，返回值拿到之後，它繼續向下執行。具體到 我們的程式碼, 遇到await 之後，程式碼就暫停執行了， 等待doubleAfter2seconds(30) 執行完畢，doubleAfter2seconds(30) 返回的promise 開始執行，2秒 之後，promise resolve 了， 並返回了值為60， 這時await 才拿到返回值60， 然後賦值給result， 暫停結束，程式碼才開始繼續執行，執行 console.log語句。

就這一個函式，我們可能看不出async/await 的作用，如果我們要計算3個數的值，然後把得到的值進行輸出呢？

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

6秒後，控制檯輸出220, 我們可以看到，寫非同步程式碼就像寫同步程式碼一樣了，再也沒有回撥地域了。

相關文章