探索Javascript异步编程

异步编程带来的问题在客户端Javascript中并不明显，但随着服务器端Javascript越来越广的被使用，大量的异步IO操作使得该问题变得明显。许多不同的方法都可以解决这个问题，本文讨论了一些方法，但并不深入。大家需要根据自己的情况选择一个适于自己的方法。

笔者在之前的一片博客中简单的讨论了Python和Javascript的异同，其实作为一种编程语言Javascript的异步编程是一个非常值得讨论的有趣话题。

JavaScript 异步编程简介

回调函数和异步执行

所谓的异步指的是函数的调用并不直接返回执行的结果，而往往是通过回调函数异步的执行。

我们先看看回调函数是什么：


1

2

3

4

5

6

7

8

9

10

11

12

var fn = function(callback) {

    // do something here

    ...

    callback.apply(this, para);

}；

 

var mycallback = function(parameter) {

    // do someting in customer callback

}；

 

// call the fn with callback as parameter

fn(mycallback)；

回调函数，其实就是调用用户提供的函数，该函数往往是以参数的形式提供的。回调函数并不一定是异步执行的。比如上述的例子中，回调函数是被同步执行的。大部分语言都支持回调，C++可用通过函数指针或者回调对象，Java一般也是使用回调对象。

在Javascript中有很多通过回调函数来执行的异步调用，例如setTimeout（）或者setInterval（）。


1

2

3

setTimeout(function(){

    console.log("this will be exectued after 1 second!");

},1000);

在以上的例子中，setTimeout直接返回，匿名函数会在1000毫秒（不一定能保证是1000毫秒）后异步触发并执行，完成打印控制台的操作。也就是说在异步操作的情境下，函数直接返回，把控制权交给回调函数，回调函数会在以后的某一个时间片被调度执行。那么为什么需要异步呢？为什么不能直接在当前函数中完成操作呢？这就需要了解Javascript的线程模型了。

Javascript线程模型和事件驱动

Javascript最初是被设计成在浏览器中辅助提供HTML的交互功能。在浏览器中都包含一个Javascript引擎，Javscript程序就运行在这个引擎之中，并且只有一个线程。单线程能都带来很多优点，程序员们可以很开心的不用去考虑诸如资源同步，死锁等多线程阻塞式编程所需要面对的恼人的问题。但是很多人会问，既然Javascript是单线程的，那它又如何能够异步的执行呢？

这就需要了解到Javascript在浏览器中的事件驱动（event driven）机制。事件驱动一般通过事件循环（event loop）和事件队列（event queue）来实现的。假定浏览器中有一个专门用于事件调度的实例（该实例可以是一个线程，我们可以称之为事件分发线程event dispatch thread），该实例的工作就是一个不结束的循环，从事件队列中取出事件，处理所有很事件关联的回调函数（event handler）。注意回调函数是在Javascript的主线程中运行的，而非事件分发线程中，以保证事件处理不会发生阻塞。

Event Loop Code:


1

2

3

4

5

6

7

8

while(true) {

 var event = eventQueue.pop();

 if(event && event.handler) {

     event.handler.execute(); // execute the callback in Javascript thread

 } else {

     sleep(); //sleep some time to release the CPU do other stuff

 }

}

通过事件驱动机制，我们可以想象Javascript的编程模型就是响应一系列的事件，执行对应的回调函数。很多UI框架都采用这样的模型（例如Java Swing）。

那为什要异步呢，同步不是很好么？

异步的主要目的是处理非阻塞，在和HTML交互的过程中，会需要一些IO操作（典型的就是Ajax请求，脚本文件加载），如果这些操作是同步的，就会阻塞其它操作，用户的体验就是页面失去了响应。

综上所述Javascript通过事件驱动机制，在单线程模型下，以异步回调函数的形式来实现非阻塞的IO操作。

Javascript异步编程带来的挑战

Javascript的单线程模型有很多好处，但同时也带来了很多挑战。

代码可读性

想象一下，如果某个操作需要经过多个非阻塞的IO操作，每一个结果都是通过回调，程序有可能会看上去像这个样子。


1

2

3

4

5

6

7

8

9

10

11

operation1(function(err, result) {

    operation2(function(err, result) {

        operation3(function(err, result) {

            operation4(function(err, result) {

                operation5(function(err, result) {

                    // do something useful

                })

            })

        })

    })

})

