ASYNC PROGRAMING IN JAVASCRIPT[转]

本文从异步风格讲起，分析Javascript中异步变成的技巧、问题和解决方案。具体的，从回调造成的问题说起，并谈到了利用事件、Promise、Generator等技术来解决这些问题。

异步之殇

NON-BLOCKING无限好?

异步，是没有线程模型的Javascript的救命稻草。说得高大上一些，就是运用了Reactor设计模式1。

Javascript的一切都是围绕着“异步”二子的。无论是浏览器环境，还是node环境，大多数API都是通过“事件”来将请求（或消息、调用）和返回值（或结果）分离。而“事件”，都离不开回调(Callback)，例如，

var fs = require("fs");
fs.readFile(__filename, function(e, data) {
    console.log("2. in callback");
});
console.log("1. after invoke");

fs模块封装了复杂的IO模块，其调用结果是通过一个简单的callback告诉调用者的。看起来是十分不错的，我们看看Ruby的EventMachine：

require "em-files"

EM::run do
  EM::File::open(__FILE__, "r") do |io|
    io.read(1024) do |data|
      puts data
      io.close
    end
    EM::stop
  end
end

由于Ruby的标准库里面的API全是同步的，异步的只有类似EventMachine这样的第三方API才能提供支持。实际风格上，两者类似，就我们这个例子来说，Javascript的版本似乎更加简介，而且不需要添加额外的第三方模块。

异步模式，相比线程模式，损耗更小，在部分场景性能甚至比Java更好2。并且，non-blocking的API是node默认的，这使nodejs和它的异步回调大量应用。

例如，我们想要找到当前目录中所有文件的尺寸：

fs.readdir(__dirname, function(e, files) {//callback 1
    if(e) {
        return console.log(e);
    }
    dirs.forEach(function(file) {//callback 2
        fs.stat(file, function(e, stats) {//callback 3
            if(e) {
                return console.log(e);
            }
            if(stats.isFile()) {
                console.log(stats.size);
            }
        });
    });
});

非常简单的一个任务便造成了3层回调。在node应用爆发的初期，大量的应用都是在这样的风格中诞生的。显然，这样的代码风格有如下风险：

  1. 代码难以阅读、维护：嵌套多层回调之后，作者自己都不清楚函数层次了。
  2. 潜在的调用堆栈消耗：Javascript中，远比你想像的简单去超出最大堆栈。不少第三方模块并没有做到异步调用，却装作支持回调，堆栈的风险就更大。
  3. 还想更遭么？前两条就够了……

不少程序员，因为第一条而放弃nodejs，甚至放弃Javascript。而关于第二条，各种隐性bug的排除和性能损耗的优化工作在向程序员招手。

等等，你说我一直再说node，没有提及浏览器中的情况？我们来看个例子：

/*glboal $ */
// we have jquery in the `window`
$("#sexyButton").on("click", function(data) {//callback 1
    $.getJSON("/api/topcis", function(data) {//callback 2
        var list = data.topics.map(function(t) {
            return t.id + ". " + t.title + "/n";
        });
        var id = confirm("which topcis are you interested in? Select by ID : " + list);
        $.getJSON("/api/topics/" + id, function(data) {//callback 3
            alert("Detail topic: " + data.content);
        });
    });

});

我们尝试获取一个文章列表，然后给予用户一些交互，让用户选择希望详细了解的一个文章，并继续获取文章详情。这个简单的例子，产生了3个回调。

事实上，异步的性质是Javascript语言本身的固有风格，跟宿主环境无关。所以，回调漫天飞造成的问题是Javascript语言的共性。

解决方案

EVENTED

Javascript程序员也许是最有创造力的一群程序员之一。对于回调问题，最终有了很多解决方案。最自然想到的，便是利用事件机制。

还是之前加载文章的场景：

var TopicController = new EventEmitter();

TopicController.list = function() {//a simple wrap for ajax request
    $.getJSON("/api/topics", this.notify("topic:list"));
    return this;
};

TopicController.show = function(id) {//a simple wrap for ajax request
    $.getJSON("/api/topics/" + id, this.notify("topic:show", id));
    return this;
};

TopicController.bind = function() {//bind DOM events
    $("#sexyButton").on("click", this.run.bind(this));
    return this;
};

TopicController._queryTopic = function(data) {
    var list = data.topics.map(function(t) {
        return t.id + ". " + t.title + "/n";
    });
    var id = confirm("which topcis are you interested in? Select by ID : " + list);
    this.show(id).listenTo("topic:show", this._showTopic);
};

TopicController._showTopic = function(data) {
    alert(data.content);
};

TopicController.listenTo = function(eventName, listener) {//a helper method to `bind`
    this.on(eventName, listener.bind(this));
};

TopicController.notify = function(eventName) {//generate a notify callback internally
    var self = this, args;
    args = Array.prototype.slice(arguments, 1);
    return function(data) {
        args.unshift(data);
        args.unshift(eventName);
        self.emit.apply(self, args);
    };
};

TopicController.run = function() {
    this.list().lisenTo("topic:list", this._queryTopic);
};

