JavaScript 同步与异步

原创于 2025-09-30 15:23:51 发布 · 822 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript开发专栏收录该内容

53 篇文章

订阅专栏

1. 概念解释

在 JavaScript 中，同步和异步是两种不同的执行模型。它们的区别主要在于代码的执行顺序和处理方式。

1.1 同步（Synchronous）

同步是指代码按顺序执行，一个操作完成后才会执行下一个操作。在同步代码中，程序会逐行执行，直到当前任务完成才能继续处理下一个任务。

特点：

阻塞性：当前任务执行时，其他任务会被阻塞。
执行顺序固定，按照代码的书写顺序逐步执行。

示例：同步代码

console.log('开始');
console.log('进行中');
console.log('结束');

执行结果：

开始
进行中
结束

在同步代码中，console.log会按顺序执行，每条输出都会等待前一条输出完成后才执行。

1.2 异步（Asynchronous）

异步是指代码执行时，任务的执行不会阻塞后续任务的执行。也就是说，异步操作可以在后台进行，而不影响主线程的执行。JavaScript 中常见的异步操作包括事件处理、定时器、AJAX 请求等。

特点：

非阻塞性：当前任务发起后，程序不会等待其完成，而是继续执行后面的任务。
结果可以通过回调函数、Promise或 async/await 获取。

示例：异步代码

console.log('开始');

setTimeout(() => {
  console.log('异步操作完成');
}, 1000);

console.log('结束');

执行结果：

开始
结束
异步操作完成

在这个例子中，setTimeout 是一个异步操作，它会在 1 秒后执行回调函数，但并不会阻塞后面的 console.log('结束') 执行。

1.3 事件循环eventloop

虽然 JavaScript 是单线程的，但它利用了事件循环来管理异步任务。异步任务并不是在主线程上执行的，它们通常会由浏览器或 Node.js 等运行环境的后台线程处理。这些异步任务完成后，它们会通过回调机制通知主线程，主线程再去执行相关的回调函数。

举个例子，假设你发起了一个网络请求，它是一个异步操作：

网络请求被发出，JavaScript 继续执行后续的同步代码。
网络请求在后台线程中处理，不会阻塞主线程。
当请求完成后，结果会被放到任务队列中，等待主线程处理。
当主线程空闲时，事件循环会从队列中取出这个任务，执行回调函数，处理请求结果。

事件循环机制是 JavaScript 异步操作的核心。它主要有以下几个步骤：

执行栈（Call Stack）：JavaScript 的执行上下文会按照调用顺序被压入栈中，栈顶的任务会先执行。
任务队列（Task Queue）：异步操作会将其回调放入任务队列中。
事件循环（Event Loop）：事件循环不断地检查执行栈是否为空，如果为空，它会从任务队列中取出一个任务，放入执行栈中去执行。

2. 异步处理方式

JavaScript 提供了几种处理异步操作的方式，主要有回调函数、Promise 和 async/await。

2.1 回调函数（Callback）

回调函数是最早的异步处理方式。在异步操作完成后，回调函数会被调用。虽然回调函数可以处理异步，但它可能会导致“回调地狱”，使代码变得难以维护。

示例：回调函数

console.log('开始');

setTimeout(() => {
  console.log('异步操作完成');
}, 1000);

console.log('结束');

2.2 Promise

Promise 是一种更现代的异步编程方式，它代表了一个异步操作的最终结果。Promise 有三种状态：

pending：初始状态，表示异步操作尚未完成。
fulfilled：表示操作成功完成。
rejected：表示操作失败。

示例：Promise

console.log('开始');

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('异步操作完成');
  }, 1000);
});

promise.then(result => {
  console.log(result);
});

console.log('结束');

执行结果：

开始
结束
异步操作完成

在这个例子中，promise 会在 1 秒后执行 resolve，然后调用 then 方法，输出结果。

2.3 async/await

async/await 是基于 Promise 的语法糖，使异步代码看起来更像同步代码。await 用于等待 Promise 完成，async 表示函数是异步的。

示例：async/await

console.log('开始');

async function example() {
  await new Promise(resolve => {
    setTimeout(() => {
      resolve('异步操作完成');
    }, 1000);
  }).then(result => {
    console.log(result);
  });
}

example();

console.log('结束');

执行结果：

开始
结束
异步操作完成

在 async 函数中，await 会暂停函数的执行，直到 Promise 返回结果。

3. 综合案例

假设我们需要从一个 API 获取用户数据，并根据返回的数据进行后续处理。我们将结合同步与异步操作来实现。

3.1 示例场景：获取用户数据并展示

// 模拟 API 请求
function fetchUserData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ name: 'John', age: 30 });
    }, 1000);
  });
}

// 使用 async/await 来处理异步请求
async function showUserData() {
  console.log('开始获取用户数据');
  
  try {
    const userData = await fetchUserData();
    console.log(`用户数据: 姓名 - ${userData.name}, 年龄 - ${userData.age}`);
  } catch (error) {
    console.error('获取用户数据失败:', error);
  }
  
  console.log('结束');
}

showUserData();

执行结果：

开始获取用户数据
结束
用户数据: 姓名 - John, 年龄 - 30

3.2 解析

showUserData 是一个异步函数。
在该函数内，我们使用 await 来等待 fetchUserData 函数返回的 Promise 结果。
由于 await 会暂停函数的执行，所以 console.log('结束') 会先被输出，而用户数据则在 1 秒后通过 then 输出。

4. 小结

同步：按顺序执行，阻塞后续代码。
异步：可以在后台执行任务，继续执行后续代码。
回调函数：最早的异步处理方式，可能导致“回调地狱”。
Promise：解决回调地狱，更清晰的异步处理。
async/await：基于 Promise，使异步代码看起来像同步代码，易于理解和维护。

理解同步与异步的概念，并掌握常见的异步编程方式，可以帮助我们编写更加高效和可维护的 JavaScript 代码。