从基础到进阶，打造属于自己的Promise库

前端

2023-11-19 04:22:32

深入浅出，探索Promise的核心概念

Promise，意为承诺，是JavaScript中表示异步操作的独特对象，它承载着未来的结果。Promise由三种状态构成：等待（pending）、已完成（fulfilled）和已拒绝（rejected）。我们用生动的例子来理解这些状态：

等待（pending） ：就像一位厨师正在准备美味佳肴，等待着食材的烹饪完成。
已完成（fulfilled） ：当大厨烹饪完成，将菜肴端上餐桌，我们终于可以享用美味了。
已拒绝（rejected） ：假设烹饪过程中突然停电了，大厨无法完成菜肴，只能抱歉地通知我们无法提供餐点了。

灵活运用，掌握Promise的使用技巧

在实际应用中，我们可以灵活运用Promise的特性，让异步操作更加井然有序。Promise提供了两个关键方法：

then()方法 ：当Promise状态变为已完成或已拒绝时，then()方法会被触发，让我们能够执行相应的操作。
catch()方法 ：当Promise状态变为已拒绝时，catch()方法会被触发，让我们能够捕获错误并进行处理。

通过then()和catch()方法，我们可以轻松地处理异步操作的结果，让代码更具可读性和可维护性。

逐行剖析，手写实现Promise库

现在，让我们迈入实践的领域，用自己的双手打造一个Promise库。我们将从创建Promise对象开始，一步步实现它的核心功能：

创建Promise对象 ：使用Promise构造函数创建Promise对象，它接受一个执行器函数作为参数，该函数负责执行异步操作并最终调用resolve()或reject()方法来改变Promise的状态。
resolve()方法 ：当异步操作成功完成时，调用resolve()方法将Promise的状态变为已完成，并将结果作为参数传递给then()方法。
reject()方法 ：当异步操作失败时，调用reject()方法将Promise的状态变为已拒绝，并将错误信息作为参数传递给catch()方法。
then()方法 ：当Promise状态变为已完成或已拒绝时，then()方法都会被触发，它接受两个参数，分别是成功回调和失败回调。成功回调负责处理已完成状态下的结果，失败回调负责处理已拒绝状态下的错误信息。
catch()方法 ：当Promise状态变为已拒绝时，catch()方法会被触发，它接受一个参数，即失败回调，负责处理错误信息。

实践出真知，应用Promise库解决实际问题

掌握了Promise的原理和使用方法后，我们就可以将它应用于实际问题中。举个例子，我们想异步加载一张图片，并根据加载结果显示不同的内容：

// 使用我们的Promise库
const promise = new Promise((resolve, reject) => {
  const image = new Image();
  image.onload = () => resolve(image);
  image.onerror = () => reject(new Error('图片加载失败'));
  image.src = 'image.png';
});

// 使用then()和catch()方法处理结果
promise
  .then((image) => {
    // 图片加载成功，显示图片
    document.body.appendChild(image);
  })
  .catch((error) => {
    // 图片加载失败，显示错误信息
    alert(error.message);
  });