async [ə'zɪŋk] 函数

最新推荐文章于 2024-12-11 00:27:09 发布

weixin_33816300

最新推荐文章于 2024-12-11 00:27:09 发布

阅读量73

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/crazycode2/p/6682252.html

本文介绍了ES7中async函数的基本概念及其用法，通过多个示例展示了如何使用async函数简化异步操作流程，并讨论了async函数与Promise结合使用的场景。

ES7提供了async函数，使得异步操作变得更加方便。async函数是什么？一句话，async函数就是Generator函数的语法糖。

例1：

var asyncFun = async function () {
　　var f1 = await function() {
　　　　console.log('aaaaaa');
　　}();
　　var f2 = await function () {
　　　　console.log('bbbbbb');
　　}();
　　console.log('执行完毕');
};

asyncFun();

实例：

结果：

例2：

let asyncFun1 = async function(){
　　console.log('aaaaaa');
　　await Promise.reject('出错啦');  // 抛出例外，直接到例外处处理
　　return '第1';
}

let asyncFun2 = async function(data){
　　console.log('bbbbbb');
　　console.log('收到参数：' + data);
　　return '第2';
}

asyncFun1().then(asyncFun2)
.then(function(data){
　　console.log('data:' + data);
})
.catch(function(error){
　　console.log('end,error:' + error);
});

实例：

结果：

实例：

结果：

例3：异步处理(最彻底的解决方案)

async函数返回的Promise对象，必须等到内部所有 await 命令的Promise对象执行完，才会发生状态改变。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

let asyncFun1 = async function(){
　　return new Promise(function(resolve,reject){
　　　　setTimeout(function(){
　　　　　　console.log('aaaaaa');
　　　　　　resolve(123);
　　　　},2000);
　　});
};

let asyncFun2 = async function(data){
　　return new Promise(function(resolve,reject){
　　　　setTimeout(function(){
　　　　　　console.log('bbb收到数据：' + data);
　　　　　　resolve(456);
　　　　},1000);
　　});
};

asyncFun1().then(asyncFun2)
.then(function(data){
　　console.log('data:' + data);
})
.catch(function(error){
　　console.log('end,error:' + error);
});

实例：