本篇，简朴完成一个promise，重要提高promise的用法。
一直以来，JavaScript处置惩罚异步都是以callback的体式格局，在前端开辟范畴callback机制险些深入人心。在设想API的时候，不论是浏览器厂商照样SDK开辟商亦或是各品种库的作者，基本上都已遵照着callback的套路。
近几年跟着JavaScript开辟形式的逐步成熟，CommonJS范例顺势而生，其中就包括提出了Promise范例，Promise完全改变了js异步编程的写法，让异步编程变得非常的易于明白。
在callback的模子里边，我们假定须要实行一个异步行列，代码看起来能够像如许：
loadImg('a.jpg', function() {
loadImg('b.jpg', function() {
loadImg('c.jpg', function() {
console.log('all done!');
});
});
});
这也就是我们常说的回调金字塔，当异步的使命很多的时候，保护大批的callback将是一场灾害。当今Node.js大热，彷佛很多团队都要用它来做点东西以沾沾“洋气”，曾跟一个运维的同砚谈天，他们也是盘算运用Node.js做一些事变，然则一想到js的层层回调就望而生畏。
好，扯淡终了，下面进入正题。
Promise能够人人都不生疏，因为Promise范例已出来好一段时间了，同时Promise也已纳入了ES6，而且高版本的chrome、firefox浏览器都已原生完成了Promise，只不过和现如今盛行的类Promise类库比拟少些API。
所谓Promise，字面上能够明白为“许诺”，就是说A挪用B，B返回一个“许诺”给A，然后A就能够在写设计的时候这么写：当B返回结果给我的时候，A实行计划S1，反之假如B因为什么原因没有给到A想要的结果，那末A实行应急计划S2，如许一来，一切的潜伏风险都在A的可控局限以内了。
上面这句话，翻译成代码相似：
var resB = B();
var runA = function() {
resB.then(execS1, execS2);
};
runA();
只看上面这行代码，彷佛看不出什么特别之处。但现实情况能够比这个庞杂很多，A要完成一件事，能够要依靠不止B一个人的响应，能够须要同时向多个人讯问，当收到一切的应对以后再实行下一步的计划。终究翻译成代码能够像如许：
var resB = B();
var resC = C();
...
var runA = function() {
reqB
.then(resC, execS2)
.then(resD, execS3)
.then(resE, execS4)
...
.then(execS1);
};
runA();
在这里，当每个被讯问者做出不符合预期的应对时都用了差别的处置惩罚机制。事实上，Promise范例没有请求如许做，你以至能够不做任何的处置惩罚（即不传入then的第二个参数）或许一致处置惩罚。
好了，下面我们来熟悉下Promise/A+范例：
一个promise能够有三种状况：守候（pending）、已完成（fulfilled）、已谢绝（rejected）
一个promise的状况只能够从“守候”转到“完成”态或许“谢绝”态，不能逆向转换，同时“完成”态和“谢绝”态不能互相转换
promise必需完成
then要领（能够说，then就是promise的中心），而且then必需返回一个promise，同一个promise的then能够挪用屡次，而且回调的实行递次跟它们被定义时的递次一致then要领接收两个参数，第一个参数是胜利时的回调，在promise由“守候”态转换到“完成”态时挪用，另一个是失利时的回调，在promise由“守候”态转换到“谢绝”态时挪用。同时，then能够接收另一个promise传入，也接收一个“类then”的对象或要领，即thenable对象。
能够看到，Promise范例的内容并不算多，人人能够试着自身完成以下Promise。
以下是笔者自身在参考很多类Promise库以后简朴完成的一个Promise，代码请移步promiseA。
简朴剖析下思绪：
构造函数Promise接收一个函数resolver，能够明白为传入一个异步使命，resolver接收两个参数，一个是胜利时的回调，一个是失利时的回调，这两参数和经由过程then传入的参数是对等的。
其次是then的完成，因为Promise请求then必需返回一个promise，所以在then挪用的时候会新天生一个promise，挂在当前promise的_next上，同一个promise屡次挪用都只会返回之前天生的_next。
因为then要领接收的两个参数都是可选的，而且范例也没限定，能够是函数，也能够是一个详细的值，还能够是另一个promise。下面是then的详细完成：
Promise.prototype.then = function(resolve, reject) {
var next = this._next || (this._next = Promise());
var status = this.status;
var x;
if('pending' === status) {
isFn(resolve) && this._resolves.push(resolve);
isFn(reject) && this._rejects.push(reject);
return next;
}
if('resolved' === status) {
if(!isFn(resolve)) {
next.resolve(resolve);
} else {
try {
x = resolve(this.value);
resolveX(next, x);
} catch(e) {
this.reject(e);
}
}
return next;
}
if('rejected' === status) {
if(!isFn(reject)) {
next.reject(reject);
} else {
try {
x = reject(this.reason);
resolveX(next, x);
} catch(e) {
this.reject(e);
}
}
return next;
}
};
这里，then做了简化，其他promise类库的完成比这个要庞杂很多，同时功用也更多，比方另有第三个参数——notify，示意promise当前的进度，这在设想文件上传等时很有效。对then的种种参数的处置惩罚是最庞杂的部份，有兴致的同砚能够参看其他类Promise库的完成。
在then的基础上，应当还须要最少两个要领，分别是完成promise的状况从pending到resolved或rejected的转换，同时实行响应的回调行列，即resolve()和reject()要领。
到此，一个简朴的promise就设想完成了，下面简朴完成下两个promise化的函数：
function sleep(ms) {
return function(v) {
var p = Promise();
setTimeout(function() {
p.resolve(v);
});
return p;
};
};
function getImg(url) {
var p = Promise();
var img = new Image();
img.onload = function() {
p.resolve(this);
};
img.onerror = function(err) {
p.reject(err);
};
img.url = url;
return p;
};
因为Promise构造函数接收一个异步使命作为参数，所以getImg还能够如许挪用：
function getImg(url) {
return Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() {
resolve(this);
};
img.onerror = function(err) {
reject(err);
};
img.url = url;
});
};
接下来（见证奇观的时候），假定有一个BT的需求要这么完成：异步猎取一个json设置，剖析json数据拿到里边的图片，然后按递次行列加载图片，没张图片加载时给个loading结果
function addImg(img) {
$('#list').find('> li:last-child').html('').append(img);
};
function prepend() {
$('<li>')
.html('loading...')
.appendTo($('#list'));
};
function run() {
$('#done').hide();
getData('map.json')
.then(function(data) {
$('h4').html(data.name);
return data.list.reduce(function(promise, item) {
return promise
.then(prepend)
.then(sleep(1000))
.then(function() {
return getImg(item.url);
})
.then(addImg);
}, Promise.resolve());
})
.then(sleep(300))
.then(function() {
$('#done').show();
});
};
$('#run').on('click', run);
这里的sleep只是为了看结果加的，可猛击检察demo！固然，Node.js的例子可检察这里。
在这里，Promise.resolve(v)静态要领只是简朴返回一个以v为一定结果的promise，v可不传入，也能够是一个函数或许是一个包括then要领的对象或函数（即thenable）。
相似的静态要领另有Promise.cast(promise)，天生一个以promise为一定结果的promise；
Promise.reject(reason)，天生一个以reason为否认结果的promise。
我们现实的运用场景能够很庞杂，每每须要多个异步的使命交叉实行，并行或许串行同在。这时候，能够对Promise举行种种扩大，比方完成Promise.all()，接收promises行列并守候他们完成再继承，再比方Promise.any()，promises行列中有任何一个处于完成态时即触发下一步操纵。
规范的Promise
可参考html5rocks的这篇文章JavaScript Promises，现在高等浏览器如chrome、firefox都已内置了Promise对象，供应更多的操纵接口，比方Promise.all()，支撑传入一个promises数组，当一切promises都完成时实行then，另有就是越发友爱壮大的非常捕捉，应对一样平常的异步编程，应当足够了。
第三方库的Promise
当今盛行的各大js库，险些都差别水平的完成了Promise，如dojo，jQuery、Zepto、when.js、Q等，只是暴露出来的大都是Deferred对象，以jQuery（Zepto相似）为例，完成上面的getImg()：
function getImg(url) {
var def = $.Deferred();
var img = new Image();
img.onload = function() {
def.resolve(this);
};
img.onerror = function(err) {
def.reject(err);
};
img.src = url;
return def.promise();
};
固然，jQuery中，很多的操纵都返回的是Deferred或promise，如animate、ajax：
// animate
$('.box')
.animate({'opacity': 0}, 1000)
.promise()
.then(function() {
console.log('done');
});
// ajax
$.ajax(options).then(success, fail);
$.ajax(options).done(success).fail(fail);
// ajax queue
$.when($.ajax(options1), $.ajax(options2))
.then(function() {
console.log('all done.');
}, function() {
console.error('There something wrong.');
});
jQuery还完成了done()和fail()要领，实在都是then要领的shortcut。
处置惩罚promises行列，jQuery完成的是$.when()要领，用法和Promise.all()相似。
其他类库，这里值得一提的是when.js，自身代码不多，完全完成Promise，同时支撑browser和Node.js，而且供应越发雄厚的API，是个不错的挑选。这里限于篇幅，不再睁开。
尾声
我们看到，不论Promise完成怎样庞杂，然则它的用法却很简朴，构造的代码很清楚，今后不必再受callback的折磨了。
末了，Promise是云云的文雅！但Promise也只是处理了回调的深层嵌套的题目，真正简化JavaScript异步编程的照样Generator，在Node.js端，发起斟酌Generator。
下一篇，研讨下Generator。
github原文：https://github.com/chemdemo/chemdemo.github.io/issues/6