// kickoff
$(function() {
    TopicController.run();
});

可以看到，现在这种写法B格就高了很多。各种封装、各种解藕。首先，除了万能的jQuery，我们还依赖EventEmitter，这是一个观察者模式的实现3，比如asyncly/EventEmitter2。简单的概括一下这种风格：

  1. 杜绝了大部分将匿名函数用作回调的场景，达到零嵌套，代码简介明了
  2. 每个状态（或步骤）之间，利用事件机制进行关联
  3. 每个步骤都相互独立，方便日后维护

如果你硬要挑剔的话，也有缺点；

  1. 由于过度分离，整体流程模糊
  2. 代码量激增，又加大了另一种维护成本

高阶函数

利用高阶函数，可以顺序、并发的将函数递归执行。

我们可以编写一个高阶函数，让传入的函数顺序执行：

var runInSeries = function(ops, done) {
    var i = 0, next;
    next = function(e) {
        if(e) {
            return done(e);
        }
        var args = Array.prototype.slice.call(arguments, 1);
        args.push(next);
        ops[0].apply(null, args);
    };
    next();
};

还是我们之前的例子：

var list = function(next) {
    $.getJSON("/api/topics", function(data) { next(null, data); });
};

var query = function(data, next) {
    var list = data.topics.map(function(t) {
        return t.id + ". " + t.title + "/n";
    });
    var id = confirm("which topcis are you interested in? Select by ID : " + list);
    next(null, id);
};

var show = function(id, next) {
    $.getJSON("/api/topics/" + id, function(data) { next(null, data); });
};

$("#sexyButton").on("click", function() {
    runInSeries([list, query, show], function(e, detail) {
        alert(detail);
    });
});

看起来还是很不错的，简洁并且清晰，最终的代码量也没有增加。如果你喜欢这种方式，去看一下caolan/async会发现更多精彩。

PROMISE

A promise represents the eventual result of an asynchronous operation. The primary way of interacting with a promise is through its then method, which registers callbacks to receive either a promise’s eventual value or the reason why the promise cannot be fulfilled.

除开文绉绉的解释，Promise是一种对一个任务的抽象。Promise的相关API提供了一组方法和对象来实现这种抽象。

Promise的实现目前有很多：

虽然标准很多，但是所有的实现基本遵循如下基本规律：

  • Promise对象

    • 是一个有限状态机

      • 完成（fulfilled）
      • 否定（rejected）
      • 等待（pending）
      • 结束（settled）
    • 一定会有一个then([fulfill], [reject])方法，让使用者分别处理成功失败
    • 可选的done([fn])、fail([fn])方法
    • 支持链式API
  • Deffered对象
    • 提供reject和resolve方法，来完成一个Promise

笔者会在专门的文章内介绍Promise的具体机制和实现。在这里仅浅尝辄止，利用基本随处可得的jQuery来解决之前的那个小场景中的异步问题：

$("#sexyButton").on("click", function(data) {
    $.getJSON("/api/topcis").done(function(data) {
        var list = data.topics.map(function(t) {
            return t.id + ". " + t.title + "/n";
        });
        var id = confirm("which topcis are you interested in? Select by ID : " + list);
        $.getJSON("/api/topics/" + id).done(function(done) {
            alert("Detail topic: " + data.content);
        });
    });
});

很遗憾，使用Promise并没有让回调的问题好多少。在这个场景，Promise的并没有体现出它的强大之处。我们把jQuery官方文档中的例子拿出来看看：

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
  // a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
  // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
  var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
  if ( /Whip It/.test( data ) ) {
    alert( "We got what we came for!" );
  }
});

这里，同时发起了两个AJAX请求，并且将这两个Promise合并成一个，开发者只用处理这最终的一个Promise。

例如Q.js或when.js的第三方库，可以支持更多复杂的特性。也会让你的代码风格大为改观。可以说，Promise为处理复杂流程开启了新的大门，但是也是有成本的。这些复杂的封装，都有相当大的开销6。

GENEARTOR

ES6的Generator引入的yield表达式，让流程控制更加多变。node-fiber让我们看到了coroutine在Javascript中的样子。

var Fiber = require(‘fibers‘);

function sleep(ms) {
    var fiber = Fiber.current;
    setTimeout(function() {
        fiber.run();
    }, ms);
    Fiber.yield();
}

Fiber(function() {
    console.log(‘wait... ‘ + new Date);
    sleep(1000);
    console.log(‘ok... ‘ + new Date);
}).run();
console.log(‘back in main‘);

但想象一下，如果每个Javascript都有这个功能，那么一个正常Javascript程序员的各种尝试就会被挑战。你的对象会莫名其妙的被另外一个fiber中的代码更改。

也就是说，还没有一种语法设计能让支持fiber和不支持fiber的Javascript代码混用并且不造成混淆。node-fiber的这种不可移植性，让coroutine在Javascript中并不那么现实7。

但是yield是一种Shallow coroutines，它只能停止用户代码，并且只有在GeneratorFunction才可以用yield。

