async/await 带你逃离回调地狱

回调地狱

一个段子

以前有个段子讲一个小偷,潜入某神秘机构,偷出代码最后一页,打开一看:

                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

什么?这只是段子不是现实?那看看现实版快滴打车的源代码

因为Javascript的异步特性,每个开发者都无法避免会碰到一些callback hell,同时在代码的迭代过程当中因为这样一些callback hell导致代码越来越不可维护。尤其是当回调过程中去参杂一些同步逻辑判断,那都是迭代过程中的代码杀手。

一个例子

产品:我们需要从服务器取数据,然后再xxx

开发:搞定

function myFunc() {
	getServerData(function () {
		// Do something
	});
}

产品:我们要插个小功能,取另一分数据,然后再xxx

开发:ok

function myFunc() {
	getServerData(function (d1) {
		getServerData2(function (d2) {
			// Do something
		});
	});
}

产品:需要在取第二份数据前加个小判断,部分用户不需要取第二份数据。

开发:改起来会有点麻烦。

产品:不就加个条件判断么?怎么会麻烦。

开发:...

function myFunc() {
	getServerData(function (d1) {
	    var doSomething = function () {
	        // Do something
	    }
	    if (condition) {
	        getServerData2(function (d2) {
	            doSomething();
	        });
	    } else {
	        doSomething();
	    }
	});
}

产品:再帮我加一个很小的功能。

开发:...

解套平坑

解决方案

其实JavaScript 一直在避免回调地狱的问题做出努力,比如async.jsthen.js包括ES6下的Promiseco generator等等。这里不去细讲,想进一步了解这些解决方案的差异的话可以看尤雨溪大神在直呼上的回答:

nodejs异步控制「co、async、Q 、『es6原生promise』、then.js、bluebird」有何优缺点?最爱哪个?哪个简单?

Async Functions

这里要讲的是一种更平滑更接近同步体验的一种方案Async Functions

async/await语法最早是在C#5.0中引入,引入后引起了一致好评,因此使用异步编程最多的JavaScript迫不及待的向ES2016(ES7)提交了草案,但因为某些原因,呼声很高的Async Functions并没能赶上ES2016的deadline,估计最晚会在ES2017中加入到正式规范,但是并不妨碍我们在Babel的帮助下在ES5的环境下使用它。

先看看在使用Async Functions的情况下,上面产品需求的代码开发将会怎么实现:

async function myFunc () {
    let d1, d2;
    d1 = await getServerData();
    if (condition) {
        d2 = await getServerData2();
    }
    // Do something
}

加入了神奇的asyncawait关键字后,上面的异步回调完全以同步的方式展现,也不用去担心产品需要再在某个回调中插入流程了而且导致代码结构大面积改动了。

Babel实现方式

babel编译Async Functions需要transform-async-to-generator插件,参考官方文档安装。

基于ES6

写上测试代码src/index.js

function sleep(time) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(Math.random() * 10 >> 0);
        }, time * 1000);
    });
}

async function main () {
    console.log('Random is: ');
    let d = await sleep(2);
    console.log(d);
    return d;
}

let rst = main();

babel配置文件.babelrc如下:

{
  "plugins": ["transform-async-to-generator"]
}

执行命令编译:

babel src -d dist

编译后主要代码如下:

let main = (() => {
    var _ref = _asyncToGenerator(function* () {
        console.log('Random is: ');
        let d = yield sleep(2);
        console.log(d);
        return d;
    });

    return function main() {
        return _ref.apply(this, arguments);
    };
})();

编译后的代码和co很相似,可以理解为基于ES6的PromiseGenerator的语法糖。

基于ES5

因此要进一步运行在浏览器环境下我们还需要使用ES2015 presetstransform-runtime插件。

babel配置文件.babelrc如下:

{
  "presets": ["es2015"],
  "plugins": ["transform-async-to-generator", "transform-runtime"]
}

编译后关键代码如下:

