当前位置：首页 > 文章列表 > 文章 > 前端 > 理解 JavaScript 中的 Promise 和 Promise Chaining

理解 JavaScript 中的 Promise 和 Promise Chaining

来源：dev.to 2024-10-02 21:40:06 0浏览收藏

推广推荐

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

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《理解 JavaScript 中的 Promise 和 Promise Chaining》，涉及到，有需要的可以收藏一下

什么是承诺？

javascript 中的 promise 就像你对未来做某事的“承诺”。它是一个对象，表示异步任务的最终完成（或失败）及其结果值。简而言之，promise 充当尚不可用但将来可用的值的占位符。

承诺国家

promise 可以存在于以下三种状态之一：

pending：promise 的初始状态，仍在等待异步任务完成。
fulfilled：promise 成功完成的状态，并且结果值可用。
rejected：promise 失败的状态，返回错误而不是预期值。

承诺如何发挥作用？

promise 是使用 promise 构造函数创建的，它有两个参数：resolve 和reject——两者都是函数。

如果异步操作成功，则调用resolve函数来履行承诺。
如果出现问题，您可以调用拒绝函数来表明 promise 由于错误而被拒绝。
您可以使用 .then() 来处理 promise 的结果以获取成功，使用 .catch() 来处理错误。

示例：创建和使用 promise

const fetchdata = new promise((resolve, reject) => {
  // simulate an asynchronous task like fetching data from a server
  settimeout(() => {
    const data = "some data from the server";

    // simulate success and resolve the promise
    resolve(data);

    // you can also simulate an error by rejecting the promise
    // reject(new error("failed to fetch data"));
  }, 1000);
});

// consuming the promise
fetchdata
  .then((data) => {
    console.log("data fetched:", data);
  })
  .catch((error) => {
    console.error("error fetching data:", error);
  });

当 promise 完成时，resolve(data) 将返回成功的数据。
如果出现问题，reject(error) 将抛出一个错误，可以使用 .catch() 处理。

什么是承诺链？

promise chaining 是使用 promise 依次执行一系列异步任务的过程。链中的每个 .then() 方法在前一个方法完成后运行。

为什么使用承诺链？

它允许您编写干净、可读的代码来按特定顺序处理多个异步操作。每个 .then() 都可以返回一个值，该值传递给链中的下一个 .then()，允许您逐步处理任务。

示例：链接多个 promise

new promise((resolve, reject) => {
  settimeout(() => resolve(1), 1000); // initial async task resolves with 1
})
  .then((result) => {
    console.log(result); // logs: 1
    return result * 2;   // returns 2 to the next .then()
  })
  .then((result) => {
    console.log(result); // logs: 2
    return result * 3;   // returns 6 to the next .then()
  })
  .then((result) => {
    console.log(result); // logs: 6
    return result * 4;   // returns 24 to the next .then()
  });

在此示例中：

promise 在 1 秒后以 1 开始解决。
随后的每个 .then() 都会接收前一个 .then() 的结果，将其加倍或三倍，然后将其传递给下一个 .then()。
结果将逐步记录：1、2、6。
链接中的错误处理
您可以使用 .catch() 捕获 promise 链中的任何错误。如果任何 .then() 失败，链就会停止，并且错误将传递到 .catch() 块。

new Promise((resolve, reject) => {
  setTimeout(() => resolve(1), 1000);
})
  .then((result) => {
    console.log(result); // Logs: 1
    return result * 2;
  })
  .then((result) => {
    throw new Error("Oops, something went wrong!");
  })
  .catch((error) => {
    console.error("Caught error:", error.message); // Catches the error
  });