Promise 详解（上）：使用篇
2024-02-25 07:10:10
在 JavaScript 的世界里，异步操作就像生活中的快递，你下单后不会一直傻等，而是去做别的事情，等快递到了再签收。处理这些“快递”——异步操作，以前我们依赖回调函数，但这就像快递太多，签收单都乱成一团，代码也变得难以维护。为了解决这个问题，ES6 引入了 Promise，就像给每个快递都贴上了专属标签，让异步操作变得井然有序。
Promise 其实就是一个对象，它代表着未来可能发生的事情，就像你下单后，快递还没到，但你知道它最终要么送达（Fulfilled），要么丢失（Rejected）。在这之前，Promise 处于等待状态（Pending），就像你期待着快递的到来。
那怎么创造一个 Promise 呢？很简单，就像你网购下单一样，用 new Promise() 就可以创建一个 Promise 对象。这个对象会接收一个函数作为参数，我们称之为 executor 函数，它就像快递员，负责处理你的包裹。这个函数有两个参数，resolve 和 reject，分别对应着快递送达和丢失的情况。
举个例子，假设我们模拟一个网络请求，1 秒后返回数据：
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('数据获取成功！'); // 快递送达了
}, 1000);
});
在这个例子中，我们用 setTimeout 模拟了 1 秒的网络延迟，1 秒后，resolve 函数被调用，表示数据获取成功，就像快递员告诉你包裹已送达。
那我们怎么知道快递送到了呢？Promise 提供了 then 方法，就像你留的收货地址，快递员会把包裹送到这里。then 方法接收两个函数作为参数，第一个函数会在 Promise 变成 Fulfilled 状态时执行，也就是快递送达时你会签收；第二个函数会在 Promise 变成 Rejected 状态时执行，也就是快递丢失时你会收到通知。
promise.then(result => {
console.log(result); // 输出：数据获取成功！
}, error => {
console.log(error); // 处理错误
});
在这个例子中，当 Promise 的状态变成 Fulfilled 时，第一个函数会被执行，输出“数据获取成功！”，就像你收到了快递并查看了里面的东西。
更厉害的是，Promise 还可以像接力赛一样，一个 then 方法后面可以再接另一个 then 方法，形成链式调用。这就好像你把收到的快递再次打包，寄给另一个人。
promise.then(result => {
console.log(result); // 输出：数据获取成功！
return new Promise((resolve, reject) => {
// 对数据进行处理，然后再次寄出去
setTimeout(() => {
resolve('数据处理完成！');
}, 1000);
});
}).then(result => {
console.log(result); // 输出：数据处理完成！
});
在这个例子中，第一个 then 方法处理完数据后，返回一个新的 Promise，第二个 then 方法会继续处理这个新的 Promise，就像快递被传递到了下一站。
当然，快递也可能丢失，Promise 也可能出错。为了处理这种情况，我们可以使用 catch 方法，就像你设置了快递丢失后的处理方案。
promise.catch(error => {
console.log(error); // 处理错误
});
catch 方法会在 Promise 变成 Rejected 状态时执行，也就是快递丢失时你会收到通知并进行处理。
总而言之，Promise 就像一个快递管家，帮你管理各种异步操作，让你的代码更加清晰易读，不再被回调函数搞得晕头转向。
常见问题及其解答
1. Promise 和回调函数有什么区别？
Promise 和回调函数都是处理异步操作的方式，但 Promise 更加灵活和易于管理。回调函数容易陷入“回调地狱”，代码嵌套层级过多，难以维护。Promise 使用链式调用，代码结构更加清晰。
2. Promise 的三种状态是如何转换的？
Promise 的初始状态是 Pending，表示操作正在进行。当操作成功完成时，状态会变为 Fulfilled，并带有结果值。当操作失败时，状态会变为 Rejected，并带有错误信息。状态的转换是单向的，一旦变成 Fulfilled 或 Rejected，就不会再改变。
3. then 方法和 catch 方法有什么区别？
then 方法用于处理 Promise 成功的情况，它接收两个参数，第一个参数是 Promise 变成 Fulfilled 状态时执行的函数，第二个参数是 Promise 变成 Rejected 状态时执行的函数（可选）。catch 方法专门用于处理 Promise 失败的情况，它接收一个参数，是 Promise 变成 Rejected 状态时执行的函数。
4. 如何创建一个 Promise 对象？
使用 new Promise() 可以创建一个 Promise 对象，它接收一个 executor 函数作为参数。executor 函数有两个参数，resolve 和 reject，分别用于将 Promise 的状态改变为 Fulfilled 或 Rejected。
5. 如何处理多个 Promise 对象？
可以使用 Promise.all() 方法来处理多个 Promise 对象。Promise.all() 接收一个 Promise 对象数组作为参数，当所有 Promise 对象都变成 Fulfilled 状态时，它会返回一个新的 Promise 对象，该对象的 resolve 值是一个包含所有 Promise 对象结果值的数组。如果任何一个 Promise 对象变成 Rejected 状态，Promise.all() 返回的 Promise 对象也会变成 Rejected 状态。
