异步终极处理方案之async

在ES6中新增了promise来处理异步操作，这种方案将以前的嵌套式异步处理方式改为平铺式，方便代码的维护和管理，随着ES7的到来，async给我们带了更好的代码编写体验。本文先从promise讲起。

##使用promise进行异步处理

new Promise(function(yes, no) {
    $('div').animate({ width: 200 }, 1000, function() {
        yes();
    });
})
.then(function() {
    return new Promise(function(yes, no) {
        $('div').animate({ height: 200 }, 1000, function() {
            yes();
        });
    });
})

//这里在使用Promise创建出来的实例的时候，可以将这一部分进行封装

function animate(selector, style, time) {
    return new Promise(function(yes, no) {
        $(selector).animate(style, time, function() {
            yes();
        });
    });
}

##使用asnyc进行异步处理

//先将实例对象进行封装

function animate(selector,obj,time){
    return new Promise(function(yes,no){
        $(selector).animate(obj,time,function(){
                yes();
          })
    })
}

async function run(){
    await animate("div",{width:400},500);
    await animate("div",{marginTop:300},500);
}
  run().catch(=>{console.log(404 Error)})

##检错

-当调用no()时，可以使用catch()来进行捕获