javascript异步变迁（一）

2016-04-21 本文已影响77人 appea

你可能知道，javascript在浏览器端是一门单线程的语言（single thread）。道理很简单，就是设计者当时设计这门语言的时候只是考虑到这门语言就是一个脚本语言，应该足够简单，要易于上手。

队列

　　但是慢慢的发展就会产生一个问题，单线程一次只能执行一个任务，如果有多个任务同时执行，就必须排队，前面一个任务完成才能执行后面一个任务，以此类推。
　　这种模式下你不用考虑复杂的线程安全，也不用考虑线程通信，故出发点是好的。但是有一个坏处，会发生线程阻塞，就是一个耗时很长的任务如果没有执行完，就会阻塞之后任务的执行。通俗的讲就是会造成浏览器的假死
　　为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

"同步模式"就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
"异步模式"非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。
本文总结了"异步模式"编程的4种方法，理解它们可以让你写出结构更合理、性能更出色、维护更方便的Javascript程序。

异步

提示：异步不代表加快执行，通常我们说的异步是异步I/O，我们知道I/O操作远没有CPU的处理速度快。当我们去请求一个HTTP服务、查询一段SQL，读取一个文件的时候，会出现CPU占用不完全的情况，这个时候CPU必须要等待I/O操作完成，这个等待时间是不定的，就会导致CPU资源浪费。
合理的解决办法就是采用异步操作，当处于I/O等待状态就将CPU转换到其它任务当中，I/O结束等待后就重新获得该方法的控制权继续执行。

回调函数

JavaScript语言对异步编程的实现，就是回调函数。所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。它的英语名字callback，直译过来就是"重新调用"。

先看一个最简单的回调

function f1(callback){
    //setTimeout是最简单的回调函数，等待一段时间后执行
　　setTimeout(function () {
　　// f1的任务代码
　　callback();
　　}, 1000);
}

当我们执行f1这个函数的时候，我们会加载一个定时器方法，1秒过后，会执行它的回调函数
读取文件进行处理，是这样写的。

 fs.readFile('/etc/passwd', function (err, data) {
     if (err) throw err;
     console.log(data);
 });console.log(data);});

上面代码读取了一个文件，回调函数有两个参数，第一个为错误对象，第二个为读取到的数据
让情况稍微复杂一点
看下面这个代码

 $.post("/ajax/post1",function(data){
    if(data.type=="book"){
        $.post("/ajax/book",function(data1){
            console.log(data1);
        });
    }else if(data.type=="article"){
        $.post("/ajax/article",function(data2){
            console.log(data2);
        });
    }
});

这个例子先请求了一个服务，根据返回的结果，判断它是哪一种状态，在根据它的状态又请求了一次服务。这个例子看起来还比较好受，我们在看下面这种状态，是不是大家都很熟悉。

                    });
                  });
                });
              });
            });
          });
        });
      });
    });
  });
});

上面这段代码就是javascript著名的回调陷阱，多次的嵌套回调会让你的代码乱成一团，并且难以维护
所以机智的开发人员为了解决这个问题，他们采取了很多种办法，咱们从简单的开始分析

异步函数式类库

Async.js
When.js
parallel.js
...

上面这些库有一个共同点，就是通过函数的方式把异步方法嵌套在了一起，其实异步的本质还是没有改变，他们都基于Promises/A规范。
而且这些库还有一个共通点，支持同步方法的队列执行，这个在js动画、集合处理等用的比较多，这里不多阐述。
我们这里拿When.js来讲解，首先，我们看一段代码：

var getData = function(callback) {
    $.getJSON(api, function(data){
        callback(data[0]);
    });
}
var getImg = function(src, callback) {
    var img = new Image();
    img.onload = function() {
        callback(img);
    };
    img.src = src;
}
var showImg = function(img) {
    $(img).appendTo($('#container'));
}
getData(function(data) {
    getImg(data, function(img) {
        showImg(img);
    });
});

这段代码完成了三个任务：1)获取数据；2)加载图片；3)显示图片，其中，任务1和2是异步，3是同步，使用的是最常见的callback机制来处理异步逻辑，好处是浅显易懂，缺点是强耦合、不直观、处理异常麻烦等等。
另外一种常见的实现异步编程的方案是事件监听器，例如使用QWrap的CustEvent，让任务成功时fireEvent，那么注册了这个Event的监听器就可以收到这个事件，并收到事件传递过来的数据，Dom标准事件也是采用的这种形式。这种方案也很好理解，代码从略。事件监听可以解耦，可以绑定任意多个监听器，但是依然不直观，而且事件发生之后再绑定的监听器也得不到触发。

我们尝试用when.js改写下这段代码

var getData = function () {
      var deferred = when.defer();

      $.getJSON(api, function (data) {
          deferred.resolve(data[0]);
      });

      return deferred.promise;
}
var getImg = function (src) {
      var deferred = when.defer();
      var img = new Image();
      img.onload = function () {
          deferred.resolve(img);
      };
      img.src = src;
      return deferred.promise;
}
var showImg = function (img) {
      $(img).appendTo($('#container'));
}
getData()
      .then(getImg)
      .then(showImg);

看最后三行代码，是不是一目了然，非常的语义化？
他解决了一个问题，就是我们前面提到的嵌套陷阱！
OK！下一章让我们来看一下Whenjs还有什么功能，当然这里的重点不是这个库，大家感兴趣的话可以自己去看看when.js，我们的重点是Promises/A规范

下一章我们继续

Promises/A规范详细阐述说明

javascript异步变迁（一）

回调函数

异步函数式类库

猜你喜欢

热点阅读