专栏首页Gcaufy的专栏async/await 带你逃离回调地狱
原创

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 条评论
登录 后参与评论

相关文章

  • WePY 在手机充值小程序中的应用与实践

    wepyjs 发布了两个月了,中间经历了很多版本更新,也慢慢开始有一些用户选择 wepyjs 作为开发框架来开发小程序,比如一些线上小程序。因此我也将手机充值小...

    Gcaufy
  • 打造小程序组件化开发框架

    这篇主要介绍在使用小程序数月之后,结合自己的开发习惯,总结出一套支持组件化的开发框架。希望对大家使用 WePY 有所帮助。

    Gcaufy
  • WePY 在小程序性能调优上做出的探究

    性能调优是一个亘古不变的话题,无论是在传统H5上还是小程序中。本文旨在介绍两点在小程序开发过程当中碰到的一些性能问题以及 WePY 的一些优化方案。

    Gcaufy
  • async 函数的含义和用法

    本文是《深入掌握 ECMAScript 6 异步编程》系列文章的最后一篇。 Generator函数的含义与用法 Thunk函数的含义与用法 co函数库的含义...

    ruanyf
  • ES6的异步编程之async

    异步操作是 JavaScript 编程的麻烦事,麻烦到一直有人提出各种各样的方案,试图解决这个问题。

    javascript.shop
  • 页面点击特效源码解析

    这次给大家分享一个被广泛应用在个人网站中的骚骚的效果,就是鼠标左键点击出现小心心,来看下效果 :

    石璞东
  • 命名函数表达式

    好文章,可惜中文译文已经无法访问了。不过在cssrain上找到一篇:www.cssrain.cn/demo/named%20function%20express...

    meteoric
  • webpack2 的 tree-shaking 好用吗?

    代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当...

    IMWeb前端团队
  • 微生活时光机:去项目中挖掘JS模块化简史

    让我们把眼光投向微生活各个时期项目中的 JS 代码,看一看时代在其中投下的烙印,也许只是管中窥豹、走马观花,但通过其组织形式的异同,或可一瞥 JS 模块化层面的...

    江米小枣
  • 数据(Data)和信息(Information)常识(3)(4)

    百度百科里,数据是一个多义词(共4个义项)▪计算机术语▪汉语词语▪综合性云数据平台▪杂志。其中,

    秦陇纪

扫码关注云+社区

领取腾讯云代金券