当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript Promise：您需要了解的基础知识

JavaScript Promise：您需要了解的基础知识

来源：dev.to 2024-10-01 11:22:00 0浏览收藏

推广推荐

免费电影APP ➜

支持 PC / 移动端，安全直达

本篇文章向大家介绍《JavaScript Promise：您需要了解的基础知识》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

JavaScript Promise：您需要了解的基础知识

介绍

javascript 是一种单线程编程语言，这意味着它一次只能运行一个任务。对于诸如获取数据或设置计时器之类的异步操作来说，这变得很棘手，这可能会阻塞执行流程并减慢您的应用程序的速度。

为了在不冻结线程的情况下处理这些异步任务，我们遇到了promise——一个简化异步编程的强大工具。借助 promises，您可以更有效地管理长时间运行的任务，编写更干净、更具可读性的代码，并避免可怕的“回调地狱。”

在本文中，我的目标是让您熟悉 promise 是什么、它们如何工作以及它们如何简化异步编程。

什么是承诺？

想象一下您正在一家餐厅点餐。下订单后，您无需在厨房等待食物准备好。相反，您可以在厨房在后台准备餐点的同时继续交谈或享受氛围。餐厅承诺一旦食物准备好就会为您提供食物。您可以相信这个承诺，因为最终会发生以下两种情况之一：您的餐食将到达（已完成），或者厨房会通知您他们无法完成订单（已拒绝） )。

在 javascript 中，promise 以类似的方式工作。当您要求 javascript 执行一些需要时间的操作（例如从服务器获取数据）时，它会返回一个 promise。这个promise不会立即给你结果。相反，它会告诉您：“工作完成后我会回复您。”在此期间，其余代码将继续运行。任务完成后，promise 为：

已完成（任务成功），或
已拒绝（任务失败），您可以相应处理结果。

promise 在 javascript 中如何工作

promise 代表一个可能现在、将来或永远不可用的值。它具有三种状态：

待处理：任务仍在进行中，最终结果（完成或拒绝）尚未确定。
已完成：任务已成功完成，结果已出。
已拒绝：任务失败，有错误可处理

1. 创造一个承诺

要创建 promise，可以使用 promise 构造函数，它采用一个具有两个参数的函数（称为执行器）：resolve 和reject。当 promise 满足时，将调用resolve函数，而当被拒绝时，将调用reject函数。

const mypromise = new promise((resolve, reject) => {
  // simulating an asynchronous task (e.g., fetching data)
  const success = true; // simulate success or failure

  if (success) {
    resolve("operation completed successfully!"); // fulfill the promise
  } else {
    reject("operation failed."); // reject the promise
  }
});

2. 解决和拒绝承诺

一旦创建了promise，您可以通过调用resolve或reject来决定其结果：

resolve(value)：当异步操作成功完成时调用此函数。它将一个值传递给等待 promise 履行的处理程序。
reject(error)：当操作失败时调用该函数。它将错误消息传递给等待 promise 被拒绝的处理程序。

3. 消费承诺

创建 promise 后，下一步就是使用它。 javascript 提供了几种处理 promise 结果的方法：.then()、.catch() 和 .finally()。这些方法中的每一个都有特定的目的，并允许您有效地管理异步操作的结果。

使用 .then() 处理已解决的 promise：.then() 方法用于指定当 promise 完成时应该发生什么。它需要两个可选参数：一个用于解析值的回调，另一个用于处理拒绝。

const fetchdata = () => {
  return new promise((resolve) => {
    settimeout(() => {
      resolve("data fetched successfully!");
    }, 1000);
  });
};

fetchdata()
  .then(result => {
    console.log(result); // logs: data fetched successfully!
  });

使用 .catch() 处理拒绝：.catch() 方法专门用于处理 promise 执行期间发生的错误。这使其成为处理拒绝的干净方法。

const fetchwitherror = () => {
  return new promise((resolve, reject) => {
    settimeout(() => {
      reject("error fetching data."); // simulating an error
    }, 1000);
  });
};

fetchwitherror()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error); // logs: error fetching data.
  });

使用 .finally() 进行最终或清理操作：.finally() 方法允许您在 promise 解决后执行代码，无论它是被履行还是被拒绝。这对于应在成功和失败场景中运行的清理操作或任务非常有用。

fetchdata()
  .then(result => {
    console.log(result); // logs: data fetched successfully!
  })
  .catch(error => {
    console.error(error); // handle error
  })
  .finally(() => {
    console.log("promise has settled."); // logs after either success or failure
  });

简而言之：

then()：使用此方法处理 promise 的解析值。
catch()：使用此方法来处理 promise 被拒绝时的错误。
finally()：此方法在 promise 解决后运行代码，无论结果如何，允许清理或最终操作。

4. 承诺链

promises 最强大的功能之一是它们能够链接在一起，允许您按顺序执行多个异步操作。这意味着每个操作都要等待前一个操作完成才能执行，这在任务相互依赖时特别有用。

让我们看一下下面的例子：

const fetchUserData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ userId: 1, username: "JohnDoe" });
    }, 1000);
  });
};

const fetchPosts = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts
    }, 1000);
  });
};

// Chaining Promises
fetchUserData()
  .then(user => {
    console.log("User fetched:", user);
    return fetchPosts(user.userId); // Pass userId to the next promise
  })
  .then(posts => {
    console.log("Posts fetched:", posts);
  })
  .catch(error => {
    console.error("Error:", error);
  });

在此示例中，fetchuserdata 函数返回一个使用用户信息解析的 promise。然后，解析后的值被传递给 fetchposts 函数，该函数返回另一个 promise。如果这些 promise 中的任何一个被拒绝，错误将在最终的 .catch() 方法中捕获，从而允许在整个链中进行有效的错误处理。