最简单的方式来理解异步 JavaScript

发布: 1个月前 (2026年3月28日 GMT+8 20:28)

5 分钟阅读

原文: Dev.to

Source: Dev.to

请提供您希望翻译的具体文本内容（除代码块和 URL 之外），我将把它翻译成简体中文并保持原有的 Markdown 格式。

首先，让我们理解一个简单的问题

想象一下，你在一家餐厅。你点了一份需要 15 分钟准备的食物。你会怎么做？

在厨房旁站着 15 分钟，什么也不做。
坐在自己的桌子旁，和朋友聊天，等食物准备好。

大多数人会选择选项 2——在食物准备的同时继续做其他事情。这正是异步 JavaScript 的工作方式。

什么是异步 JavaScript？

异步编程允许 JavaScript 在等待长时间运行的操作完成时执行其他任务。常见的异步任务包括：

从 API 获取数据
加载图片
等待用户点击
上传文件
定时器和延迟

与阻塞程序不同，JavaScript 会继续执行其他代码。

同步 vs 异步

同步代码（阻塞）

console.log("Start");

function slowTask() {
  setTimeout(() => {
    console.log("Task completed");
  }, 2000);
}

slowTask();

console.log("End");

输出

Start
End
Task completed

JavaScript 不会等待定时器完成，而是继续执行其余代码。

实际案例

示例 1：在线点餐

当你在 Swiggy 或 Zomato 等应用上点餐时：

你下单。
餐厅准备食物。
配送员取餐。
你跟踪配送进度。

在此期间，你仍然可以继续使用手机——应用不会卡死。这就是异步行为。

示例 2：从 API 加载数据

大多数网站都会从服务器加载数据（例如天气应用、新闻站点、电商平台、社交媒体信息流）。JavaScript 以异步方式获取数据：

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data));

这里 JavaScript：

向服务器发送请求。
继续执行其他代码。
当数据返回时显示结果。

示例 3：用户点击事件

button.addEventListener("click", function () {
  console.log("Button clicked");
});

回调函数仅在用户点击按钮时执行；在此之前，JavaScript 只是在后台等待。

示例 4：定时器

setTimeout(() => {
  console.log("Reminder!");
}, 3000);

在 3 秒后弹出通知，而不会阻塞其他操作。

回调的难题

在现代 JavaScript 之前，异步任务是通过嵌套回调来处理的：

login(function (user) {
  getOrders(user, function (orders) {
    getPayment(orders, function (payment) {
      console.log(payment);
    });
  });
});

深层嵌套使代码难以阅读，这种情况被称为 回调地狱。

现代解决方案：Promises

Promises 简化了异步代码：

fetch("/api/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Promise 表示一个将在未来可用的值，并且可以处于以下三种状态之一：

Pending（待定）
Fulfilled（已兑现）
Rejected（已拒绝）

更好：Async / Await

async/await 使异步代码看起来像同步代码，同时保持非阻塞行为：

async function getUsers() {
  const response = await fetch("/api/users");
  const data = await response.json();
  console.log(data);
}

getUsers();

异步 JavaScript 的使用场景

几乎所有现代 Web 应用程序都依赖异步编程，包括：

加载 API 数据
聊天应用
文件上传
支付处理
通知
实时更新

没有它，网站会显得慢且无响应。

最后思考

异步 JavaScript 允许程序在不阻塞主线程的情况下处理长时间运行的任务。JavaScript 不必等待一个任务完成后才继续，而是可以继续执行其他工作，这使得现代 Web 应用程序快速、交互性强且用户友好。掌握回调、Promise 和 async/await 将显著提升你构建真实世界应用的能力。