What is Promise?
Promise是一个构造函数，接受一个参数（Function），并且该参数接受两个参数resolve和reject（分别表示异步操作执行成功后的回调函数、执行失败后的回调函数）
var p = new Promise(function(resolve, reject){ setTimeout(function(){ console.log('执行完成'); resolve('成功了！'); }, 2000); });
运行代码，2秒后输出“执行完成”。注意，这里只是new了一个对象，并没有调用它，所以我们用Promise时是包在一个函数中的，如下：
function runAsync(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ console.log('执行完成'); resolve('成功了！'); }, 2000); }); return p; } runAsync();
Pormise的优势：
1. 解决回调函数层层嵌套的问题：
（1） 有时我们需要进行一些有依赖关系的异步操作，比如有多个请求，后一个请求需要上一次请求的返回结果，过去常规的做法是使用callback层层嵌套，这样的代码可读性和维护性都很差，比如：
firstAsync(function(data){ //处理得到的 data 数据 //.... secondAsync(function(data2){ //处理得到的 data2 数据 //.... thirdAsync(function(data3){ //处理得到的 data3 数据 //.... }); }); });
（2） 使用Promise的话，代码就会变得扁平化，可读性更高了。比如：
firstAsync() .then(function(data){ //处理得到的 data 数据 //.... return secondAsync(); }) .then(function(data2){ //处理得到的 data2 数据 //.... return thirdAsync(); }) .then(function(data3){ //处理得到的 data3 数据 //.... });
2. 更好的进行错误捕捉：
（1） 使用callback嵌套，可能会造成无法捕捉异常、异常捕捉不可控等问题。比如：
function fetch(callback) { setTimeout(() => { throw Error('请求失败') }, 2000) } try { fetch(() => { console.log('请求处理') // 永远不会执行 }) } catch (error) { console.log('触发异常', error) // 永远不会执行 } // 程序崩溃 // Uncaught Error: 请求失败
（2） 使用Promise的话，通过reject方法吧Promise的状态置为rejected，这样我们就可以在then方法中捕捉到，并且执行“失败”情况的回调。比如：
function fetch(callback) { return new Promise((resolve, reject) => { setTimeout(() => { reject('请求失败'); }, 2000) }) } fetch() .then( function(data){ console.log('请求处理成功！'); console.log(data); }, function(reason, data){ console.log('触发异常！'); console.log(reason); } );
同时，也可以在catch方法中处理reject回调。比如：
function fetch(callback) { return new Promise((resolve, reject) => { setTimeout(() => { reject('请求失败'); }, 2000) }) } fetch() .then( function(data){ console.log('请求处理成功！'); console.log(data); } ) .catch(function(reason){ console.log('触发异常！'); console.log(reason); });
在上面的代码中我们用到了Promise的then、catch方法，下面我们再来介绍一下Promise中常用的一些方法。
then方法：
then方法就是将原来使用callback回调的写法分离出来，在异步操作完成之后，使用链式调用的方法执行回调函数。
then方法包含三个参数：
- 成功回调
- 失败回调
- 前进回调（规范没有要求实现前进回调）
返回一个Promise对象，也可以直接返回一个数据。比如：
function runAsync1(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务1执行完成'); resolve('成功了1'); }, 1000); }); return p; } function runAsync2(){ var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('异步任务2执行完成'); resolve('成功了2'); }, 2000); }); return p; } runAsync1() .then(function(data){ console.log(data); return runAsync2(); }) .then(function(data){ console.log(data); return '直接返回数据'; //这里直接返回数据 }) .then(function(data){ console.log(data); }); /* 输出： 异步任务1执行完成 成功了1 异步任务2执行完成 成功了2 直接返回数据 */
resolve方法：
该方法把Promise的状态置为完成态（Resolved），这是then方法就能捕捉到变化，并执行“成功”回调的方法。比如：
//做饭 function cook(){ console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('做饭完毕！'); resolve('鸡蛋炒饭'); }, 1000); }); return p; } //吃饭 function eat(data){ console.log('开始吃饭：' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('吃饭完毕!'); resolve('完成！'); }, 2000); }); return p; }
使用then链式调用：
cook() .then(function(data){ return eat(data); }) .then(function(data){ console.log(data); }); //可以简写 cook() .then(eat) .then(function(data){ console.log(data); }); /* 输出： 开始做饭。 做饭完毕！ 开始吃饭：鸡蛋炒饭 吃饭完毕 完成！ */
reject方法：
该方法把Promise的状态置为已失败（rejected），then方法捕捉到变化，并执行“失败”回调的方法。比如：
//做饭 function cook(){ console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('做饭失败！'); reject('烧焦的米饭'); }, 1000); }); return p; } //吃饭 function eat(data){ console.log('开始吃饭：' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('吃饭完毕!'); resolve('完成！'); }, 2000); }); return p; } cook() .then(eat, function(data){ console.log(data + '没法吃!'); }) /* 输出： 开始做饭。 做饭失败！ 烧焦的米饭没法吃！ */
catch方法：
1. 和then方法的第二个参数reject方法用法一致，执行“失败”回调方法
cook() .then(eat) .catch(function(data){ console.log(data + '没法吃!'); });
2. 当执行第一个参数resolve方法时，如果抛出了异常（代码错误），js不会卡死，而进入到catch方法中
//做饭 function cook(){ console.log('开始做饭。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('做饭完毕！'); resolve('鸡蛋炒饭'); }, 1000); }); return p; } //吃饭 function eat(data){ console.log('开始吃饭：' + data); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('吃饭完毕!'); resolve('完成！'); }, 2000); }); return p; } cook() .then(function(data){ throw new Error('米饭被打翻了！'); eat(data); }) .catch(function(data){ console.log(data); }); /* 输出： 开始做饭。 做饭完毕！ Error：米饭被打翻了！ at:xxx.html */
还可以添加多个 catch，实现更加精准的异常捕获。比如：
somePromise.then(function() { return a(); }).catch(TypeError, function(e) { //If a is defined, will end up here because //it is a type error to reference property of undefined }).catch(ReferenceError, function(e) { //Will end up here if a wasn't defined at all }).catch(function(e) { //Generic catch-the rest, error wasn't TypeError nor //ReferenceError });
all方法：
该方法提供了并行执行异步操作的能力，在所有异步操作执行完毕之后才会进入到then方法中执行回调方法。
all方法接受一个数组，里面的值最终都返回一个Promise对象。all会把所有的异步操作的结果放到一个数组中传递给then方法。比如//切菜
function cutUp(){ console.log('开始切菜。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('切菜完毕！'); resolve('切好的菜'); }, 1000); }); return p; } //烧水 function boil(){ console.log('开始烧水。'); var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log('烧水完毕！'); resolve('烧好的水'); }, 1000); }); return p; } Promise .all([cutUp(), boil()]) .then(function(results){ console.log("准备工作完毕："); console.log(results); }); /* 输出： 开始切菜。
开始烧水。 切菜完毕！ 烧水完毕！ 准备工作完毕： ["切好的菜","烧好的水"] */
race方法：
race按字面意思是，竞赛/赛跑。与all不同的是，所有的异步操作中只要有一个异步操作完成，就立即执行then回调方法。比如：
Promise .race([cutUp(), boil()]) .then(function(results){ console.log("准备工作完毕："); console.log(results); }); /* 输出： 开始切菜。 开始烧水。 切菜完毕！ 准备工作完毕： 切好的菜 烧水完毕！ */
race 使用场景很多。比如我们可以用 race 给某个异步请求设置超时时间，并且在超时后执行相应的操作。比如：
//请求某个图片资源 function requestImg(){ var p = new Promise(function(resolve, reject){ var img = new Image(); img.onload = function(){ resolve(img); } img.src = 'xxxxxx'; }); return p; } //延时函数，用于给请求计时 function timeout(){ var p = new Promise(function(resolve, reject){ setTimeout(function(){ reject('图片请求超时'); }, 5000); }); return p; } Promise .race([requestImg(), timeout()]) .then(function(results){ console.log(results); }) .catch(function(reason){ console.log(reason); });
上面代码 requestImg 函数异步请求一张图片，timeout 函数是一个延时 5 秒的异步操作。我们将它们一起放在 race 中赛跑，结果如下：
- 如果 5 秒内图片请求成功，那么便进入 then 方法，执行正常的流程。
- 如果 5 秒钟图片还未成功返回，那么则进入 catch，报“图片请求超时”的信息。