异步？

我在许多处所都看到过异步(Asynchronous)这个词，但在我还不是很明白这个观点的时候，却发明自身经常会被当作“已很清楚”(*￣ﾛ￣)。

如果你也有相似的状况，没紧要，搜刮一下这个词，就能够获得大抵的申明。在这里，我会对JavaScript的异步做一点分外诠释。

看一下这段代码：

var start = new Date();
setTimeout(function(){
    var end = new Date();
    console.log("Time elapsed: ", end - start, "ms");
}, 500);
while (new Date - start < 1000) {};

这段代码运转后会获得相似Time elapsed: 1013ms如许的效果。 setTimeout()所设定的在将来500ms时实行的函数，现实等了比1000ms更多的时候后才实行。

要怎样诠释呢？挪用setTimeout()时，一个延时事宜被排入行列。然后，继承实行这今后的代码，以及更后边的代码，直到没有任何代码。没有任何代码后，JavaScript线程进入余暇，此时JavaScript实行引擎才去翻看行列，在行列中找到“应当触发”的事宜，然后挪用这个事宜的处置惩罚器（函数）。处置惩罚器实行完成后，又再返回到行列，然后检察下一个事宜。

单线程的JavaScript，就是如许经由过程行列，以事宜轮回的情势事变的。所以，前面的代码中，是用while将实行引擎拖在代码运转时期长达1000ms，而在悉数代码运转完回到行列前，任何事宜都不会触发。这就是JavaScript的异步机制。

JavaScript的异步困难

JavaScript中的异步操纵可能不老是简朴易行的。

Ajax也许是我们用得最多的异步操纵。以jQuery为例，提议一个Ajax要求的代码平常是如许的：

// Ajax要求示意代码
$.ajax({
    url: url,
    data: dataObject,
    success: function(){},
    error: function(){}
});

如许的写法有什么题目吗？简朴来讲，不够轻巧。为何一定要在提议要求的处所，就要把success和error这些回调给写好呢？如果我的回调要做许多许多的事变，是要我想起一件事变就跑回这里增添代码吗？

再比方，我们要完成如许一件事：有4个供Ajax接见的url地点，须要先Ajax接见第1个，在第1个接见完成后，用拿到的返回数据作为参数再接见第2个，第2个接见完成后再第3个…以此到4个悉数接见完成。根据如许的写法，彷佛会变成如许：

$.ajax({
    url: url1,
    success: function(data){
        $.ajax({
            url: url2,
            data: data,
            success: function(data){
                $.ajax({
                    //...
                });
            }    
        });
    }
})

你一定会以为这类称为Pyramid of Doom（金字塔恶运）的代码看起来很蹩脚。习惯了直接附加回调的写法，就可能会对这类一个通报到下一个的异步事宜觉得无从入手。为这些回调函数离别定名并星散寄存能够在情势上削减嵌套，使代码清楚，但仍然不能处置惩罚题目。

另一个罕见的难点是，同时发送两个Ajax要求，然后要在两个要求都胜利返回后再做一件接下来的事，想一想如果只按前面的体式格局在各自的挪用位置去附加回调，这是不是彷佛也有点难办？

适于应对这些异步操纵，能够让你写出更文雅代码的就是Promise。

Promise上场

Promise是什么呢？先继承以前面jQuery的Ajax要求示意代码为例，那段代码实在能够写成这个模样：

var promise = $.ajax({
    url: url,
    data: dataObject
});
promise.done(function(){});
promise.fail(function(){});

这和前面的Ajax要求示意代码是等效的。能够看到，Promise的到场使得代码情势发生了变化。Ajax要求就彷佛变量赋值一样，被“保留”了起来。这就是封装，封装将真正意义上让异步事宜变得轻易起来。

封装是有效的

Promise对象就像是一个封装好的对异步事宜的援用。想要在这个异步事宜完成后做点事变？给它附加回调就能够了，不论附加多少个也没题目！

jQuery的Ajax要领会返回一个Promise对象（这是jQuery1.5重点增添的特征）。如果我有do1()、do2()两个函数要在异步事宜胜利完成后实行，只须要如许做：

promise.done(do1);
// Other code here.
promise.done(do2);

如许可要自在多了，我只需保留这个Promise对象，就在写代码的任何时候，给它附加恣意数目的回调，而不必管这个异步事宜是在那里提议的。这就是Promise的上风。

正式的引见

Promise应对异步操纵是云云有效，以至于生长为了CommonJS的一个范例，叫做[Promises/A][]。Promise代表的是某一操纵完毕后的返回值，它有3种状况：

• 一定（fulfilled或resolved），表明该Promise的操纵胜利了。

• 否认（rejected或failed），表明该Promise的操纵失利了。

• 守候（pending），还没有获得一定或许否认的效果，进行中。

另外，另有1种名义上的状况用来示意Promise的操纵已胜利或失利，也就是一定和否认状况的鸠合，叫做完毕（settled）。Promise还具有以下主要的特征：

