一、Promise并非完美

我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题、硬编码回调执行顺序造成的“回调金字塔”问题,无疑大大提高了前端开发体验。但有了Promise就能完美地解决异步问题了吗?并没有。

首先,Promise仍然需要通过then方法注册回调,虽然只有一层,但沿着Promise链一长串写下来,还是有些让人头晕。

更大的问题在于Promise的错误处理比较麻烦,因为Promise链中抛出的错误会一直传到链尾,但在链尾捕获的错误却不一定清楚来源。而且,链中抛出的错误会fail掉后面的整个Promise链,如果要在链中及时捕获并处理错误,就需要给每个Promise注册一个错误处理回调。噢,又是一堆回调!

那么最理想的异步写法是怎样的呢?像同步语句那样直观地按顺序执行,却又不会阻塞主线程,最好还能用try-catch直接捕捉抛出的错误。也就是说,“化异步为同步”!

痴心妄想?

我在第一话里提到,异步和同步之间的鸿沟在于:同步语句的执行时机是“现在”,而异步语句的执行时机在“未来”。为了填平鸿沟,如果一个异步操作要写成同步的形式,那么同步代码就必须有“等待”的能力,等到“未来”变成“现在”的那一刻,再继续执行后面的语句。

在不阻塞主线程的前提下,这可能吗?

听起来不太可能。幸好,Generator(生成器)为JS带来了这种超能力!

二、“暂停/继续”魔法

ES6引入的新特性中,Generator可能是其中最强大也最难理解的之一,即使看了阮一峰老师列举的大量示例代码,知道了它的全部API,也仍是不得要领,这是因为Generator的行为方式突破了我们所熟知的JS运行规则。可一旦掌握了它,它就能赋予我们巨大的能量,极大地提升代码质量、开发效率,以及FEer的幸福指数。

我们先来简单回顾一下,ES6之前的JS运行规则是怎样的呢?

1. JS是单线程执行,只有一个主线程

2. 宿主环境提供了一个事件队列,随着事件被触发,相应的回调函数被放入队列,排队等待执行

3. 函数内的代码从上到下顺序执行;如果遇到函数调用,就先进入被调用的函数执行,待其返回后,用返回值替代函数调用语句,然后继续顺序执行

对于一个FEer来说,日常开发中理解到这个程度已经够用了,直到他尝试使用Generator……

function* gen() {
let count = 0;
while(true) {
let msg = yield ++count;
console.log(msg);
}
} let iter = gen();
console.log(iter.next().value);
//
console.log(iter.next('magic').value);
// 'magic'
//

等等,gen明明是个function,执行它时却不执行里面的代码,而是返回一个Iterator对象?代码执行到yield处竟然可以暂停?暂停以后,竟然可以恢复继续执行?说好的单线程呢?另外,暂停/恢复执行时,还可以传出/传入数据?怎么肥四?难道ES6对JS做了什么魔改?

其实Generator并没有改变JS运行的基本规则,不过套用上面的naive JS观已经不足以解释其实现逻辑了,是时候掏出长年在书架上吃灰的计算机基础,重温那些考完试就忘掉的知识。

三、法力的秘密——栈与堆

(注:这个部分包含了大量的个人理解,未必准确,欢迎指教)

理解Generator的关键点在于理解函数执行时,内存里发生了什么

一个JS程序的内存分为代码区、栈区、堆区和队列区,从MDN借图一张以说明(图中没有画出代码区):

队列(Queue)就是FEer所熟知的事件循环队列。

代码区保存着全部JS源代码被引擎编译成的机器码(以V8为例)。

栈(stack)保存着每个函数执行所需的上下文,一个栈元素被称为一个栈帧,一个栈帧对应一个函数。

对于引用类型的数据,在栈帧里只保存引用,而真正的数据存放在堆(Heap)里。堆与栈不同的是,栈内存由JS引擎自动管理,入栈时分配空间,出栈时回收,非常清楚明了;而堆是程序员通过new操作符手动向操作系统申请的内存空间(当然,用字面量语法创建对象也算),何时该回收没那么明晰,所以需要一套垃圾收集(GC)算法来专门做这件事。

扯了一堆预备知识,终于可以回到Generator的正题了:

普通函数在被调用时,JS引擎会创建一个栈帧,在里面准备好局部变量函数参数临时值代码执行的位置(也就是说这个函数的第一行对应到代码区里的第几行机器码),在当前栈帧里设置好返回位置,然后将新帧压入栈顶。待函数执行结束后,这个栈帧将被弹出栈然后销毁,返回值会被传给上一个栈帧。