我们称之为意大利面条式（spaghetti）的代码。这样的代码很难维护。这样的情况更多的会发生在server side的情况下。

流程控制

异步带来的另一个问题是流程控制，举个例子，我要访问三个网站的内容，当三个网站的内容都得到后，合并处理，然后发给后台。代码可以这样写：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

var urls = [‘url1‘,‘url2‘,‘url3‘];

var result = [];

 

for (var i = 0, len = urls.length(); i < len; i++ ) {

    $.ajax({

        url: urls[i],

        context: document.body,

        success: function(){

          //do something on success

          result.push("one of the request done successfully");

          if (result.length === urls.length()) {

              //do something when all the request is completed successfully

          }

        }});

}

上述代码通过检查result的长度的方式来决定是否所有的请求都处理完成，这是一个很丑陋方法，也很不可靠。

异常和错误处理

通过上一个例子，我们还可以看出，为了使程序更健壮，我们还需要加入异常处理。 在异步的方式下，异常处理分布在不同的回调函数中，我们无法在调用的时候通过try…catch的方式来处理异常， 所以很难做到有效，清楚。

更好的Javascript异步编程方式

“这是最好的时代，也是最糟糕的时代”

为了解决Javascript异步编程带来的问题，很多的开发者做出了不同程度的努力，提供了很多不同的解决方案。然而面对如此众多的方案应该如何选择呢？我们这就来看看都有哪些可供选择的方案吧。

Promise

Promise 对象曾经以多种形式存在于很多语言中。这个词最先由C++工程师用在Xanadu 项目中，Xanadu 项目是Web 应用项目的先驱。随后Promise 被用在E编程语言中，这又激发了Python 开发人员的灵感，将它实现成了Twisted 框架的Deferred 对象。

2007 年，Promise 赶上了JavaScript 大潮，那时Dojo 框架刚从Twisted框架汲取灵感，新增了一个叫做dojo.Deferred 的对象。也就在那个时候，相对成熟的Dojo 框架与初出茅庐的jQuery 框架激烈地争夺着人气和名望。2009 年，Kris Zyp 有感于dojo.Deferred 的影响力提出了CommonJS 之Promises/A 规范。同年，Node.js 首次亮相。

在编程的概念中，future，promise，和delay表示同一个概念。Promise翻译成中文是“承诺”，也就是说给你一个东西，我保证未来能够做到，但现在什么都没有。它用来表示异步操作返回的一个对象，该对象是用来获取未来的执行结果的一个代理，初始值不确定。许多语言都有对Promise的支持。

Promise的核心是它的then方法，我们可以使用这个方法从异步操作中得到返回值，或者是异常。then有两个可选参数（有的实现是三个），分别处理成功和失败的情景。


1

2

var promise = doSomethingAync()

promise.then(onFulfilled, onRejected)

异步调用doSomethingAync返回一个Promise对象promise，调用promise的then方法来处理成功和失败。这看上去似乎并没有很大的改进。仍然需要回调。但是和以前的区别在于，首先异步操作有了返回值，虽然该值只是一个对未来的承诺；其次通过使用then，程序员可以有效的控制流程异常处理，决定如何使用这个来自未来的值。

对于嵌套的异步操作，有了Promise的支持，可以写成这样的链式操作：


1

2

3

4

5

6

7

8

9

10

11

operation1().then(function (result1) {

    return operation2(result1)

}).then(function (result2) {

    return operation3(result2);

}).then(function (result3) {

    return operation4(result3);

}).then(function (result4) {

    return operation5(result4)

}).then(function (result5) {

    //And so on

});

Promise提供更便捷的流程控制，例如Promise.all()可以解决需要并发的执行若干个异步操作，等所有操作完成后进行处理。


1

2

3

4

5

6

var p1 = async1();

var p2 = async2();

var p3 = async3();

Promise.all([p1,p2,p3]).then(function(){

    // do something when all three asychronized operation finished

});

对于异常处理，


1

2

3

4

5

doA()

  .then(doB)

  .then(null,function(error){

      // error handling here

  })

如果doA失败，它的Promise会被拒绝，处理链上的下一个onRejected会被调用，在这个例子中就是匿名函数function（error）{}。比起原始的回调方式，不需要在每一步都对异常进行处理。这生了不少事。

