Async/await

wade

发布于 2020-04-24 17:14:23

5730

发布于 2020-04-24 17:14:23

文章被收录于专栏：coding个人笔记

JavaScript的异步一直是JavaScript的一个复杂的事，从回调到Promise再到Generator，直到async/await，都是为了解决异步操作带来的麻烦。

先说说async，async是异步的意思，异步就表示不会阻塞代码执行，async写在一个函数声明之前，看个简单的例子：

async function fn() {
    console.log('async方法');
}
console.log('不会阻塞');
console.log('不会阻塞');执行了，所以async是异步的。但是加了async返回的是什么，我们可以console.log(fn())得到：
Promise {<resolved>: undefined}
所以async返回了一个Promise。之前我们讲过Promise，那么我们可以直接调用：
async function fn() {
    return '成功resolve';
}
fn(true).then((res) => {
    console.log(res);
});

这样看来，async好像只是用来生成一个Promise对象，没有什么用，那么这时候就要说一下await了，这两个一般会配套使用，一起出现。需要注意， await 关键字仅仅在 async function中有效。如果在 async function函数体外使用 await ，你只会得到一个语法错误（SyntaxError）。

await会使 async 函数暂停执行，等待 Promise 的结果出来，然后恢复async函数的执行并返回解析值（resolved）。所以await之后需要的是一个Promise对象。

var pro1 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('正在执行.....');
        resolve('成功1');
        console.log('执行完毕.....');
    }, 2000);
});

var pro2 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('正在执行.....');
        reject('成功2');
        console.log('执行完毕.....');
    }, 4000);
});

async function fn() {
    var res1 = await pro1;
    console.log(res1);
    var res2 = await pro2;
    console.log(res2);
}

fn();

我们可以看见，Promise对象里面很早就执行了，但是await之后一定会等到Promise成功返回才会向下执行。其中要是有一个返回reject的话也不会向下执行。

这样看起来跟Promise.then很像，但是两者不能混淆：

async function fn() {
    var i = 0;
    setInterval(function () {
        console.log(i++);
    }, 1000);
    var res1 = await pro1;
    console.log(res1);
    var res2 = await pro2;
    console.log(res2);
}

我们可以知道两个计时器是同时调用的，但是第二个计时器还是会在await之后输出，但是这两个计时器是在同一个事件队列进行，时间是根据最耗时的那个方法。而then方法则不是：

var i = 0;
setInterval(function () {
    console.log(i++)
}, 1000);
new Promise(function(resolve, reject){
    setTimeout(function () {
        resolve('star');
    }, 2000);
}).then(function(data){
    return new Promise(function(resolve, reject){
        setTimeout(function () {
            resolve('two result');
        }, 4000);
    });
}).then(function (value) {
    console.log(value);
}).catch(function(err){
    console.log('err: ', err);
});

到最后的输出结果用了6秒，所以两者是不同的。

看起来async/await跟Promise差不多，确实是，在不考虑太多的情况下，使用Promise反而更直接，但是在太多耗时很久的异步下，async/await会是更好的选择，语义也更清晰。

当然，在平时业务开发，很少用到这些，但是不保证会用到的时候。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-11-21，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js