ES6 21.异步async

要点：async语法

一、async语法

1.async也是处理异步的，它是对Promise的扩展，也让异步更加方便

2.优势：async 是基于Promise的，虽然是异步操作，但看上去像同步

3.   async 的基本语法：

let p1=new Promise((resolve,reject)=>{
        setTimeout(()=>{
           resolve('1.异步');
        },3500);
})

let p2=new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('2.异步');
        },800);
})

let p3=new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('3.异步');
        },1500);
})

// 创建一个async函数，执行异步操作
// await 关键字 :等待异步执行完毕后回调
let as = async() =>{
    let result=await p2;  
    console.log(result);
}
// 执行async函数
as();  //2.异步

 

ps: 上面语法，用ES5 过渡一下，为

async function as(){
    let result=await p3;  
    console.log(result);
}
as();  //3.异步
let as =async function(){}
let obj={async as(){}}  //也支持对象方式

 

4.如果有三个异步需要操作列队输出，我们用async语法来处理一下

// 多个异步，按输出顺序加载，没有then，清晰很多
async function as(){
    let r1 =await p1;
        r2 =await p2;
        r3 =await p3;
        console.log(r1);
        console.log(r2);
        console.log(r3);
}
as();

 

ps:  1.await 关键字只能在async函数内部，否则不可识别

       2.async语义和清晰度都得到了很大提升，更像同步代码

// 批量异步列队，类似Promise.all()
async function as(){
    let all=[await p1,await p2,await p3];
    console.log(all);  //[ '1.异步', '2.异步', '3.异步' ]
}
as();

 

5.async函数如果设置了返回值，这个值是Promise对象

// 返回值是Promise对象
// 相当于Promise.resolve()
async function as(){
    return 'hello,async!';
}
as().then(value=>{
    console.log(value);  //hello,async!
})

 

ps:如果return await p1 ,这种，会导致提前输出 pending 状态 ，还是需要 then

async function as(){
    return await p1;
}
console.log(as());  //Promise { <pending> }  得到的是Promise对象的pending状态   
as().then(value=>{   //这里还需要then
    console.log(value);  //1.异步
})