js中的async await

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