js中的async await

 

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

 

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

若是開發中使用了babel轉碼,那麼就放心大膽的用吧。promise

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

 

1. 何爲 async 

做爲新時代的玩意兒,若是對promise不瞭解,須要先補習一下  Promise 相關的知識。異步

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

像這樣 標識:函數

async function getData() {

    // ......

}

這就是說getData函數裏面有異步的東西,那麼異步的東西是什麼呢? 其實就是個Promise,this

就算你不寫, 直接return 個任何, 它都會封裝一下,讓你return的東西出如今一個Promise的resolve() ,就是這麼剛!spa

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

 

複製代碼
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
        }
    }
}
複製代碼
相關文章
相關標籤/搜索