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 删除。

编辑于

我来说两句

1 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

将淘宝数据包导入自己的商城系统

淘宝网有一个淘宝助理,可以方便的将淘宝店的商品资源导出成csv格式的数据包。很多商城系统为了能快速输入商品,都会要求开发者能最大限度的利用淘宝数据包直接导入产品...

1879
来自专栏木东居士的专栏

程序员该如何管理后宫:皇上选妃(代理模式)

1755
来自专栏欧阳大哥的轮子

HTTP协议中的401授权认证机制在iOS上的实现

我们在用NSURLConnection或者NSURLSession进行HTTP请求时,有些URL因为需要授权认证而返回401,因此客户端需要在HTTP的请求头中...

613
来自专栏醒者呆

缘分一道桥——桥接模式

桥接模式是一种很实用的结构型设计模式,它是将抽象部分与它的实现部分分离,使他们都可以独立地变化。 首先介绍一个标准的桥接模式的使用场景: 如果我想买汽车Ca...

3517
来自专栏Java Edge

JDK7新特性概览JSR292:支持动态类型语言(InvokeDynamic)G1 垃圾回收器(Garbage-First Collector)JSR334:小的语言改进(Project Coin)核

37810
来自专栏Android机动车

玩转全新的 Android 8.0 Oreo 后台策略

我们永远都需要流畅的用户体验,但很遗憾我们手上的硬件资源却总是和这个需求唱反调。这也是 Android 平台不断努力的切入点——从 API 26开始,Andro...

1112
来自专栏Flutter入门到实战

最全的BAT大厂面试题整理

版权声明:本文为博主原创文章,未经博主允许不得转载。https://www.jianshu.com/p/c70989bd5f29

672
来自专栏FreeBuf

逆向分析智能窗帘频射协议

近来我热衷于对家庭自动化设备的破解,然后将它们添加到我的Homekit集成包之中。这事情要从几个月前说起,当时我爸订购了大批量的RAEX 433MHz射频电动窗...

2715
来自专栏林欣哲

SpringBoot的微信点餐系统后台开发要点

项目设计 角色划分 买家(微信端) 卖家(PC端) 功能分析 ? 关系 ? 部署架构 ? 架构和基础框架 演进:单一应用架构->垂直应用架构->分布式服务架构-...

1.5K39
来自专栏一名合格java开发的自我修养

IT咨询顾问:一次吐血的项目救火

  年后的一个合作公司上线了一个子业务系统,对接公司内部的单点系统。我收到该公司的技术咨询:项目启动后没有规律的突然无法登录了,重新启动后,登录一断时间后又无法...

732

扫码关注云+社区