es7异步神器async-await

原创
2018/08/08 16:34
阅读数 2.1K

关于es7的async/await

在es6中新增了Promise对象来解决异步回调问题,使用Promise可以讲多层嵌套的回调函数展平,但是写代码和阅读依然有额外的负担。

下面这个列子讲述在ES6中得异步回调解决方案,在func1函数中返回一个Promise对象,在Promise对象中书写异步,接着就可以使用这个异步函数了,使用fn1.then(function1,function2),function1代表成功处理回调,function2代表失败处理回调

function func1(time){
    // 返回一个Promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            //异步的状态
            if(true){
                resolve({status:1,msg:'ok',data:[1,2,3]});
            }else{
                reject({status:0,msg:'error'});
            }            
        },time);
    })
}
	
var fn1 = func1(1000);
fn1.then((json)=>{
    console.log(json);
},(error)=>{
    console.log(error);
})
	

在es7中新增了 async/await 两个关键词

  • async 表示这是一个async函数,此函数需要返回一个Promise对象,
  • await 可以等待一个Promise对象的resolve,并拿到结果。await只能用在async函数里面
  • 捕捉错误:使用标准的try catch语法捕捉reject错误

下面这个例子使用了es7的async/await关键词处理异步,

  1. 同样是把异步代码写到func1函数中,但是func1函数开头需要使用async关键字来表明自己是个async函数,
  2. 接下来就可以运行这个async函数了,let res = await func1() 使用await等待func1执行完成并接受resolve的结果,await关键字会让异步堵塞,直到Promise执行完成,才会继续往下面执行

注意:await必须在async函数里面,所以必须定义了一个func2,并使用async关键词修饰为异步函数

async function func1(time){
    // 返回一个Promise对象
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            if(true){//异步的状态
                resolve({status:1,msg:'ok',data:[1,2,3]})
            }else{
                reject({status:0,msg:'error'})
            }            
        },time);
    })
}

async function func2(){
    console.log("先执行");
    let res = await func1(1000);
    console.log(res,'执行完第一个异步');
    let res2 = await func1(500);
    console.log(res2,'执行完第二个异步');
    console.log("后执行")
};

func2();

await看起来就像是同步代码,所以可以理所当然的写在for循环里,await会按照顺序阻塞执行Promise。

var sleep = function(time,index){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve({name:'张三',age:25,index:index});
        },time)
    });
};

var run = async ()=>{
    console.log('start');
    for(let i=1;i<=10;i++){
        try{
            let result = await sleep(1000,i);
            console.log(result);
        }catch(e){
            console.log(e)
        }
    }
    console.log('end');
}

run(); 

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部