当执行到yield语句时,Generator的栈帧同样会被弹出栈外,但Generator在这里耍了个花招——它在堆里保存了栈帧的引用(或拷贝)!这样当iter.next方法被调用时,JS引擎便不会重新创建一个栈帧,而是把堆里的栈帧直接入栈。因为栈帧里保存了函数执行所需的全部上下文以及当前执行的位置,所以当这一切都被恢复如初之时,就好像程序从原本暂停的地方继续向前执行了。

而因为每次yield和iter.next都对应一次出栈和入栈,所以可以直接利用已有的栈机制,实现值的传出和传入

这就是Generator魔法背后的秘密!

四、终极方案:Promise+Generator

Generator的这种特性对于异步来说,意味着什么呢?

意味着,我们终于获得了一种在不阻塞主线程的前提下实现“同步等待”的方法!

为便于说明,先上一段直接使用回调的代码:

let it = gen();  // 获得迭代器

function request() {
ajax({
url: 'www.someurl.com',
onSuccess(res){
it.next(res); // 恢复Generator运行,同时向其中塞入异步返回的结果
}
});
} function* gen() {
let response = yield request();
console.log(response.text);
} it.next(); // 启动Generator

注意let response = yield request()这行代码,是不是很有同步的感觉?就是这个Feel!

我们来仔细分析下这段代码是如何运行的。首先,最后一行it.next()使得Generator内部的代码从头开始执行,执行到yield语句时,暂停,此时可以把yield想象成return,Generator的栈帧需要被弹出,会先计算yield右边的表达式,即执行request函数调用,以获得用于返回给上一级栈帧的值。当然request函数没有返回值,但它发送了一个异步ajax请求,并注册了一个onSuccess回调,表示在请求返回结果时,恢复Generator的栈帧并继续运行代码,并把结果作为参数塞给Generator,准确地说是塞到yield所在的地方,这样response变量就获得了ajax的返回值。

可以看出,这里yield的功能设计得非常巧妙,好像它可以“赋值”给response。

更妙的是,迭代器不但可以.next,还可以.throw,即把错误也抛入Generator,让后者来处理。也就是说,在Generator里使用try-catch语句捕获异步错误,不再是梦!

先别急着激动,上面的代码还是too young too simple,要真正发挥Generator处理异步的威力,还得结合他的好兄弟——Promise一起上阵。代码如下:

function request() {  // 此处的request返回的是一个Promise
return new Promise((resolve, reject) => {
ajax({
url: 'www.someurl.com',
onSuccess(res) {
resolve(res);
},
onFail(err) {
reject(err);
}
});
});
} let it = gen();
let p = it.next().value; // p是yield返回的Promise
p.then(res => it.next(res),
err => it.throw(err) // 发生错误时,将错误抛入生成器
); function* gen() {
try {
let response = yield request();
console.log(response.text);
} catch (error) {
console.log('Ooops, ', error.message); // 可以捕获Promise抛进来的错误!
}
}

这种写法完美结合了Promise和Generator的优点,可以说是FEer们梦寐以求的超级武器。

但聪明的你一定看得出来,这种写法套路非常固定,当Promise对象一多时,就需要写许多类似于p.then(res => ...., err => ...)这样的重复语句,所以人们为了偷懒,就把这种套路给提炼成了一个更加精简的语法,那就是传说中的async/await

async funtion fetch() {
try {
let response = await request(); // request定义同上一端段示例代码
console.log(response.text);
} catch (error) {
console.log('Ooops, ', error.message);
}
} fetch();

这这这。。。就靠拢同步风格的程度而言,我觉得async/await已经到了登峰造极的地步~

顺便说一句,著名Node.js框架Koa2正是要求中间件使用这种写法,足见其强大和可爱。

前端们,擦亮手中的新锐武器,准备迎接来自异步的高难度挑战吧!

写在最后

距离发表第二话(Promise)已经过去大半年了,原本设想的终章——第三话(Generator),却迟迟未能动笔,因为笔者一直没能弄懂Generator这个行为怪异的家伙究竟是如何存在于JS世界的,又如何成为“回调地狱”的终极解决方案?直到回头弥补了一些计算机基础知识,才最终突破了理解上的障碍,把Generator的来龙去脉想清楚,从而敢应用到实际工作中。所以说,基础是很重要的,这是永不过时的真理。前端发展非常迅速,框架、工具日新月异,只有基础扎实,才能从容应对,任他风起云涌,我自稳坐钓鱼台。