以上只是对于Promise概念的简单陈述，Promise拥有许多不同规范建议（A,A+,B,KISS,C,D等），名字（Future，Promise，Defer），和开源实现。大家可以参考一下的这些链接。

如果你有选择困难综合症，面对这么多的开源库不知道如何决断，先不要急，这还只是一部分，还有一些库没有或者不完全采用Promise的概念

Non-Promise

下面列出了其它的一些开源的库，也可以帮助解决Javascript中异步编程所遇到的诸多问题，它们的解决方案各不相同，我这里就不一一介绍了。大家有兴趣可以去看看或者试用一下。

Non-3rd Party

其实，为了解决Javascript异步编程带来的问题，不一定非要使用Promise或者其它的开源库，这些库提供了很好的模式，但是你也可以通过有针对性的设计来解决。

比如，对于层层回调的模式，可以利用消息机制来改写，假定你的系统中已经实现了消息机制，你的code可以写成这样：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

eventbus.on("init", function(){

    operationA(function(err,result){

        eventbus.dispatch("ACompleted");

    });

});

 

eventbus.on("ACompleted", function(){

    operationB(function(err,result){

        eventbus.dispatch("BCompleted");

    });

});

 

eventbus.on("BCompleted", function(){

    operationC(function(err,result){

        eventbus.dispatch("CCompleted");

    });

});

 

eventbus.on("CCompleted", function(){

    // do something when all operation completed

});

这样我们就把嵌套的异步调用，改写成了顺序执行的事件处理。

更多的方式，请大家参考这篇文章，它提出了解决异步的五种模式：回调、观察者模式（事件）、消息、Promise和有限状态机（FSM）。

下一代Javscript对异步编程的增强

ECMAScript6

下一代的Javascript标准Harmony，也就是ECMAScript6正在酝酿中，它提出了许多新的语言特性，比如箭头函数、类（Class）、生成器（Generator）、Promise等等。其中Generator和Promise都可以被用于对异步调用的增强。

Nodejs的开发版V0.11已经可以支持ES6的一些新的特性，使用node –harmony命令来运行对ES6的支持。

co、Thunk、Koa

koa是由Express原班人马（主要是TJ）打造，希望提供一个更精简健壮的nodejs框架。koa依赖ES6中的Generator等新特性，所以必须运行在相应的Nodejs版本上。

利用Generator、co、Thunk，可以在Koa中有效的解决Javascript异步调用的各种问题。

co是一个异步流程简化的工具，它利用Generator把一层层嵌套的调用变成同步的写法。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

var co = require(‘co‘);

var fs = require(‘fs‘);

 

var stat = function(path) {

  return function(cb){

    fs.stat(path,cb);

  }

};

 

var readFile = function(filename) {

  return function(cb){

    fs.readFile(filename,cb);

  }

};

 

co(function *() {

  var stat = yield stat(‘./README.md‘);

  var content = yield readFile(‘./README.md‘);

})();

通过co可以把异步的fs.readFile当成同步一样调用，只需要把异步函数fs.readFile用闭包的方式封装。

利用Thunk可以进一步简化为如下的code, 这里Thunk的作用就是用闭包封装异步函数，返回一个生成函数的函数，供生成器来调用。


1

2

3

4

5

6

7

8

9

10

11

var thunkify = require(‘thunkify‘);

var co = require(‘co‘);

var fs = require(‘fs‘);

 

var stat = thunkify(fs.stat);

var readFile = thunkify(fs.readFile);

 

co(function *() {

  var stat = yield stat(‘./README.md‘);

  var content = yield readFile(‘./README.md‘);

})();

利用co可以串行或者并行的执行异步调用。

串行


1

2

3

4

co(function *() {

  var a = yield request(a);

  var b = yield request(b);

})();

并行


1

2

3

co(function *() {

 var res = yield [request(a), request(b)];

})();

更多详细的内容，大家可以参考这两篇文章1，2。

总结

异步编程带来的问题在客户端Javascript中并不明显，但随着服务器端Javascript越来越广的被使用，大量的异步IO操作使得该问题变得明显。许多不同的方法都可以解决这个问题，本文讨论了一些方法，但并不深入。大家需要根据自己的情况选择一个适于自己的方法。

