Promise，知其然更知其所以然

前端

2023-12-04 10:14:55

前言

在当今快节奏、高并发的互联网时代，异步编程已成为开发人员的必备技能。而 Promise，作为 JavaScript 中处理异步编程的利器，更是受到了广泛的欢迎和应用。

Promise 的出现，极大地简化了异步编程的复杂性，让开发者能够以一种更加优雅、更加可控的方式来处理异步任务。

然而，仅仅知道 Promise 的用法是不够的，要想真正掌握 Promise，还需要深入了解其背后的工作原理。

Promise 的诞生

在 Promise 诞生之前，开发者处理异步任务的方式主要有两种：回调函数和事件监听器。

回调函数是一种非常直观的处理异步任务的方式，它允许我们在异步任务完成后执行一些操作。例如：

function getUser(id, callback) {
  setTimeout(() => {
    callback({ id: id, name: 'John Doe' });
  }, 1000);
}

getUser(1, (user) => {
  console.log(user);
});

上面的代码中，getUser 函数接受两个参数：id 和 callback。id 是要获取的用户 ID，callback 是在异步任务完成后要执行的函数。

当我们调用 getUser 函数时，它会立即返回，而不会等待异步任务完成。然后，它会将用户 ID 传递给 callback 函数，并立即执行 callback 函数。

回调函数是一种非常简单的处理异步任务的方式，但它也有一个明显的缺点：代码的可读性差。

当我们使用回调函数时，代码很容易变得杂乱无章，难以理解。例如，下面的代码使用回调函数来获取多个用户：

getUser(1, (user) => {
  console.log(user);

  getUser(2, (user) => {
    console.log(user);

    getUser(3, (user) => {
      console.log(user);
    });
  });
});

上面的代码中，嵌套的回调函数使得代码变得难以理解。而且，如果我们要获取更多的用户，代码就会变得更加难以阅读和维护。

事件监听器也是一种处理异步任务的方式，但它只适用于某些特定的场景，比如处理 DOM 事件。

Promise 的优势

Promise 的出现，解决了回调函数的缺点，让异步编程变得更加容易和可控。

Promise 是一个对象，它代表一个异步操作的最终完成或失败。当异步操作完成时，Promise 会被解析（resolve），并带有操作的结果。当异步操作失败时，Promise 会被拒绝（reject），并带有操作的错误信息。

我们可以使用 then 方法来处理 Promise。then 方法接受两个参数：一个成功回调函数和一个失败回调函数。

成功回调函数将在 Promise 被解析时执行，失败回调函数将在 Promise 被拒绝时执行。

例如，我们可以使用 Promise 来重写上面的代码：

const getUser = (id) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: id, name: 'John Doe' });
    }, 1000);
  });
};

getUser(1)
  .then((user) => {
    console.log(user);
    return getUser(2);
  })
  .then((user) => {
    console.log(user);
    return getUser(3);
  })
  .then((user) => {
    console.log(user);
  });

上面的代码中，我们使用 getUser 函数来获取多个用户。然后，我们使用 then 方法来处理每个 Promise。

当一个 Promise 被解析时，就会执行相应的成功回调函数。当一个 Promise 被拒绝时，就会执行相应的失败回调函数。

使用 Promise 可以让我们的代码更加简洁和可读。而且，Promise 还支持链式调用，这使得我们的代码更加优雅。

Promise 的工作原理

Promise 的工作原理其实很简单。

当我们创建一个 Promise 对象时，它会立即进入 pending 状态。这意味着，Promise 还没有被解析或拒绝。

然后，异步操作就会开始执行。当异步操作完成后，Promise 会被解析或拒绝，并带有操作的结果或错误信息。

如果 Promise 被解析，就会执行相应的成功回调函数。如果 Promise 被拒绝，就会执行相应的失败回调函数。

Promise 的最佳实践

在使用 Promise 时，我们应该遵循一些最佳实践，以确保我们的代码更加健壮和易读。

1. 始终使用 `try...catch` 来处理 Promise

在处理 Promise 时，我们应该始终使用 try...catch 来捕获错误。

try {
  const user = await getUser(1);
  console.log(user);
} catch (error) {
  console.error(error);
}

上面的代码中，我们使用 try...catch 来捕获 getUser 函数可能抛出的错误。

如果 getUser 函数抛出错误，就会执行 catch 块中的代码。

2. 不要在 Promise 中执行耗时的操作

Promise 是一种异步编程的工具，它不应该被用来执行耗时的操作。

如果我们在 Promise 中执行耗时的操作，就会导致 Promise 的解析或拒绝被延迟。

这可能会导致我们的代码出现问题，比如超时或死锁。

3. 不要在 Promise 中返回 Promise

在 Promise 中返回 Promise 是一个非常不好的做法。

这会导致 Promise 的嵌套，使得代码难以理解和维护。

如果我们需要在 Promise 中返回另一个 Promise，我们可以使用 Promise.all 或 Promise.race 来解决。

4. 使用 Promise 的链式调用

Promise 的链式调用是一种非常优雅的写法。

它可以让我们将多个 Promise 连接起来，并以一种非常直观的方式来处理它们。

getUser(1)
  .then((user) => {
    console.log(user);
    return getUser(2);
  })
  .then((user) => {
    console.log(user);
    return getUser(3);
  })
  .then((user) => {
    console.log(user);
  });