async與await實現異步操作的同步化

async與await實現異步操作的同步化

一.async修飾方法

　　async這個單詞從字面意思來理解就是異步的意思，async用來修飾方法，那么該方法就是一個異步方法，如下面的案例：

(function() {
    async function asyncFunc() {
        setTimeout(() => {
            console.log('invoked after 1 second');
        }, 1000)
    }
    asyncFunc();
    console.log('output');
})()

在chrome中的輸出結果如下:

 

async只是Promise的語法糖, 為了驗證這個標題，我們舉如下兩個案例：

A.async返回正確的結果

(function() {
    async function asyncFunc() {
        return 'success'
    }
    let result = asyncFunc();
    console.log(result);
})()

chrome中執行的結果如下：

B.async拋出異常

(function() {
    async function asyncFunc() {
        throw new Error('error')
    }
    let result = asyncFunc();
    result.catch(error => {
        console.log('=======');
    })
})()

chrome中執行的結果如下：

二.await的用法

　　await從字面的意思就是 "等待"，只能用在async修飾的方法中，通常用在返回Promise對象之前，並且返回值為Promise中resolve或者reject方法中返回的值，如下代碼所示：

(async function() {
    async function getValue() {
        let prom = await new Promise((resolve, reject) => {
            setTimeout(() => {
                if(Math.random() > 0.5) {
                    resolve('gt 0.5')
                }else {
                    reject('let 0.5')
                }
            }, 2000) 
        })
        return prom;
    }
    
    let value = await getValue();
    console.log(value);
})()

chrome中執行的結果如下：