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
        }
    }
}