漫话JavaScript与异步·第三话——Generator:化异步为同步的更多相关文章

  1. EasyUI tree 异步树与采用扁平化实现的同步树

    所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips:   可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...

  2. C#中的异步调用及异步设计模式(三)——基于事件的异步模式

    四.基于事件的异步模式(设计层面) 基于事件的C#异步编程模式是比IAsyncResult模式更高级的一种异步编程模式,也被用在更多的场合.该异步模式具有以下优点: ·                 ...

  3. 漫话JavaScript与异步·第一话——异步:何处惹尘埃

    自JavaScript诞生之日起,频繁与异步打交道便是这门语言的使命,并为此衍生出了许多设计和理念.因此,深入理解异步的概念对于前端工程师来说极为重要. 什么是异步? 程序是分"块" ...

  4. 转:JavaScript函数式编程(三)

    转:JavaScript函数式编程(三) 作者: Stark伟 这是完结篇了. 在第二篇文章里,我们介绍了 Maybe.Either.IO 等几种常见的 Functor,或许很多看完第二篇文章的人都会 ...

  5. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  6. Generator函数异步应用

    转载请注明出处: Generator函数异步应用 上一篇文章详细的介绍了Generator函数的语法,这篇文章来说一下如何使用Generator函数来实现异步编程. 或许用Generator函数来实现 ...

  7. [转] 为什么javascript是单线程的却能让AJAX异步调用?

    为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...

  8. (转)Javascript模块化编程(三):Require.js的用法

    转自 ruanyifeng 系列目录: Javascript模块化编程(一):模块的写法 Javascript模块化编程(二):AMD规范 Javascript模块化编程(三):Require.js的 ...

  9. PHP下的异步尝试三:协程的PHP版thunkify自动执行器

    PHP下的异步尝试系列 如果你还不太了解PHP下的生成器和协程,你可以根据下面目录翻阅 PHP下的异步尝试一:初识生成器 PHP下的异步尝试二:初识协程 PHP下的异步尝试三:协程的PHP版thunk ...

随机推荐

  1. 将PDF文件中按页截取,并以流的形势返回给客户端

    #需要用到pyPdf库 from pyPdf import PdfFileWriter,PdfFileReader from django.http import HttpResponse try: ...

  2. HDFS对象存储--Ozone架构设计

    前言 如今做云存储的公司非常多,举2个比較典型的AWS的S3和阿里云.他们都提供了一个叫做对象存储的服务,就是目标数据是从Object中进行读写的,然后能够通过key来获取相应的Object,就是所谓 ...

  3. 不同ios系统下mainscreen的applicationFrame和bounds值測试

    打印结果(横屏,3.5寸.若4寸则最后一项对应添加) ios6: 2014-04-26 10:57:12.300 testAccount[18525:907] applicationFrame: {{ ...

  4. 我的csdn博客搬家了

    把csdn上的文章都给搬到我的新博客去了, 将会在新的博客上继续写相关的技术文章 欢迎訪问: http://www.kai-zhou.com

  5. SAP ABAP编程 Table Control动态隐藏列

    在SAP DIALOG设计中,有时候须要动态的隐藏某些列,以下是方法. ***数据定义 CONTROLS: table_control TYPE TABLEVIEW USING SCREEN 0100 ...

  6. AI 系列 总目录

    AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...

  7. Solr集群搭建详细教程(二)

    注:欢迎大家转载,非商业用途请在醒目位置注明本文链接和作者名dijia478,商业用途请联系本人dijia478@163.com. 之前步骤:Solr集群搭建详细教程(一) 三.solr集群搭建 注意 ...

  8. 零基础学习webpack打包管理

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  9. php项目报错 Warning: session_start(): open(D:/software/wamp/wamp/tmp\sess_msrjot7f32ciqb1p2hr4ahejg4, O_RDWR) f

    今天一个php项目报错: Warning: session_start(): open(D:/software/wamp/wamp/tmp\sess_msrjot7f32ciqb1p2hr4ahejg ...

  10. Dos与Linux的断行字符

    Symptom Dos和Linux下面的断行字符是不一样的,至于哪里不一样的呢,先举个例子看一看 Cause 我们也可以使用cat -A filename分别查看Dos和Linux下创建的文件,会发现 ...