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

百变鹏仔 2个月前 (10-14) #JavaScript

文章标签您需要

介绍

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

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

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

什么是承诺？

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

立即学习“Java免费学习笔记（深入）”；

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

promise 在 javascript 中如何工作

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

1. 创造一个承诺

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

const mypromise = new promise((resolve, reject) =&gt; {  // 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来决定其结果：

3. 消费承诺

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

const fetchdata = () =&gt; {  return new promise((resolve) =&gt; {    settimeout(() =&gt; {      resolve("data fetched successfully!");    }, 1000);  });};fetchdata()  .then(result =&gt; {    console.log(result); // logs: data fetched successfully!  });

const fetchwitherror = () =&gt; {  return new promise((resolve, reject) =&gt; {    settimeout(() =&gt; {      reject("error fetching data."); // simulating an error    }, 1000);  });};fetchwitherror()  .then(result =&gt; {    console.log(result);  })  .catch(error =&gt; {    console.error(error); // logs: error fetching data.  });

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

简而言之：

4. 承诺链

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

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

const fetchUserData = () =&gt; {  return new Promise((resolve) =&gt; {    setTimeout(() =&gt; {      resolve({ userId: 1, username: "JohnDoe" });    }, 1000);  });};const fetchPosts = (userId) =&gt; {  return new Promise((resolve) =&gt; {    setTimeout(() =&gt; {      resolve(["Post 1", "Post 2", "Post 3"]); // Simulated posts    }, 1000);  });};// Chaining PromisesfetchUserData()  .then(user =&gt; {    console.log("User fetched:", user);    return fetchPosts(user.userId); // Pass userId to the next promise  })  .then(posts =&gt; {    console.log("Posts fetched:", posts);  })  .catch(error =&gt; {    console.error("Error:", error);  });

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

结论

总之，promise 是现代 javascript 的重要组成部分，使开发人员能够以更结构化和更高效的方式处理异步操作。通过使用 promise，您可以：

当您在自己的项目中实现 promise 时，您会发现它们不仅提高了代码的可读性，而且还通过保持应用程序的响应能力来增强整体用户体验。我希望这段 javascript 基本概念之旅能够为开发人员提供有价值的见解。快乐编码！

文章推荐

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

介绍

什么是承诺？

promise 在 javascript 中如何工作

1. 创造一个承诺

2. 解决和拒绝承诺

3. 消费承诺

4. 承诺链

结论

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？