• 一个Promise只能从守候状况转变为一定或否认状况一次，一旦转变为一定或否认状况，就再也不会转变状况。

• 如果在一个Promise完毕（胜利或失利，同前面的申明）后，增添针对胜利或失利的回调，则回调函数会马上实行。

想一想Ajax操纵，提议一个要求后，守候着，然后胜利收到返回或涌现毛病（失利）。这是不是和Promise相称一致？

进一步诠释Promise的特征另有一个很好的例子：jQuery的$(document).ready(onReady)。个中onReady回调函数会在DOM停当后实行，但风趣的是，如果在实行到这句代码之前，DOM就已停当了，那末onReady会马上实行，没有任何耽误（也就是说，是同步的）。

Promise示例

天生Promise

[Promises/A][]里列出了一系列完成了Promise的JavaScript库，jQuery也在个中。下面是用jQuery天生Promise的代码：

var deferred = $.Deferred();
deferred.done(function(message){console.log("Done: " + message)});
deferred.resolve("morin");  // Done: morin

jQuery自身特地定义了名为Deferred的类，它现实上就是Promise。$.Deferred()要领会返回一个新天生的Promise实例。一方面，运用deferred.done()、deferred.fail()等为它附加回调，另一方面，挪用deferred.resolve()或deferred.reject()来一定或否认这个Promise，且能够向回调通报恣意数据。

兼并Promise

还记得我前文说的同时发送2个Ajax要求的困难吗？继承以jQuery为例，Promise将能够如许处置惩罚它：

var promise1 = $.ajax(url1),
promise2 = $.ajax(url2),
promiseCombined = $.when(promise1, promise2);
promiseCombined.done(onDone);

$.when()要领能够兼并多个Promise获得一个新的Promise，相称于在原多个Promise之间建立了AND（逻辑与）的关联，如果一切构成Promise都已胜利，则令兼并后的Promise也胜利，如果有恣意一个构成Promise失利，则马上令兼并后的Promise失利。

级联Promise

再继承我前文的顺次实行一系列异步使命的题目。它将用到Promise最为主要的.then()要领（在Promises/A范例中，也是用“有then()要领的对象”来定义Promise的）。代码以下：

var promise = $.ajax(url1);
promise = promise.then(function(data){
    return $.ajax(url2, data);
});
promise = promise.then(function(data){
    return $.ajax(url3, data);
});
// ...

Promise的.then()要领的完全情势是.then(onDone, onFail, onProgress)，如许看上去，它像是一个一次性就能够把种种回调都附加上去的轻便要领（.done()、.fail()能够不必了）。没错，你确实能够如许运用，这是等效的。

但.then()要领另有它更加有效的功用。犹如then这个单词自身的意义那样，它用来清楚地指明异步事宜的前后关联：“先这个，然后（then）再谁人”。这称为Promise的级联。

要级联Promise，须要注重的是，在通报给then()的回调函数中，一定要返回你想要的代表下一步使命的Promise（如上面代码的$.ajax(url2, data)）。如许，前面被赋值的谁人变量才会变成新的Promise。而如果then()的回调函数返回的不是Promise，则then()要领会返回最初的谁人Promise。

应当会以为有些难明白？从代码实行的角度上说，上面这段带有多个then()的代码实在照样被JavaScript引擎运转一遍就完毕。但它就像是写好的舞台剧的脚本一样，读过一遍后，JavaScript引擎就会在将来的时候，顺次部署演员根据脚原本上演，而上演都是异步的。then()要领就是让你能写出异步脚本的笔。

将Promise用在基于回调函数的API

前文重复用到的$.ajax()要领会返回一个Promise对象，这实在只是jQuery特地供应的福利。现实状况是，大多数JavaScript API，包含Node.js中的原生函数，都基于回调函数，而不是基于Promise。这类状况下运用Promise会须要自行做一些加工。

这个加工实在比较简朴和直接，下面是例子：

var deferred = $.Deferred();
setTimeout(deferred.resolve, 1000);
deferred.done(onDone);

如许，将Promise的一定或否认的触发器，作为API的回调传入，就变成了Promise的处置惩罚形式了。

Promise是怎样完成出来的？

本文写Promise写到这里，你发明了全都是基于已有的完成了Promise的库。那末，如果要自行修建一个Promise的话呢？

位列于[Promises/A][]的库列表第一位的[Q][]能够算是最相符Promises/A范例且相称直观的完成。如果你想相识怎样做出一个Promise，能够参考Q供应的[设想形式剖析][]。

限于篇幅，本文只引见Promise的运用。我会在今后零丁开一篇文章来详述Promise的完成细节。

作为JavaScript后续版本的ECMAScript 6将原生供应Promise，如果你想晓得它的用法，引荐浏览[JavaScript Promises: There and back again][]。

结语

Promise这个词顽强到不适合翻译，一眼之下都邑以为意义不明。不过，在JavaScript里做比较复杂的异步使命时，它确实能够供应相称多的协助。

（从新编辑自我的博客，原文地点：http://acgtofe.com/posts/2015…）