Promise 代表着一个异步操作，这个异步操作现在尚未完成，但在将来某刻会被完成。
Promise 有三种状态
- pending : 初始的状态，尚未知道结果
- fulfilled ： 代表操作成功
- rejected : 代表操作失败
如果 Promise 操作 fulfilled 或者 rejected ，并且对应的处理函数被声明了，则该处理函数被调用。
Promise vs 事件监听器(event listener)
事件监听器善于处理同一对象上重复发生的事情，例如按键、点击鼠标等。对于这些事件，你只关心添加回调函数之后的发生的事情。当处理结果导向的异步事件时，你的代码可能是
img1.callThisIfLoadedOrWhenLoaded(function() {
// loaded
}).orIfFailedCallThis(function() {
// failed
});
// and…
whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
// all loaded
}).orIfSomeFailedCallThis(function() {
// one or more failed
});
要实现同样的功能，Promise 的代码更加简洁，更加直观。
img1.ready().then(function() {
// loaded
}, function() {
// failed
});
// and…
Promise.all([img1.ready(), img2.ready()]).then(function() {
// all loaded
}, function() {
// one or more failed
});
Promise 和 事件监听器很相似，除了以下几点
1. Promise 只经历一次执行，成功或者失败。Promise 不会被执行第二次，也不可以转变执行结果，即执行无法从成功变成失败，反之亦然。而事件监听器可以被反复执行。
2. 如果 Promise 已经执行完毕，成功或者失败，然后再给 Promise 添加对应的回调函数，那么这个对应的回调函数仍然会被执行。也就是说，Promise 添加回调函数后，回调函数先检查在自己被添加之前事件是否已发生，如果发生则执行，如果没有发生就继续等待。而事件监听器只对自己被添加后的事件负责，忽略在自己被添加前的事件。
上面两点非常有利于处理结果导向的异步事件。因为你只需要关系事件发生的结果，成功或者失败，而不需了解事件发生的准确时间。
Promise 的使用
Promise 早已存在一些库里面，例如
创建 Promise
类库中的 Promise 实现大多都遵循标准行为，Promises/A+。 但是 API 会有些不一样。 Javascript 自带的 Promise 采用类似 RSVP.js 的 API 。
var promise = new Promise(function(resolve, reject) {
// do a thing, possibly async, then…
if (/* everything turned out fine */) {
resolve("Stuff worked!");
}
else {
reject(Error("It broke"));
}
});
Promise 构造函数接受一个回调函数作为参数。在创建 Promise 对象时候，执行该回调函数。根据回调函数的结果，成功或者失败，把执行控制器交给 reolve() 或者 reject() 函数。不过 reolve() 或 reject() 正在被执行的时间是在他们通过 Promise.then() 添加之后。
使用 Promise
promise.then(function(result) {
console.log(result); // "Stuff worked!"
}, function(err) {
console.log(err); // Error: "It broke"
});
Promise.then() 接受两个参数，一个用于处理 Promise 执行成功的情况，另一个用于处理 Promise 失败的情况。两个参数都是可选的，所以可以只传函数给第一个参数，用于处理 Promise 成功的情况，也可以只传函数给第二个参数，用于处理 Promise 失败的情况。
链式调用(chaining)
Promise.prototype.then() 和 Promise.prototype.catch() 返回的是一个 Promise ，所以可以形成链式调用。链式调用可用用于值传递，或者依次地进行后续的异步操作。
值传递
var promise = new Promise(function(resolve, reject) {
resolve(1);
});
promise.then(function(val) {
console.log(val); // 1
return val + 2;
}).then(function(val) {
console.log(val); // 3
});
当 then() 只是简单地调用另一个函数时，可以只传另一个函数的函数名。例如
get(‘story.json‘).then(function(response) {
return JSON.parse(response);
}).then(function(response) {
console.log("Yey JSON!", response);
});
可以简化为
get(‘story.json‘).then(JSON.parse).then(function(response) {
console.log("Yey JSON!", response);
});
实战代码如下
function getJSON(url) {
return get(url).then(JSON.parse);
}
串联多个异步操作
如果 then 返回一个值，下一个 then 就会接受这个值继续执行。如果 then 返回另一个 Promise 的对象，那么下一个 then 就等待，直到返回的 Promise 执行完（成功或者失败）。
getJSON(‘story.json‘).then(function(story) {
return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
console.log("Got chapter 1!", chapter1);
});
发送一个 story.json 的请求，获得的结果是一个 story 对象，包含着多个 chapter 的 URL。根据第一个 chapter URL ，再次请求 JSON 数据。执行成功后，最后运行 console.log 。
例子
已知一个目标资源 story.json，需要实现下面几步
1. 向 story.json 发送请求，获得各个章节的 URL，
2. 向各个章节的 URL 发送请求，分别获得各章节内容
3. 将章节内容添加到 HTML 页面中
同步请求数据
由于是同步请求，所有请求都依次阻塞进行。在请求过程中页面也会被阻塞，无进行其他操作。这种方式可以实现数据加载，但是用户体验差。
try {
var story = getJSONSync(‘story.json‘);
addHtmlToPage(story.heading);
story.chapterUrls.forEach(function(chapterUrl) {
var chapter = getJSONSync(chapterUrl);
addHtmlToPage(chapter.html);
});
addTextToPage("All done");
}
catch (err) {
addTextToPage("Argh, broken: " + err.message);
}
document.querySelector(‘.spinner‘).style.display = ‘none‘;
Promise 异步请求数据
getJSON(‘story.json‘).then(function(story) {
addHtmlToPage(story.heading);
// TODO: for each url in story.chapterUrls, fetch & display
}).then(function() {
// And we‘re all done!
addTextToPage("All done");
}).catch(function(err) {
// Catch any error that happened along the way
addTextToPage("Argh, broken: " + err.message);
}).then(function() {
// Always hide the spinner
document.querySelector(‘.spinner‘).style.display = ‘none‘;
});
上面是一个框架代码，加载每一章节的功能每一实现。由于数组的 forEach 函数不是异步操作，所以无法简单地使用 forEach 对每一章节进行异步请求。可以将数组转换为 Promise 队列来实现遍历效果。
// Start off with a promise that always resolves
var sequence = Promise.resolve();
// Loop through our chapter urls
story.chapterUrls.forEach(function(chapterUrl) {
// Add these actions to the end of the sequence
sequence = sequence.then(function() {
return getJSON(chapterUrl);
}).then(function(chapter) {
addHtmlToPage(chapter.html);
});
});
或者用 array.reduce 来实现
// Loop through our chapter urls
story.chapterUrls.reduce(function(sequence, chapterUrl) {
// Add these actions to the end of the sequence
return sequence.then(function() {
return getJSON(chapterUrl);
}).then(function(chapter) {
addHtmlToPage(chapter.html);
});
}, Promise.resolve());
将框架代码和加载章节的代码组合起来
getJSON(‘story.json‘).then(function(story) {
addHtmlToPage(story.heading);
return story.chapterUrls.reduce(function(sequence, chapterUrl) {
// Once the last chapter‘s promise is done…
return sequence.then(function() {
// …fetch the next chapter
return getJSON(chapterUrl);
}).then(function(chapter) {
// and add it to the page
addHtmlToPage(chapter.html);
});
}, Promise.resolve());
}).then(function() {
// And we‘re all done!
addTextToPage("All done");
}).catch(function(err) {
// Catch any error that happened along the way
addTextToPage("Argh, broken: " + err.message);
}).then(function() {
// Always hide the spinner
document.querySelector(‘.spinner‘).style.display = ‘none‘;
});
实现的效果如下:
现在，能执行异步无阻塞地依次加载数据，并且先加载先显示。不过，这种加载方式还有优化空间。
Promise 优化版1
并行加载数据，全部加载后同时显示。效果如下
Promise 优化版2
并行加载数据，根据章节顺序，依次显示各个加载完成的章节。这种加载方式的效果最后。使用 Chrome 浏览器时候，感觉数据加载很快，猜想就是用这种方式进行数据加载的。
效果如下
最后两个优化版的思路和代码参考 JavaScript Promise, Jake Archibald
参考资料
JavaScript Promise, Jake Archibald