JavaScript Promises 和 Async/Await 解析

想象一下你在网上订披萨。

你下单后，并不会一直站在门口无所事事地等它送达。你可以看视频、工作或和朋友聊天。等披萨送到时，你再吃。

JavaScript 的工作方式也是如此。

API 请求、数据库调用和定时器等操作都需要时间。如果 JavaScript 等待每个任务完成后再继续，你的应用就会卡死。相反，JavaScript 会在等待结果的同时运行其他代码。

什么是 Promise？

Promise 是一个占位符，代表你将来会得到的一个值。

当你运行： const promise = fetch("/users");

数据还没有返回。Promise 会说：“我现在还没有结果，但准备好时我会告诉你。”

Promise 有三种状态：

• Pending（进行中）
• Fulfilled（已成功）
• Rejected（已失败）

大多数现代 API（如 fetch()）都会自动返回一个 Promise。你不需要每次都手动创建它们，直接使用即可。

.then() 是做什么用的？

很多人认为 .then() 是用来获取数据的。其实不然。

.then() 是注册一个回调函数。你是在告诉 JavaScript：“当这个 Promise 完成时，运行这个特定的函数。”

这就像一个外卖 App。你点完餐后，App 会告诉你：“食物送到时叫我。”这个函数就是在等待那个信号。

为什么要使用 Async/Await？

你可以通过链式调用 .then() 来逐步获取数据。这虽然可行，但过长的链式调用很难阅读。

Async/await 让你的代码看起来像普通的、按步骤执行的代码。它更简洁，也更容易理解。

await 会阻塞 JavaScript 吗？

这是一个常见的面试题。答案是：不会。

当 JavaScript 遇到 await 关键字时，它只会暂停那个特定的 async 函数。应用程序的其他部分会继续运行。

示例流程：

1. 执行函数中的代码。
2. 遇到 await 并暂停该函数。
3. 执行脚本的其余部分。
4. 任务完成后，恢复该函数。

总结：

• Promise = 一个未来的值。
• fetch() = 返回一个 Promise。
• .then() = 准备就绪时运行此函数。
• await = 暂停此函数，而不是整个程序。
• async/await = 一种更简洁的编写 Promise 的方式。

来源：https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm