js中的async与await

2019年02月17日Web前端0

前期项目中用到了es7中的async和await，也来总结下自己的理解吧。

一、是什么

async表示异步，而await可以看作async wait。个人对async与await的简单理解就是，我们可以用同步的方式去书写异步代码。当然，这也都是基于promise的。

二、比对

提到异步，不得不提到promise，因此，我们来对比下两者写法的区别。

promise

一个很简单的例子，

new Promise(function(resolve, reject) {
    resolve(11);
}).then(function(data) {
    console.log(data);
}).then(function() {
    console.log('hiiii');
});

如果用await或者async该如何写呢？

await/async

function getA() {
    return new Promise(function(resolve) {
        resolve(11);
    });
}
function getB() {
    return new Promise(function(resolve) {
        resolve('hiiii');
    });
}
(async function () {
    let data = await getA(),
        dataB = await getB();
    console.log(data, dataB);
})();

乍一看，用async的改写后，代码量还上升了，但在实际调用的函数内部时，关系很明显，不像promise嵌套，不太容易看清。

三、简单使用

首先，async只能用于函数上，表明这是一个async函数，而await只能在被声明为async的函数内部使用。

还是刚才那个例子，当执行到 await getA()时，会先等待getA执行完成后，才会向下执行，而执行到await getB()时也是如此。

其他详细的可以查看：http://www.ruanyifeng.com/blog/2015/05/async.html。

ES7

目录