javascript 学习: async await

async/await是在 ECMAScript 2017定义的,而Node 7.6开始正式支持aync/await,现在LTS版本是8.x,以下不做说明都是在此环境。

async

async有三种定义方式。

async function

先看一个定义async function的例子:

function resolveAfter2Seconds() {
    return new Promise(resolve => {
        setTimeout(() => {
        resolve('resolved');
        }, 2000);
    });
}
async function asyncCall() {
    console.log('calling');
    var result = await resolveAfter2Seconds();
    console.log(result);
    // expected output: "resolved"
}
asyncCall();

如上定义了一个名为asyncCall的async function。当async被调用的时候,返回Promise,执行完毕,要么resolve一个值,要么 reject一个错误。之所以添加 await是为了等待Promise的执行结果,然后再只想async函数内剩余的部分,这才会输出’resolved’。

async function expression

有了上面的经验,我们来看表达式的定义方式:

function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
        setTimeout(() => {
        resolve(x);
        }, 2000);
    });
};


var add = async function(x) { // async function expression assigned to a variable
    var a = await resolveAfter2Seconds(20);
    var b = await resolveAfter2Seconds(30);
    return x + a + b;
};

add(10).then(v => {
console.log(v);  // prints 60 after 4 seconds.
});

和 async function类似,这里只不过是把function付给了一个变量。注意最后输出是要延迟4秒,因为使用了 await后是顺序同步执行的。如果按下面的写法,输出则延迟2秒:

var add = async function(x) { // async function expression assigned to a variable
    var a =  resolveAfter2Seconds(20);
    var b =  resolveAfter2Seconds(30);
    return x + await a + await b;
};

AsyncFunction对象

使用AsyncFunction构造函数也可以声明一个async function,不过应该很少会直接这么用。

function resolveAfter2Seconds(x) {
    return new Promise(resolve => {
        setTimeout(() => {
        resolve(x);
        }, 2000);
    });
}

var AsyncFunction = Object.getPrototypeOf(async function(){}).constructor

var a = new AsyncFunction('a', 
                        'b', 
                        'return await resolveAfter2Seconds(a) + await resolveAfter2Seconds(b);');

a(10, 20).then(v => {
    console.log(v); // prints 30 after 4 seconds
});

await

await 是为async而生:只能出现在async函数体内,用于等待 Promise。

Promise

前面出现的Promise是javascript中用于异步编程的一种方案,这里简单的介绍下基本概念。
Promise对象代表一个异步操作的最终状态(成功或失败),以及相应状态下的结果。

var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'foo');
});
console.log(promise1);

它的定义:new Promise( /* executor */ function(resolve, reject) { ... } );, executor 会立即执行,resolve和reject函数只会执行其中之一。

const myFirstPromise = new Promise((resolve, reject) => {
// do something asynchronous which eventually calls either:
//
//   resolve(someValue); // fulfilled
// or
//   reject("failure reason"); // rejected
});

简单的说,如果一切顺利就resolve结果,不然就reject一个reason。

结合Promise,和上述async/await,个人理解async/await类似对Promise的语法糖。通过对异步函数的控制,实现顺序执行的控制流。

参考资料

牢记这些基本概念,夯实基础,bug就没有那么容易错过。

async function
await
Promise

Comments