Promise 的第一次尝试：一步步实现

2024-01-09 09:06:32

Promise 简介

Promise 是 JavaScript 中处理异步操作的一种解决方案。它提供了一种统一、简洁的方式来处理异步任务的执行结果，无论是成功还是失败。与回调函数相比，Promise 具有更好的代码可读性和可维护性。

Promise 对象本质上是一个容器，它保存着异步操作的状态（完成、失败）和结果。您可以通过 then() 方法来监听 Promise 对象的状态变化，并在不同的状态下执行不同的操作。

Promise 的基本用法

以下是一个简单的 Promise 实例：

const promise = new Promise((resolve, reject) => {
  // 在这个例子中，我们模拟一个异步操作，通过 setTimeout 来延迟 1 秒执行
  setTimeout(() => {
    // 操作成功，调用 resolve() 将结果传递给 Promise
    resolve("操作成功");
  }, 1000);
});

// 在这里，我们使用 then() 方法来监听 Promise 的状态变化
promise.then((result) => {
  // 如果 Promise 成功，则执行这个回调函数
  console.log("Promise 成功：", result);
}).catch((error) => {
  // 如果 Promise 失败，则执行这个回调函数
  console.log("Promise 失败：", error);
});

在这个例子中，我们创建了一个 Promise 对象，并在构造函数中传递了一个函数作为参数。这个函数有两个参数：resolve 和 reject。resolve 函数用于将成功的结果传递给 Promise，而 reject 函数用于将错误信息传递给 Promise。

我们使用 setTimeout() 函数来模拟一个异步操作，在 1 秒后执行。当异步操作完成时，我们调用 resolve() 函数，并将 "操作成功" 的结果传递给 Promise。

最后，我们使用 then() 方法来监听 Promise 的状态变化。如果 Promise 成功，则执行第一个回调函数，并将结果打印到控制台。如果 Promise 失败，则执行第二个回调函数，并将错误信息打印到控制台。

Promise 的高级用法

Promise 不仅可以用来处理简单的异步操作，还可以用来处理更复杂的情况，例如并行任务和错误处理。

并行任务

Promise 提供了一种简单的方法来处理并行任务。您可以使用 Promise.all() 方法来同时执行多个异步任务，并在所有任务都完成后执行一个回调函数。

const promises = [
  Promise.resolve("任务 1"),
  Promise.resolve("任务 2"),
  Promise.resolve("任务 3")
];

Promise.all(promises).then((results) => {
  // 所有任务都成功完成，将结果打印到控制台
  console.log("所有任务都成功完成：", results);
}).catch((error) => {
  // 至少有一个任务失败，将错误信息打印到控制台
  console.log("至少有一个任务失败：", error);
});

在这个例子中，我们创建了一个包含三个 Promise 对象的数组。我们使用 Promise.all() 方法来同时执行这三个任务。当所有任务都成功完成后，我们调用 then() 方法，并将结果打印到控制台。如果至少有一个任务失败，则执行 catch() 方法，并将错误信息打印到控制台。

错误处理

Promise 提供了一种清晰、简洁的方式来处理错误。您可以使用 catch() 方法来捕获 Promise 中的错误，并执行相应的操作。

const promise = new Promise((resolve, reject) => {
  // 在这个例子中，我们模拟一个异步操作，通过 setTimeout 来延迟 1 秒执行
  setTimeout(() => {
    // 操作失败，调用 reject() 将错误信息传递给 Promise
    reject(new Error("操作失败"));
  }, 1000);
});

// 在这里，我们使用 then() 方法来监听 Promise 的状态变化
promise.then((result) => {
  // 如果 Promise 成功，则执行这个回调函数
  console.log("Promise 成功：", result);
}).catch((error) => {
  // 如果 Promise 失败，则执行这个回调函数
  console.log("Promise 失败：", error);
});