笔记：终极异步操作解决方案-async 函数

async

async是 ES7 才有的与异步操作有关的关键字。

用法

如果有多个异步操作，并每个异步操作需要获得上一个异步操作的执行结果才继续执行，async函数则可以清晰明了的表达他们的关系且用法简单，使用await操作符即可。

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

代码

由于目前一些浏览器不支持async函数，所以简单搭建了一个vue工程去实现，也当看下在vue如何使用吧。

export default {
  name: 'app',
  components: {
    HelloWorld
  },
    created(){
        this.init()
    },
    methods:{
        getDataA() {
            return new Promise(function(resolve){
                setTimeout(function(){
                    resolve("A");
                },3000);

            })
        },
        getDataB(dataA){
            return new Promise(function(resolve){
                setTimeout(function(){
                    window.console.log(dataA);
                    resolve("B");
                },2000);

            })
        },
        getDataC(dataB){
            return new Promise(function(resolve){
                setTimeout(function(){
                    window.console.log(dataB);
                    resolve("C");
                },1000);

            })
        },
        async init(){
           var a =  await this.getDataA();
           var b =  await this.getDataB(a);
           var c =  await this.getDataC(b);
           window.console.log(c)
           window.console.log("初始化完成")
        }
    }
}
</script>

需要注意的是，不要在setTimeout外写resolve(),否则你会发现，await 不起作用，哈哈。

getDataA() {
            return new Promise(function(resolve){
                setTimeout(function(){
                },3000);
                  resolve("A");//放这里会马上执行完返回promise对象不需要等待3S
            })
        },

await针对所跟不同表达式的处理方式：

Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。非 Promise 对象：直接返回对应的值。