同时，随着ES6的定义，Javascript的语法变得越来越丰富，更多的功能带来了很多便利，然而原本简洁，单一目的的Javascript变得复杂，也要承担更多的任务。Javascript何去何从，让我们拭目以待。

时间： 2024-10-25 22:31:19

探索Javascript异步编程的相关文章

探索Javascript 异步编程

在我们日常编码中,需要异步的场景很多,比如读取文件内容.获取远程数据.发送数据到服务端等.因为浏览器环境里Javascript是单线程的,所以异步编程在前端领域尤为重要. 异步的概念 所谓异步,是指当一个过程调用发出后,调用者不能立刻得到结果.实际处理这个调用的过程在完成后,通过状态.通知或者回调来通知调用者. 比如我们写这篇文字时点击发布按钮,我们并不能马上得到文章发布成功或者失败.等待服务器处理,这段时间我们可以做其他的事情,当服务器处理完成后,通知我们是否发布成功. 所谓同步,是指当一个过

JavaScript异步编程（2）- 先驱者：jsDeferred

原文出处: linkFly   欢迎分享原创到伯乐头条 JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascript的异步编程,jsDeferred也是有必要探索的:因为Promise/A+规范的制定基本上是奠定在jsDeferred上,它是javascript异步编程中里程碑式的作品.jsDeferred自身的实现也是非常有意思的. 本文将探讨项目js

JavaScript异步编程设计快速响应的网络应用

JavaScript已然成为了多媒体.多任务.多内核网络世界中的一种单线程语言.其利用事件模型处理异步触发任务的行为成就了JavaScript作为开发语言的利器.如何深入理解和掌握JavaScript异步编程变得尤为重要!!!<JavaScript异步编程设计快速响应的网络应用>提供了一些方法和灵感. 一.深入理解JavaScript事件 1. 事件的调度 JavaScript事件处理器在线程空闲之前不会运行(空闲时运行). var start = new Date(); setTimeout

JavaScript异步编程（一） 深入理解JavaScript事件

JavaScript异步编程 深入理解JavaScript事件 ?事件的调度 JavaScript事件处理器在线程空闲之前不会运行 线程的阻塞 var start = new Date(); // setTimeout和setInterval的计时精度比期望值差 setTimeout(function(){ var end = new Date(); console.log('Time elapsed', end - start, 'ms'); }, 500); while(new Date -

Javascript异步编程方法之------“事件监听”

Javascript异步编程方法之------“事件监听”另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生.还是以f1和f2为例.首先,为f1绑定一个事件(这里采用的jQuery的写法).f1.on('done', f2);上面这行代码的意思是,当f1发生done事件,就执行f2.然后,对f1进行改写:function f1(){setTimeout(function () {// f1的任务代码f1.trigger('done');}, 1000);}f1.

Javascript异步编程方法之------“发布/订阅”

Javascript异步编程方法之------“发布/订阅”我们假定,存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行.这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern).这个模式有多种实现

深入解析Javascript异步编程

这里深入探讨下Javascript的异步编程技术.(P.S. 本文较长,请准备好瓜子可乐 :D) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程对其尤为重要. 拿nodejs来说,外壳是一层js语言,这是用户操作的层面,在这个层次上它是单线程运行的,也就是说我们不能像Java.Python这类语言在语言级别使用多线程能力.取而代之的是,nodejs编程中大量使用了异步编程技术,这是为了高效使用硬件,同时也可以不造成同步阻塞.不过nodejs

5分种让你了解javascript异步编程的前世今生，从onclick到await/async

javascript与异步编程 为了避免资源管理等复杂性的问题,javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为浏览器设计的GUI编程语言,GUI编程的特性之一是保证UI线程一定不能阻塞,否则体验不佳,甚至界面卡死. 一般安卓开发,会有一个界面线程,一个后台线程,保证界面的流畅.由于javascript是单线程,所以采用异步非阻塞的编程模式,javascript的绝大多数api都是异步api. 本文是本人的一个

JavaScript 异步编程

JavaScript 异步编程 第一章 深入理解JavaScript事件 1. javascirpt一般是单线程执行,setTimeout 和 setInterval 仅当cpu空闲时执行. var start = new Date; setTimeout(function(){ var end = new Date; console.log('Time elapsed:', end - start, 'ms'); }, 500); while (new Date - start < 1000)