7

async/await异步

Async/Await应该是目前最简单的异步方案了,ES7 中新增了 async/await 两个关键词。async 可以声明一个异步函数,此函数需要返回一个 Promise 对象。await 可以等待一个 Promise 对象 resolve,并拿到结果。 一个栗子:

先看一下同步状态下

同步

console.log(1);
        console.log(2);
        setTimeout(function(){
            console.log(3)
        },3000);
        console.log(4);
        console.log(5)

上边的打印结果大家想必都知道,这是同步状态下的执行顺序

在看一个例子

function p1(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("p1_2000");
                    resolve()
                },3000)
            })
        }
 function p2(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("p2_2000");
                    resolve()
                },2000)
            })
        }
 console.log("start");
 p1();
 p2();
 console.log(end)
 //start 
 //end
 //p2_2000
 //p1_3000

咱们想做的是让他按这个顺序执行下来咱们就要用到async、await

看代码

 function p1(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("p1_3000");
                    resolve()
                },3000)
            })
           
        }
        function p2(){
            return new Promise(function(resolve,reject){
                setTimeout(function(){
                    console.log("p2_2000");
                    resolve()
                },2000)
            })
        }
        
        //await 只能出现在异步函数里
         async function shi(){
            console.log("start")
            await p1();
            await p2();
            console.log("end")
         }
         
         p3=shi();
         p3.then(function(){
             console.log("结束")
         })

上边函数执行下来就是按照那个顺序下来的,大家记住await 只能出现在异步函数里!配套使用


青石巷
259 声望10 粉丝

js/jq/node/es6/vue/react/Angular