js中的async await

 

轉載：https://www.cnblogs.com/hanguozhi/p/10406765.html

 

JavaScript 中的 async/await 是屬於比較新的知識，在ES7中被提案在列，然而我們強大的babel粑粑已經對它進行列支持！

如果開發中使用了babel轉碼，那么就放心大膽的用吧。

在vue中使用的例子請到最下面

 

1. 何為 async 

作為新時代的玩意兒，如果對promise不了解，需要先補習一下  Promise 相關的知識。

async 顧名思義，就是異步的意思， 看上去是一個異步標識，就是告訴我們這個函數中有異步執行的代碼。

像這樣 標識：

async function getData() {

    // ......

}

這就是說getData函數里面有異步的東西，那么異步的東西是什么呢？ 其實就是個Promise，

就算你不寫， 直接return 個任何， 它都會封裝一下，讓你return的東西出現在一個Promise的resolve() ，就是這么剛！

例子:  這里  getData_1 和 getData_2 當你使用await 執行他們時， 結果是一樣的，得到的也是一樣的， 都返回一個 Promise對象， 而 getData_1 則是async封裝的Promise對象並將 '100' 放到resolve() 的參數中：resolve('100')。

 

function getData_1 () {
    return '100'
}

function getData_2 () {
    return new Promise((resolve, reject) => {
        resolve('100')
    })
}

 

2. 何為 await

await 就是等待 async執行完，才會執行后面的東西， 等待的東西是異步的，它就會阻塞當前代碼， 阻塞？？！！

別擔心， 它只能在async函數里使用， 雖然阻塞，但是是異步的。

來個例子：

 

async function getData_1 () {
    return '100'
}

function getData_2 () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('200')
        }, 2000)
    })
}

async  function run () {

    const data_1 = await getData_1();
    console.log(data_1);

    const data_2 = await getData_2();
    console.log(data_2);
}

run ();

getData_1 前面即使不聲明async，使用await也是可以的， 因為await 啥都能等！
1.如果等到的是promise， 它就把promise的resolve的參數返回，
2.如果等到的是普通東西，就直接返回這個東西。
就像上面的data_1 , 就算 getData_1 沒有async 它的結果也一樣的。


在run函數中， data_1  后的代碼需要getData_1 執行完畢才會執行， 
data_1 得出以后， data_2其實會2秒之后才會得出， 但是此時，它會等2秒，
直到data_2得出以后，才會執行后面的console

 

 

 

 

在vue中的例子：

 

export default {
    
    mounted () {
        this.run();
        console.log('step2')
    },
    methods: {
        queryData_1() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('queryData_1')
                }, 2000)
            })
        },
        queryData_2() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('queryData_2')
                }, 2000)
            })
        },
        queryData_3() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('queryData_3')
                }, 2000)
            })
        },
        async run () {
            const data_1 = await this.queryData_1();
            console.log(data_1) // 2秒后打印 data_1
            const data_2 = await this.queryData_2();
            console.log(data_2) // 4秒后打印 data_2
            const data_3 = await this.queryData_3();
            console.log(data_3) // 6秒后打印 data_3
        }
    }
}