JavaScript 异步编程教程

异步编程是 JavaScript 开发中不可或缺的一部分，它允许开发者处理耗时操作（如网络请求、文件操作等）而不会阻塞主线程。本教程将帮助你了解 JavaScript 异步编程的基本概念和实践。

基础概念

JavaScript 是单线程语言，这意味着它一次只能执行一个任务。异步编程允许你执行耗时任务而不会阻塞其他任务的执行。

回调函数 (Callbacks)

回调函数是最简单的异步编程方法。当你向某个函数传递一个回调函数时，你可以指定当耗时操作完成时要执行的操作。

function fetchData(callback) {
  // 执行耗时操作
  // ...
  callback('数据');
}

fetchData(function(data) {
  console.log(data);
});

事件监听器 (Event Listeners)

事件监听器允许你为特定事件（如用户点击、加载完成等）添加处理函数。

document.getElementById('myButton').addEventListener('click', function() {
  console.log('按钮被点击了！');
});

Promises

Promises 提供了一种更简洁、更强大的异步编程方式。它是一个表示未来某个结果的容器，可以处理异步操作的完成或失败。

function fetchData() {
  return new Promise((resolve, reject) => {
    // 执行耗时操作
    // ...
    if (/* 操作成功 */) {
      resolve('数据');
    } else {
      reject('错误');
    }
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

async/await

async/await 允许你使用同步代码的方式编写异步操作。它是基于 Promises 的语法糖，使得异步代码更加直观。

async function fetchData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

实战案例

为了更好地理解异步编程，让我们通过一个实际的例子来实践它。

假设我们需要从服务器获取用户数据，并将其显示在网页上。

async function getUserData() {
  const response = await fetch('/api/users');
  const data = await response.json();
  document.getElementById('userList').innerHTML = data.users.map(user => `<li>${user.name}</li>`).join('');
}

getUserData();

在上面的例子中，我们使用了 fetch API 来获取用户数据，并使用 async/await 来处理异步操作。

扩展阅读

想要更深入地了解 JavaScript 异步编程，请参考以下资源：

• MDN Web Docs - Asynchronous JavaScript

返回首页

JavaScript 异步编程