ES6 21.异步async

2021/11/27 23:14:50

本文主要是介绍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.异步
})


这篇关于ES6 21.异步async的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程