前面的话
JS有很多强大的功能，其中一个是它可以轻松地搞定异步编程。 传统的异步编程是事件，后Node.js的回调函数代替事件，使得异步编程在js领域更加流行。而随着更多程序使用异步编程，事件与回调函数不能满足开发者想做的事情。es6中新增的Promise是一种异步编程的解决方案。
推荐文章：面试问到Promise,这样答就完美了
引入
[js运行机制]
js引擎是基于单线程事件循环的概念构建的，同一时间，只能执行一个代码块，即将执行的代码，将被放入一个任务队列，事件循环（event toop）会执行队列中的下一个任务，它负责监控代码执行并管理任务队列。队列中的任务会从第一个一直执行到最后一个。
[事件模型]
用户点击按钮或按下键盘上的按键会触发类似onclick这样的事件，它会向任务队列添加一个新任务来响应用户的操作。事件模型是JS中最基本的异步编程形式，直到事件触发时才会执行时间处理程序。
<button id="my-button">点击</button>
<script>
let button = document.getElementById('my-button');
button.onclick = function(event) {
console.log("clicked");
}
</script>
这段代码中，点击button后会执行console.log(“clicked”),赋值给onclick的函数被添加到任务队列，只有当前的任务都完成后它才会被执行。
事件模型只适合处理简单的交互,然而将多个独立的异步调用连接在一起会使得程序更加复杂,因为必须跟踪每一个事件的事件目标(button).此外,必须保证事件在添加事件处理程序之后才会被触发。事件模型只适合于响应式用户交互和完成类似的低频功能，但其对更复杂的需求来说却是不灵活的 -->
[回调模式]
Node.js通过普及回调函数来改进异步编程模型，回调模式与事件模型类似，异步代码都会在未来的某个时间点执行，二者的区别是回调模式中被调用的函数是作为参数传入的。
readFile("example.txt",function(err,contents) {
if(err) {
throw err ;
}
console.log(contents);
});
console.log("hi!")；
此示例使用Node.js传统的错误优先（error-first）回调风格。readFile()函数读取磁盘上的某个文件（指定为第一个 参数）,读取结束后执行回调函数（第二个数）。如果出现错误，错误对象会被赋值给回调函数的err参数；如果一切正常，文件内容会以字符串的形式被赋值给contents参数。
由于使用了回调模式，readFlie()函数立即开始执行，当读取磁盘的文件时会暂停执行。也就是说，调用readFlie()函数后，console.log(‘hi’)语句立即执行并且输出“hi”；当readFile()结束执行时，会向任务队列的末尾添加一个新任务，该任务包含回调函数及相应的参数，当队列前面的所有任务完成后才执行该任务，并最终执行console.log(contents)输出所有内容。
readFlie("example.txt",function(err, contents) {
if(err) {
throw err;
}
writeFile("example.txt",function(err) {
if(err) {
throw err;
}
console.log("File was written");
});
} );
这段代码中，成功调用readFile()函数后会执行writeFile()函数的异步调用。在这两个函数中是通过相同的基本模式来检查err是否存在的。当readFile()函数执行完成后，会向队列中添加一个任务，如果没有错误产生，则执行writeFile()函数，然后 当writeFlies()函数执行结束后也向任务队列中添加任务。
虽然这个模式运行效果不错，但如果嵌套了太多的回调函数，很可能会陷入回调地狱。
method1(function(err, result) {
if(err) {
throw err;
}
method2(function(err, result) {
if(err) {
throw err;
}
method3(function(err,result) {
if(err) {
throw err;
}
method4(result)
});
});
});
像示例中这样嵌套多个方法调用，会创建一推难以理解多核调试的代码。如果想实现复杂的功能，回调函数的局限性同样也会显示出来。例如，并行执行几个异步操作，当操作都结束时再通知你；或者同时进行几个异步操作，只取优先完成的操作结果。这样的情况下，回调函数实现起来，就很复杂了，而Promise就能非常好地实现这些情况。
Promise的含义
Promise是异步编程的一种解决方案，比上述传统的解决方案 ——事件与回调函数—— 更合理且更强大。
简单来说，Promise就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）。从语法来说Promise是一个对象，从它可以获取异步操作的消息。
[Promise对象的特点]
-
对象的状态不受外界影响。Promise对象代表一个异步操作，有3种状态Pending(进行中)、Fulfilled(已成功)、Rejected(以失败)。只有异步操作的结果可以决定当前的状态，任何操作都不能改变这个状态。
-
一旦状态改变就不会再变，任何时候都可以得到这个结果。Promise对象的状态只有两种可能：从Pending —— Fulfilled(Resolved)；从Pending —— Rejected.
-
Promise的缺点：
一旦新建Promise就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误不会反应到外部
基本用法
Promise对象是一个构造函数，用来生成Promise实例。
let promise = new Promise(function(resolve, reject) {
// ...some code
if(true/*异步操作成功*/) {
resolve(value);
}else {
reject(error);
}
})
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和 reject，这两个函数由Js引擎提供。
resolve的作用：
将Promise对象的状态从Pending变为Resolved，它在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
reject的作用：
将Promise对象的状态从Pending变为Rejected，它在异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。
每个Promise实例都有then方法，可以用then方法分别指定Resolved状态和Rejected状态的回调函数.
promise.then(function(value) {
// success
},function(error) {
// failure
})
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为Resolved时调用的，第二个回调函数是Promise对象的状态变为Rejected时调用。其中第二个函数是可选的。这两个函数都接受Promise对象传出的值作为参数。
一个Promise对象的简单例子：
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms , 'hi');
});
}
timeout(3000).then((value)=>{
console.log(value);
})
// hi
timeout函数返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间以后，Promise实例的状态变为Resolved，就会触发then方法绑定的回调函数。
Promise 新建后就会立即执行
看一个例子：
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(()=>{
console.log('Resolved');
});
console.log('hi');
// Promise
// hi
// Resolved
上面的代码中，Promise新建后会立即执行，所以先输出的是Promise，然后，then方法指定的回调函数将在当前脚本 所有同步任务执行完成后才会执行，所以Resolved最后输出。
异步加载图片的例子
function loadImg(url) {
return new Promise(function(resolve, reject) {
var image = new Image();
image.onload = function() {
resolve(image);
};
image.onerror = function() {
reject(new Error('Could not load image at' + url ));
}
image.src = url;
});
Promise 包装了一个图片加载的异步操作。如果加载成功，就调用resolve方法，否则调用reject方法.
Promise对象实现的AJAX操作的例子
var getJSON = function(url) {
var promise = new Promise(function(resolve, reject) {
var client = new XMLHttpRequest();
client.open('GET',url);
client.onreadystatechange = handler;
client.responseType = 'json';
client.setRequestHeader('Accept', 'application/json');
client.send();
function handler() {
if(this.readyState !== 4) {
return;
}
if(this.status == 200) {
resolve(this.response);
}else {
reject(new Error(this.statusText));
}
}
});
return promise;
};
getJSON('/post.json').then(function(json) {
console.log('Contents:'+ json);
}, function(error) {
console.log('出错了',error);
});
上面代码中，getJSON是对XMLHHttpRequest对象的封装，用于分发出一个针对JSON数据的HTTP请求，并返回一个Promise对象。
在getJSON内部，函数resolve和函数reject都带有参数.
如果调用resolve函数和reject函数时带有参数，那么这些参数会被传递给回调函数。reject函数的参数通常是Error对象的实例，表示抛出的错误；resolve函数的参数除了正常的之外，还可能是另一个Promise实例.
例如:
let p1 = new Promise(function (resolve, reject) {
// ...
})
let p2 = new Promise(function (resolve, reject) {
// ...
resolve(p1);
})
上面的代码中p1和p2 都是Promise实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作。
[注意]：p1的状态决定了p2的状态。如果p1的状态是Pending,那么p2的回调函数就会等待p1的状态改变：如果p1的状态已经是Resolved或者Rejected,那么p2的回调函数就会立即执行。
例子：
let p1 = new Promise(function(resolve, reject) {
setTimeout(()=>reject(new Error('fail'), 3000));
} )
let p2 = new Promise(function(resolve, reject) {
setTimeout(() => resolve(p1), 1000);
})
p2
.then(result => console.log(result))
.catch(error => console.log(error))
// Error: fail
上面的代码，p1、p2是一个Promise实例，3秒之后变为rejected状态。p2的状态在1秒之后改变，但是resolve方法返回的是p1,p1的状态决定了p2状态。所以后面的then语句都是针对p1，再过2秒，p1变为rejected，触发catch方法指定的回调函数。
调用resolve或reject并不会终结Promise的参数函数执行：
例如：
let p1 = new Promise((resolve, reject) => {
resolve(1);
console.log(2);
})
p1.then(r=> {
console.log(r);
})
// 2 1
上面这个例子，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为resolve执行的回调函数，是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。
串联 Promise.prototype.then()
至此，看起来好像Promise只是将回调函数和setTimeout()函数结合起来，并在此基础上做了一些改进。但Promise所能实现的远超我们目之所及，尤其是很多将Promise串联起来实现更复杂的异步特性的方法。
每一个Promise实例都具有then方法，即then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise实例添加状态改变时的回调函数。
then方法返回的是一个新的Promise实例。可以采用链式写法，串联起来，即在then方法后面再调用另外一个then方法。只有当第一个被完成或被拒绝后，下一个才能被解决
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
console.log(value);
}).then(function() {
console.log('finished');
});
// 42
// finished
调用p1.then()返回第二个Promise，紧接着调用了它的then()方法，只有当第一个Promise被解决之后才会调用第二个then()方法的完成处理程序。
如果将这个示例拆解开：
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
let p2 = p1.then(function(value) {
console.log(value)
});
p2.then(function() {
console.log('finished');
})
在这个非串联版本的代码中，调用p1.then()的结果被存储在了p2中，然后 p2.then()被调用来添加最终的完成程序。
捕获错误
Promise.prototype.catch()方法是.then(null,rejection)的别名，用于指定发生错误时的回调函数。
p.then(val => console.log("fulfilled",val))
.catch((err)=> console.log('rejected',err))
// 等价于
p.then(val => console.log("fulfilled",val))
.then(null,(err)=> console.log('rejected',err))
例子：
let p1 = new Promise(function(resolve, reject) {
// some code
resolve();
});
p1.then(function(value){
// ...
}).catch(function(error){
console.log("发生错误",error)
})
当对象的状态变为Resolved ,则回调then方法指定的回调函数；如果异步操作抛出错误，状态就会变成Rejected，然后调用catch方法指定的回调函数处理这个错误。另外，如果then方法指定的回调函数在运行中抛出错误，也会被catch捕获。
[错误的冒泡性]
Promise对象的错误具有冒泡性质，会一直向后传递，直到被捕获为止，也就是说，错误总会被下一个捕获。
let p1 = new Promise(function(resolve, reject) {
}).then(function(value){
}).then(function(val) {
}).catch(function(error) {
// 处理前面的3个Promise产生的错误
})
其中的任何一个抛出的错误都被最后一个catch捕获。
一般来说，不要在then方法中定义rejected状态的回调函数，而应该总是使用catch方法。
{
//bad
promise
.then(function(data){
// success
}, function(err) {
// error
})
// good
promise
.then(function(dada) {
//success
}).catch(function(err) {
// error
})
}
[错误不传递到外层]
如果不使用catch方法指定错误处理的回调函数，Promise对象抛出的错误不会传递到外层，即不会有任何反应。
let someThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错,因为x没有声明
resolve(x +2);
});
};
someThing().then(function() {
console.log('everything is great')
});
上面的代码，someThing函数产生的Promise对象会报错，但由于没有指定catch方法，因而这个错误不会被捕获，也不会传递到外层，不会终断脚本执行。
[catch方法返回对象]
catch 方法返回的还是一个Promise对象，因此后面还可以接着调用then方法。
let someThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行会报错,因为x没有声明
resolve(x +2);
});
};
someThing().catch(function(error) {
console.log("oh no",error);
})
.then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on
如果此时then方法里面报错了，就与前面的catch无关了。
响应多个实例
如果想通过监听多个Promise来决定下一步的操作，可以使用ES6提供的Promise.all()和Promise.race()这两个方法。
[Promise.all()]
Promise.all方法用于将多个Promise实例包装成新的Promise实例。
var p = Promise.all([p1,p2,p3]);
上面的代码中，Promise.all方法接受一个数组作为参数，p1,p2,p3都是Promise对象的实例;Promise.all()方法的参数不一定是数组，但是必须具有Iterator接口，且返回的每一个成员都是Promise实例。
p的状态由p1,p2,p3的决定，分为两种情况：
-
只有p1,p2,p3的状态都变成resolved，p的状态才会变成resolved，此时p1,p2,p3的返回值组成一个数组，传递给p的回调
-
只要p1,p2,p3中有一个被Rejected，p的状态就变成Rejected,此时第一个被Rejected的实例的返回值会传递给p的回调函数
[情况一]
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
let p2 = new Promise(function(resolve, reject) {
resolve(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.all([p1,p2,p3]);
p4.then(function(value) {
console.log(Array.isArray(value));// true
console.log(value[0]); // 42
console.log(value[1]); // 43
console.log(value[2]); // 44
});
这段代码中，每个Promise解决时都传入一个数字，调用Promise.all()方法创建Promise p4,最终当Promise p1,p2,p3都处于完成状态后p4才被完成。传入p4完成处理程序的结果是一个包含每一个解决值(42,43,44)的数组，这些值都按Promise实例被解决的顺序存储，所以可以根据每个结果来匹配对应的Promise。
[情况二]
所有传入Promise.all()方法的Promise只要有一个被拒绝，那么返回的Promise不等所有的Promise都完成就立即被拒绝
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
let p2 = new Promise(function(resolve, reject) {
reject(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.all([p1,p2,p3]);
p4.catch(function(value) {
console.log(Array.isArray(value)); // false
console.log(value); // 43
});
这个示例中，p2被拒绝并传入值43，没等p1或p3结束执行，p4的拒绝处理程序就立即被调用。(p1和p3的执行结果会结束，只是p4并未等待)。
拒绝处理程序总是接受一个值而非数组，该值来自被拒绝Promise的拒绝值。在本示例中，传入拒绝处理程序的43表示该拒绝来自p2。
[触发catch]
如果作为参数的Promise实例自身定义了catch方法，那么它内Rejected时，并不会触发Promise.all()的catch方法
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(value =>value)
.catch(err => err);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(value =>{value})
.catch(err => err);// 返回一个新实例
Promise.all([p1, p2])
.then(val => console.log(val))
.catch(err => console.log(err))
// ["hello",Error: 报错了]
上面的代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的Promise实例，p2实际上指的是这个实例，该实例执行完catch方法之后也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。
如果p2没有自己的catch函数，就会调用Promise.all()的catch方法。
const p1 = new Promise((resolve, reject) => {
resolve('hello');
})
.then(value =>value)
.catch(err => err);
const p2 = new Promise((resolve, reject) => {
throw new Error('报错了');
})
.then(value =>{value})
Promise.all([p1, p2])
.then(val => console.log(val))
.catch(err => console.log(err));
// Error: 报错了
[Promise.race()]
Promise.race()方法同样是将多个Promise实例包装成一个新的Promise实例。
var p = Promise.race([p1, p2, p3]);
上面的代码中，只要p1、p2、p3中有一个实例率先改变状态，，p的状态就跟着改变。那么率先改变的Promise实例返回值就传递给p的回调函数
let p1 = Promise.resolve(42);
let p2 = new Promise(function(resolve, reject) {
resolve(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.race([p1, p2, p3]);
p4.then(function(value) {
console.log(value); // 42
});
这段代码中，p1创建时便处于已完成状态（关于Promise.resovle()方法接下来介绍），其他Promise用于编排创建。随后，p4的完成处理程序被调用并传入42，其他Promise则被忽略。
实际上，传给Promise.race()方法的Promise会进行竞选，已决出哪一个先被解决，如果先解决的是已经完成的Promise，则返回已完成的Promise；如果先解决的是已拒绝的Promise，则返回已拒绝的Promise.
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
let p2 = Promise.reject(43);
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.race([p1, p2, p3]);
p4.catch(function(value) {
console.log(value); // 43
});
由于p2已处于被拒绝状态（Promise.reject()方法接下来介绍），因而当Promise.race()方法被调用时p4也被拒绝了，尽管p1和p3最终被完成，但由于是发生在 p2被拒绝后，因此它们的结果被忽略。
.resolve()与.reject()
[Promise.resolve()]
Promise.resolve()将现有对象转为Promise对象。前面的Promise.all()和Promise.race()传递的可迭代对象的每一个成员必须是Promise对象，若不是可以采用Promise.resolve()方法转为Promise对象。
Promise.resolve()方法的参数分成以下4种情况：
- 参数是一个Promise实例
如果是一个Promise实例，那么Promise.resolve将不做任何修改，原封不动的返回这个实例。
- 参数是一个thenable对象
thenable对象是指具有then方法的对象。例如：
let lthenable = {
then: function(resolve, reject) {
resolve(42);
}
}
Promise.resolve方法会将这个对象转为Promise对象，然后立即执行thenable对象的then方法
let thenable = {
then: function(resolve, reject) {
resolve(42);
}
};
let p1 = Promise.resolve(thenable);
p1.then(function(value) {
console.log(value);// 42
});
上面的代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved,从而立即执行最后的then方法指定的回调函数，输出42
- 参数不是具有then方法的对象或根本不是对象
如果参数是一个原始值，或者是一个不具有then方法的对象，那 Promise.resolve方法返回一个新的Promise对象，状态为Resolved
var p = Promise.resolve('hello');
p.then(function(s) {
console.log(s);
});
// hello
上面的代码生成一个新的Promise对象的实例P。由于字符串“hello”不属于异步操作(判断方法是字符串对象不具有then方法)，返回Promise实例的状态从生成起就是Resolved,所以回调函数会立即执行。Promise.resolve方法的参数会同时传给回调函数。
- 不带有任何参数
Promise.resolve方法允许在调用时不带有参数，而直接返回一个resolved状态的Promise对象。所以，如果希望得到一个Promise对象，比较方便的方法是直接调用Promise.resolve().
var p = Promise.resolve();
p.then(function() {
// ...
});
【注意】：立即resolve的Promise对象是在本轮“事件循环 ”结束时，而不是在下一轮“事件循环”开始时。
setTimeout(() => {
console.log('three');
},0);
Promise.resolve().then(() => {
console.log('two')
});
console.log('one');
// one
// two
// three
上面代码中,setTimeout(fn, 0)是在下一轮“事件循环”开始时执行Promise.resolve()是在本轮“事件循环"结束时执行的，console.log(“one”)则是立即执行，最先输出。
[Promise.reject()]
Promise.reject()也会返回一个新的Promise实例，状态为rejected。
var p = Promise.reject();
// 等同于
var p = new Promise((resolve, reject) => reject('出错了'));
p.then(null, function(s) {
console.log(s);
})
// 出错了
[注意]：Promise.reject()方法的参数会原封不动地作为后续方法的参数。这一点与Promise.resolve方法不一致.
const thenable = {
then(resolve, reject) {
reject('出错了');
}
};
Promise.reject(thenable)
.catch(error => {
console.log(error === thenable);
});
// true
上面的代码中，Promise.reject方法的参数是thenable对象，执行以后，后面的catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。
扫一扫
39万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
