目录
- 一. Promise 简介
- Promise 是什么？
- 我们为什么需要 Promise？
- Promise 能解决什么？
- Promise 的特点
- Promise 的缺点
- 二. Promise API 解析
- Promise 的构造方法
- Promise 的实例方法
- Promise 类级别方法
- 三. Promise 深度剖析
- Promise 与 setTimeout
- 多层级 .then()
一. Promise 简介
1. Promise 是什么？
ES6 出现的目标是为了使 JavaScript 语言可以编写大型的复杂应用程序，使之成为企业级的开发语言，Promise 也是其中的一环。
从语法上讲 Promise 是个内置对象，抽象来看，它像是一个容器，里面保存着一个异步操作的执行结果，Promise 提供了一套 API 以保证所有异步操作的统一处理方法。
2. 我们为什么需要 Promise？
我们先来举一个简单的 “栗子”，某人需要做三件事（A，B，C），并且要按照这个顺序依次执行，现在将这个转换为传统的代码方式：
// 首先我们要先定义这三件事（A，B，C）分别为三个函数
// 这三个函数都需要提供一个回调来表示事情的结束
function A(callback) {
console.log('Do A.');
callback();
}
function B(callback) {
console.log('Do B.');
callback();
}
function C(callback) {
console.log('Do C.');
callback();
}
// 现在，如果我想要依次做这三件事我需要这样。。。
A(function() {
// 其它的一些代码
B(function() {
// 其它的一些代码
C(function() {
// 其它的一些代码
});
});
});
可以看出，当涉及到异步操作时，曾经的大部分方式都是靠回调的嵌套来实现的，然而这样的方式造成了几个十分严重的问题：
- 出现了多层回调，当加上业务代码后，将会使整体显得臃肿且凌乱。
- 回调的出现导致逻辑的流程不清晰，不具有可读性和维护性。
- 当嵌套层级过多时会产生大量无用数据的滞留以及数据的混杂。
- 使用回调函数便完全浪费了 return 和 throw 关键字的能力。
综上所述，我们需要一种更好的解决办法在某些（并不是全部）方面来取代回调（callback）方式的异步操作。
3. Promise 能解决什么？
- 编写大型应用时，一种高级、实用且能解决实际问题的高大上语法。
- 避免层层嵌套的回调函数，将异步操作以同步操作的流程表达出来，使逻辑更加清晰。
- Promise 提供统一的接口来进行异步操作。
4. Promise 的特点
Promise 是基于状态的，一个 Promise 对象表示了一个异步操作，而这个操作会有三种状态：Pending（进行中）、Resolved（已成功）和 Rejected（已失败）。只有异步操作的执行结果可以决定是哪一种状态，任何其它操作都无法改变。而且，一旦状态改变，就不会再变化。
Promise 的异步操作不需要像回调一样执行异步操作后立即就会调用回调，Promise 允许任何时候都可以得到这个异步操作的结果。也就是说它其实和事件的机制是完全不同的，事件触发时，如果你没有处于监听状态，那么错过了就再也得不到此次事件的结果，而 Promise 则是将结果状态会凝固，等待你去观察这个异步操作的结果。
5. Promise 的缺点
一旦构造了 Promise 实例就代表执行了一个异步操作，也就是说它会立即执行，并且中途无法取消。
如果不设置回调，Promise 内部抛出的错误，不会反应到外部。（有利有弊，具体看怎么用）
Promise 其实只适合单一的异步程序，并不适合不断发生的事件处理，所以使用时，要找好最适合使用的场景。
二. Promise API 解析
1. Promise 构造方法
Promise 本身就是个构造函数，用来生成 Promise 实例。
Promise 构造函数接受一个函数作为参数，而该函数的两个参数分别为 resolve 和 reject，它们分别是两个函数，由 JavaScript 引擎提供。
resolve 函数的作用是将 Promise 对象的状态从 Pending 变为 Resolved，在异步操作成功时调用，并将异步操作的结果作为参数传递出去。
reject 函数的作用是将 Promise 对象的状态从 Pending 变为 Rejected，在异步操作失败时调用，并将异步操作失败所抛出的错误，作为参数传递出去。
const promise = new Promise((resolve, reject) => {
// 模拟一个异步操作
setTimeout(function() {
if ( /* 异步操作成功 */ ) {
// 异步操作成功，携带载荷将状态变为 resolved
resolve(payload);
} else {
// 异步操作失败，携带错误将状态变为 rejected
reject(error);
}
}, 1000);
});
Promise 实例生成后，异步操作就已经开始执行了。
要注意，resolve 和 reject 的调用是对 Promise 对象状态的变更和数据的传递，并不会影响函数的执行，所以 resolve 和 reject 后面如果有可以正常执行的流程代码，它们仍然会被正常执行。如果不想这样，可以使用 return 强制函数执行的结束。
2. Promise 实例方法
（1） Promise.prototype.then()
Promise 实例生成以后，可以用 then 方法来指定 Resolved 状态和 Rejected 状态的回调函数
promise.then((payload) => {
// Resolved 时执行
}, (error) => {
// Rejected 时执行
});
Promise.prototype.then() 的两个参数都需要传递函数，代表着两个状态转变所要执行的回调，每个回调都可以接受 Promise 对象状态转变时传出的值作为参数。其中，then() 的第二个函数是可选的。
回到一开始我们举的 “栗子”，现在，我想通过 Promise 的方式来实现多个异步程序的依次执行，我们可以在 then() 的调用中显式的返回一个新的 Promise 实例，然后就可以链式的且依次的执行 then()，看下面的代码：
const promise = new Promise((resolve, reject) => {
// 模拟异步程序 1：睡觉 1s
setTimeout(() => {
resolve('睡完觉了');
}, 1000);
});
promise.then((val) => {
console.log(val);
return (new Promise((resolve, reject) => {
// 模拟异步程序 2：吃饭 1s
setTimeout(() => {
resolve('吃完饭了');
}, 1000);
}));
}).then((val) => {
console.log(val);
return (new Promise((resolve, reject) => {
// 模拟异步程序 3：喝水 1s
setTimeout(() => {
resolve('喝完水了');
}, 1000);
}));
}).then((val) => {
console.log(val);
});
通过在 then() 的第一个回调函数中，返回新的 Promise 实例，我们可以用同步的流程将异步的操作表示出，相比使用 callback 更加的逻辑清晰。
（2） Promise.prototype.catch()
Promise.prototype.catch 方法是 .then(null, rejection) 的别名，用于指定发生错误时的回调函数，也可以捕获 then() 运行中所抛出的错误。
一般来说，好的方式是不再 then() 里面指定 Rejected 的回调，而是使用 catch() 来对所有错误的捕获（包括 then() 里面抛出的错误）
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
});
promise.then(() => {
return temp + 2;
}).catch((error) => {
console.error(error);
});
// ReferenceError: temp is not defined
3. Promise 类级别方法
（1）Promise.all()
Promise.all() 方法用于将多个 Promise 实例包装成一个新的 Promise 实例。
Promise.all() 接受一个类数组（具有 Iterator）作为参数，每个成员应为 Promise 实例，如果不是，会调用 Promise.resolve() 方法将其转换为 Promise 实例。
Promise.all() 返回的新的 Promise 实例的状态由传递的类数组成员的共同状态决定：
- 当所有成员的状态都变为 Resolved，Promise 实例的状态才会变为 Resolved，此时所有成员的返回值组成一个数组，传递给 Promise 实例的回调函数
- 只要有一个成员的状态变为 Rejected，Promise 实例的状态就变成 Rejected，此时第一个被 Rejected 的实例的返回值会传递给 Promise 实例的回调函数
如果作为 Promise.all() 参数的 Promise 实例自己定义了 catch 方法，那么它的状态变为 Rejected 时，只会触发它自己的 catch()，不会触发 Promise.all() 的 catch()
（2）Promise.race()
Promise.race() 方法和 Promise.all() 几乎是一样的，只是对状态的处理存在差别。
Promise.race() 返回的新的 Promise 实例的状态由传递的类数组成员中最先改变状态的成员的状态决定。
（3）Promise.resolve()
Promise.resolve() 将现有对象转换为 Promise 对象。
Promise.resolve() 的参数分成四种情况：
- Promise 实例：直接返回这个实例。
- thenable 对象
- thenable 对象指的是具有 then 方法的对象。
- Promise.resolve() 会将这个对象转为 Promise 对象，然后就立即执行 thenable 对象的 then 方法，相当于将这个对象的 then 方法作为 Promise 构造函数的参数，返回一个新的 Promise 实例。
- 其余情况
- Promise.resolve() 返回一个新的 Promise 对象，状态为 Resolved，使用 then() 时，会将 Promise.resolve() 的参数传递给 then() 的回调函数中。
- 这个立即 Resolved 的 Promise 对象，实在本次 “事件循环” 的结束时才开始执行。
（4）Promise.reject()
Promise.reject() 会返回一个新的 Promise 实例，状态为 Rejected。
Promise.reject() 等价于下面的写法：
Promise.reject(obj);
// 等价于
new Promise((resolve, reject) => reject(obj));
Promise.reject() 会将参数原封不动的作为 reject() 的参数。
三. Promise 深度剖析
1. Promise 与 setTimeout
我们来看这样的一段代码：
setTimeout(() => {
console.log(1);
}, 0);
(new Promise((resolve, reject) => {
resolve();
})).then(() => {
console.log(2);
});
console.log(3);
这段代码的运行结果的顺序是 3，2，1，原因如下：
- 对于 setTimeout 我们应该都知道，它是放在下一轮 “事件循环” 的开始，所以它一定要在本轮事件结束后才会执行，也就是输出 1 一定要在输出 3 以后
- 接下来就是 Promise 异步执行的问题，虽然 Promise 实例中并没有真正意义上的异步程序，而是直接将状态变更为 Resolved，且立即使用 then 进行状态的观察，但是实质上，立即 Resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务，所以，输出 2 一定要在输出 3 以后
- 最后，就是 Promise 和 setTimeout 之间的问题，上面也说到了，setTimeout 是在下一轮事件的开始，而 Promise 又实在本一轮事件的结束，所以，很明显，输出 1 要在输出 2 以后
2. 多层级 .then()
一个 Promise 实例可以连续使用 .then() 来绑定回调函数：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
});
promise.then(() => {
console.log(1);
}).then(() => {
console.log(2);
});
// 1
// 2
如果在 .then() 的回调中显式的指定一个返回值（非 Promise 实例），这个值会被作为下一个链式 .then() 回调函数中的参数：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
});
promise.then(() => {
console.log(1);
return 'Promise';
}).then((val) => {
console.log(val);
});
// 1
// Promise
如果在 .then() 的回调中返回的是一个 Promise 实例，那么下一个链式 .then() 会在这个 Promise 实例的状态变更时会被调用，并且 resolve 所传递的值会被作为下一个链式 .then() 回调函数中的参数：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
}, 1000);
});
promise.then(() => {
console.log(1);
return (new Promise((resolve, reject) => {
setTimeout(function() {
resolve('Promise');
}, 1000);
}));
}).then((val) => {
console.log(val);
});
// 1
// Promise
网友评论