用Promise组织程序
一、Promise基本用法
很多文章介绍Promise给的例子是这样的：
new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('POST', location.href, true); xhr.send(null); xhr.addEventListener('readystatechange', function(e){ if(xhr.readyState === 4) { if(xhr.status === 200) { resolve(xhr.responseText); } else { reject(xhr); } } }) }).then(function(txt){ console.log(); }) 一定会有小朋友好奇，说尼玛，这不是比回调还恶心？
这种写法的确是能跑得起来啦……不过，按照Promise的设计初衷，我们编程需要使用的概念并非"Promise对象"，而是promise函数，凡是以Promise作为返回值的函数，称为promise函数（我暂且取了这个名字）。所以应该是这样的：
function doSth() { return new Promise(function(resolve, reject) { //做点什么异步的事情 //结束的时候调用 resolve，比如： setTimeout(function(){ resolve(); //这里才是真的返回 },1000) }) } 如果你不喜欢这样的写法，还可以使用defer风格的promise
function doSth2() { var defer = Promise.defer(); //做点什么异步的事情 //结束的时候调用 defer.resolve，比如： setTimeout(function(){ defer.resolve(); //这里才是真的返回 },1000) return defer.promise; } 总之两种是没什么区别啦。
然后你就可以这么干：
doSth().then(doSth2).then(doSth);
这样看起来就顺眼多了吧。
其实说简单点，promise最大的意义在于把嵌套的回调变成了链式调用（详见第三节,顺序执行)，比如以下
//回调风格 loadImage(img1,function(){ loadImage(img2,function(){ loadImage(img3,function(){ }); }); }); //promise风格 Promise.resolve().then(function(){ return loadImage(img1); }).then(function(){ return loadImage(img2); }).then(function(){ return loadImage(img3); }); 后者嵌套关系更少，在多数人眼中会更易于维护一些。
二、Promise风格的API
在去完cssconf回杭州的火车上，我顺手把一些常见的JS和API写成了promise方式：
function get(uri){ return http(uri, 'GET', null); } function post(uri,data){ if(typeof data === 'object' && !(data instanceof String || (FormData && data instanceof FormData))) { var params = []; for(var p in data) { if(data[p] instanceof Array) { for(var i = 0; i < data[p].length; i++) { params.push(encodeURIComponent(p) + '[]=' + encodeURIComponent(data[p][i])); } } else { params.push(encodeURIComponent(p) + '=' + encodeURIComponent(data[p])); } } data = params.join('&'); } return http(uri, 'POST', data || null, { "Content-type":"application/x-www-form-urlencoded" }); } function http(uri,method,data,headers){ return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open(method,uri,true); if(headers) { for(var p in headers) { xhr.setRequestHeader(p, headers[p]); } } xhr.addEventListener('readystatechange',function(e){ if(xhr.readyState === 4) { if(String(xhr.status).match(/^2\d\d$/)) { resolve(xhr.responseText); } else { reject(xhr); } } }); xhr.send(data); }) } function wait(duration){ return new Promise(function(resolve, reject) { setTimeout(resolve,duration); }) } function waitFor(element,event,useCapture){ return new Promise(function(resolve, reject) { element.addEventListener(event,function listener(event){ resolve(event) this.removeEventListener(event, listener, useCapture); },useCapture) }) } function loadImage(src) { return new Promise(function(resolve, reject) { var image = new Image; image.addEventListener('load',function listener() { resolve(image); this.removeEventListener('load', listener, useCapture); }); image.src = src; image.addEventListener('error',reject); }) } function runScript(src) { return new Promise(function(resolve, reject) { var script = document.createElement('script'); script.src = src; script.addEventListener('load',resolve); script.addEventListener('error',reject); (document.getElementsByTagName('head')[0] || document.body || document.documentElement).appendChild(script); }) } function domReady() { return new Promise(function(resolve, reject) { if(document.readyState === 'complete') { resolve(); } else { document.addEventListener('DOMContentLoaded',resolve); } }) } 看到了吗，Promise风格API跟回调风格的API不同，它的参数跟同步的API是一致的，但是它的返回值是个Promise对象，要想得到真正的结果，需要在then的回调里面拿到。
值得一提的是，下面这样的写法：
waitFor(document.documentElement,'click').then(function(){ console.log('document clicked!') }) 这样的事件响应思路上是比较新颖的，不同于事件机制，它的事件处理代码仅会执行一次。
通过这些函数的组合，我们可以更优雅地组织异步代码，请继续往下看。
三、使用Promise组织异步代码
函数调用/并行
Promise.all跟then的配合，可以视为调用部分参数为Promise提供的函数。譬如，我们现在有一个接受三个参数的函数
function print(a, b, c) { console.log(a + b + c); } 现在我们调用print函数，其中a和b是需要异步获取的：
var c = 10; print(geta(), getb(), 10); //这是同步的写法 Promise.all([geta(), getb(), 10]).then(print); //这是 primise 的异步写法
竞争
如果说Primise.all是promise对象之间的“与”关系，那么Promise.race就是promise对象之间的“或”关系。
比如，我要实现“点击按钮或者5秒钟之后执行”
var btn = document.getElementsByTagName('button'); Promise.race(wait(5000), waitFor(btn, click)).then(function(){ console.log('run!') }) 异常处理
异常处理一直是回调的难题，而promise提供了非常方便的catch方法：
在一次promise调用中，任何的环节发生reject，都可以在最终的catch中捕获到
Promise.resolve().then(function(){ return loadImage(img1); }).then(function(){ return loadImage(img2); }).then(function(){ return loadImage(img3); }).catch(function(err){ //错误处理 }) 这非常类似于JS的try catch功能。
复杂流程
接下来，我们来看比较复杂的情况。
promise有一种非常重要的特性：then的参数，理论上应该是一个promise函数，而如果你传递的是普通函数，那么默认会把它当做已经resolve了的promise函数。
这样的特性让我们非常容易把promise风格的函数跟已有代码结合起来。
为了方便传参数，我们编写一个currying函数，这是函数式编程里面的基本特性，在这里跟promise非常搭，所以就实现一下：
function currying(){ var f = arguments[0]; var args = Array.prototype.slice.call(arguments,1); return function(){ args.push.apply(args,arguments); return f.apply(this,args); } } currying会给某个函数"固化"几个参数，并且返回接受剩余参数的函数。比如之前的函数，可以这么玩：
var print2 = currying(print,11); print2(2, 3); //得到 11 + 2 + 3 的结果，16 var wait1s = currying(wait,1000); wait1s().then(function(){ console.log('after 1s!'); }) 有了currying，我们就可以愉快地来玩链式调用了，比如以下代码：
Promise.race([ domReady().then(currying(wait,5000)), waitFor(btn, click)]) .then(currying(runScript,'a.js')) .then(function(){ console.log('loaded'); return Promise.resolve(); }); 表示“domReady发生5秒或者点击按钮后，加载脚本并执行，完毕后打印loaded”。
四、总结
promise作为一个新的API，是几乎完全可polyfill的，这在JS发展中这是很少见的情况，它的API本身没有什么特别的功能，但是它背后代表的编程思路是很有价值的。
来自：http://www.w3ctech.com/topic/721