var main = function () {
    var _ref = (0, _asyncToGenerator3.default)(_regenerator2.default.mark(function _callee() {
        var d;
        return _regenerator2.default.wrap(function _callee$(_context) {
            while (1) {
                switch (_context.prev = _context.next) {
                    case 0:
                        console.log('Random is: ');
                        _context.next = 3;
                        return sleep(2);

                    case 3:
                        d = _context.sent;

                        console.log(d);
                        return _context.abrupt('return', d);

                    case 6:
                    case 'end':
                        return _context.stop();
                }
            }
        }, _callee, this);
    }));

    return function main() {
        return _ref.apply(this, arguments);
    };
}();

可以看到编译后代码是由状态机实现,并无任何ES5下不兼容代码。

使用与实践

错误捕捉

在使用Promise时,我们有resolvereject,如下:

function doSth() {
	promise().then(d => console.log(d)).cache(e => console.error(e));
}

Async Functions中写法如下:

async doSth() {
	try {
		let d = await promise();
		console.log(d);
	} catch (e) {
		console.error(e);
	}
}

async是使用throw相当于Promise中的reject:

async function hello() {
	await sleep(5);
	throw Error('err');
}
let promise = hello();
promise.then(d => console.log(d)).catch(e => console.log(e));
// 输出err

返回值

Async函数中, 返回值永远是Promise

async function hello() {
	await sleep(5);
	return 'world';
}
let promise = hello();
promise.then(d => console.log(d));
// 输出world

循环中使用async

因为同步非阻塞的表现,所以在循环中使用async将会比以前的代码更易读明了。

async function getResponseSize(url) {
	const response = await fetch(url);
	const reader = response.body.getReader();
	let result = await reader.read();
	let total = 0;
	
	while (!result.done) {
		const value = result.value;
		total += value.length;
		console.log('Received chunk', value);
		result = await reader.read();
	}

	return total;
}

匿名函数中使用

同样在匿名函数中可以一样去使用async关键字,如下:

const promises = urls.map(async url => {
	const p = await fetch(url);
	return p;
});

await连续使用问题

代码一:

async function foo() {
	await sleep(3);
	await sleep(3);
	return 'done';
}

运行完需要6秒。

代码二:

async function bar() {
	const s1 = sleep(3);
	const s2 = sleep(3);
	await s1;
	await s2;
	return 'done';
}

代码二运行完却只要3秒,因为sleep是在同一时间运行的。

结束语:async/await 无疑是现阶段最好的异步回调同步化的解决方案,不过因为暂时没有纳入ES2016规范,而且主流浏览器的支持的不足,所以我们只能通过使用babel尝鲜。但是我们也可以借此看到未来JavaScript在回调问题上的主流解决方案。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏令仔很忙

设计模式六大原则——里氏替换原则(LSP)

       里氏替换原则(LSP,Liskov Substitution Principle)是关于继承机制的原则,是实现开放封闭原则的具体规范,违反了里氏替...

601
来自专栏腾讯社交用户体验设计

玩转HTML5移动页面(动效篇)- 腾讯ISUX

1653
来自专栏贺贺的前端工程师之路

Angular2、Ionic、TypeScript、es6的关系?

其实对于这3个东西来说,我根本搞不清楚他们之间的关系,突然之间意识到,自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的,自己还是什么都不会,a...

903
来自专栏noteless

设计模式之装饰器模式 Decorator 包装模式 wrapper 优点 缺点 使用场景 以及简化方法

如果是在代码的世界里面,你怎么描述:  顾客 购买 手抓饼     这一行为呢?  

1434
来自专栏君赏技术博客

关于AutoLayout原生Content Hugging和Content Resistance小研究

之前就知道系统AutoLayout有拉伸和挤压的设置,平时用Masonry设置优先级也是可以解决这样的挤压和压缩的问题。但是设置Masonry的优先级自己一直设...

864
来自专栏撸码那些事

【抽象那些事】命令式抽象

1173
来自专栏拂晓风起

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

2385
来自专栏宋凯伦的技术小栈

测试驱动开发(TDD)及测试框架Mocha.js入门学习

  组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发...

2617
来自专栏数据小魔方

R语言可视化——REmap动态地图

今天开始,要跟着大家学习一个新的可视化R包——REmap包。 说起来,这个包要归功于百度的可视化开源项目——echarts,它是国内为数不多的高水平开源可视化j...

4736
来自专栏kevindroid

JNI简介

985

扫码关注云+社区