笔者在另外一篇文章中已经详细介绍了如何利用Geneator来解决异步流程的问题。

利用yield实现的suspend方法，可以让我们之前的问题解决的非常简介：

$("#sexyButton").on("click", function(data) {
    suspend(function *() {
        var data = yield $.getJSON("/api/topcis");
        var list = data.topics.map(function(t) {
            return t.id + ". " + t.title + "/n";
        });
        var id = confirm("which topcis are you interested in? Select by ID : " + list);
        var detail = yield $.getJSON("/api/topics/");
        alert("Detail topic: " + detail.content);
    })();
});

为了利用yield，我们也是有取舍的：

  1. Generator的兼容性并不好，仅有新版的node和Chrome支持
  2. 需要大量重写基础框架，是接口规范化(thunkify)，来支持yield的一些约束
  3. yield所产生的代码风格，可能对部分新手造成迷惑
  4. 多层yield所产生堆栈及其难以调试

结语

说了这么多，异步编程这种和线程模型迥然不同的并发处理方式，随着node的流行也让更多程序员了解其与众不同的魅力。如果下次再有C或者Java程序员说，Javascript的回调太难看，请让他好好读一下这篇文章吧！

原文：http://hao.jser.com/archive/4296/

时间： 2024-11-05 18:53:11

ASYNC PROGRAMING IN JAVASCRIPT[转]的相关文章

初识JavaScript Promises

JavaScript有很多槽点,嵌套回调怕是千夫所指. 很久之前,我一直使用async来处理JavaScript异步编程中的嵌套回调问题.当然我也大概的了解过一些其它旨在解决这些问题的类库,诸如EventProxy.Jscex.StepJS.thenjs. 当我第一次看到Promises规范的时候,我根本无法理解它所带来的好处.譬如每个初次学习Promises的人都见过如下的示例代码: //callbacks function callback(err, value){ if(err){ //

最棒的 JavaScript 学习指南（2018版）

译者注:原文作者研究了近2.4万篇 JavaScript 文章得出这篇总结,全文包含学习指南.新人上手.Webpack.性能.基础概念.函数式编程.面试.教程案例.Async Await.并发.V8.机器学习.数据可视化.调试.单元测试等章节,非常适合用于对自己 JavaScript 技术栈的比对,用于查漏补缺,适合收藏阅读.有删减.文中如有错误,欢迎评论指出. 在过去的一年间(2017年),我们对比了近24000篇 JavaScript 文章,并从中挑选出了最好的55篇.我们做了这个目录,认为

JavaScript的异步处理

Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推). 为了解决这个问题,Javascript语言将任务的执行模式分成两种:同步(Synchronous)和异步(Asynchronous). "同步模式" 就是上一段的模式,后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的.同步的:"异步模式&quo

现代JS中的流程控制：详解Callbacks 、Promises 、Async/Await

JavaScript经常声称是_异步_.那是什么意思?它如何影响发展?近年来这种方法有何变化? 请思考以下代码: result1 = doSomething1(); result2 = doSomething2(result1); 大多数语言都处理每一行同步.第一行运行并返回结果.第二行在第一行完成后运行无论需要多长时间. 单线程处理 JavaScript在单个处理线程上运行.在浏览器选项卡中执行时,其他所有内容都会停止,因为在并行线程上不会发生对页面DOM的更改;将一个线程重定向到另一个URL

林大妈的JavaScript进阶知识（二）：JS异步行为

JavaScript 是单线程执行的 JavaScript运行在浏览器中.浏览器是多线程的,但只分配了其中一条给JavaScript,作为它的主线程.对于编码者来说,JavaScript是单线程的.因此JavaScript中存在以下几种异步行为: 事件绑定(addEventListener) 定时器(setTimeout.setInterval) AJAX(axios).fetch 所有跟Promise的resolve.reject相关的行为(generator.async/await) Jav

ES6 Async/Await 完爆Promise的6个原因

自从Node的7.6版本,已经默认支持async/await特性了.如果你还没有使用过他,或者对他的用法不太了解,这篇文章会告诉你为什么这个特性"不容错过".本文辅以大量实例,相信你能很轻松的看懂,并了解Javascript处理异步的一大杀器. 文章灵感和内容借鉴了6 Reasons Why JavaScript's Async/Await Blows Promises Away (Tutorial),英文好的同学可以直接戳原版参考. 初识Async/await 对于还不了解Async

触碰jQuery：AJAX异步详解

触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用.

利用Azure Rest API 创建虚拟机

在此之前,我曾经看过一篇文章讲叙了如何利用Azure power shell team 提供的class library. 而就在这篇文章发布之后不久,我又发现微软发布了一个preview 版本的Windows Azure Management Libraries For .NET Nuget package来帮助.NET 开发人员来更好的控制Auzre Platform. 相比power shell team使用的library, Windows Azure Management Librar

触碰jQuery：AJAX异步详解（转）

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和XHTML来表示. 2)   使用DOM模型来交互和动态显示. 3)   使用XMLHttpRequest来和服务器进行异步通信. 4)   使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请