最好用的ES7异步操作之asyncawait


之前的博客笔记中学习了JavaScript异步操作之Promise对象,也使用了很长时间,听说ES7给出了最新的异步操作方法async/await,现在来体验下:

在此之前,首先需要了解Promise的基本用法,具体可参考:ES6异步操作之Promise对象

这里使用setTimeout来模拟一个异步操作,代码如下:

let fn1 = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘this is fn1’);
}, time);
});
};
let fn2 = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘this is fn2’);
}, time);
});
};
let start = async function () {
console.log(‘start’);
try {
let result1 = await fn1(1000);
let result2 = await fn2(1000);
console.log(`${result1}—-${result2}`);
console.log(‘end’);
} catch (e) {
console.log(e);
}
};
start();
执行以上代码,控制台先输出了【start】,等待1s后依次输出【”this is fn1″, “this is fn2″】和【end】。

以上start方法也可以替换成下面这种形式,适合多个异步操作:

try {
console.log(‘start’);
Promise.all([fn1(1000), fn2(1000)]).then((result) => {
console.log(result);
console.log(‘end’);
});
} catch (e) {
console.log(e);
}
async/await的基本规则:

1、async 表示这是一个async函数,await只能用在这个函数里面。

2、await 表示在这里等待Promise返回结果了,再继续执行。

3、await 后面跟着的应该是一个Promise对象(如果后面跟着的不是Promise对象,而是其他类型值,那么会立刻返回结果,这样的话定义async异步函数也就失去意义了)。

async/await与Promise对象的不同之处:

1、await等待的虽然是Promise对象,但不必写.then(..),直接可以得到返回值。

2、Promise 代码的意思是:“我想执行这个操作,然后(then)在其他操作中使用它的结果”。await 有效地反转了这个意思,使得它更像:“我想要取得这个操作的结果”。这听起来更简单。