ES6——Promise对象总结

一： `Promise`对象的两个特点

对象的状态不受外界影响
Promise对象代表一个异步操作，有三种状态：pending(进行中) fulfilled(已成功) rejected(已失败) 。
只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
一旦状态改变，就不会再变，任何时候都可以得到这个结果。
Promise对象的状态的改变：
- 从pending到fulfilled
- 从pending到rejected
只要这两种情况的某种发生，状态就凝固了，不会再改变，会一直保持这个结果，称为resolved(已定型)

二：基本用法

ES6规定，Promise对象是一个构造函数，用来生成Promise实例

const promise = new Promise(function(resolve,reject){
	// ...
	if(/*异步操作成功 */){
		resolve(value);
	}else{
		reject(error);
	}
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由JavaScript引擎提供。

resolve函数的作用：
将Promise对象的状态从"未完成"变为"成功"，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用：
将Promise对象的状态从“未完成”变为失败，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去；

Promise实例生成以后，可以用then方法指定resolved状态和rejected状态的回调函数

promise.then(function(value){
	// success
},function(error){
	// failure
})

其中，第二个函数可选。

注意：
调用resolve和reject并不会终结Promise的参数函数的执行。

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

扫描二维码关注公众号，回复： 11516100 查看本文章

new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

三：`Promise`的方法

原型上的方法：

Promise.prototype.then() // 为Promise实例添加状态改变时的回调函数
Promise.prototype.catch() // 用于指定发生错误时的回调函数
Promise.prototype.finally() // 用于指定不管Promise最后状态如何，都会执行的操作

接受一组Promsie实例作为参数：

Promise.all() // 实例中只要有一个被rejected,状态变为rejected，返回第一个rejected的实例的返回值；都为fulfilled,则返回所有实例的返回值数组；
Promise.race() // 只要有一个实例率先改变状态，那个实例的返回值就被传出给回调函数；
Promise.allSettled() // 等待所有实例返回结果，无论fulfilled还是rejected;状态总是fulfilled。返回给回调函数的是一个数组，里面是每个Promise实例
Promise.any() // 参数实例只要有一个变为fulfilled状态，包装实例就会变成fulfilled

其他

Promise.resolve() // 将对象转为Promise对象
Promise.reject() // 返回一个新的Promsie实例，实例状态为rejected;里面的参数会原封不动作为reject的理由，变成后续方法的参数。
Promise.try() // 模拟try代码块

四：应用

加载图片
我们可以将图片的加载写成一个Promise，一旦加载完成，Promise的状态就发生变化。

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};