JavaScript 异步编程教程

异步编程是 JavaScript 中非常重要的一个概念,它允许我们在不阻塞主线程的情况下执行长时间运行的代码,如网络请求。以下是一些关于 JavaScript 异步编程的基础知识。

基础概念

  • 回调函数: 最简单的异步编程方式,通过回调函数来处理异步操作的结果。
  • Promise: 一种更现代的异步编程方式,它允许你以更简洁的方式处理异步操作。
  • async/await: ES2017 引入的新特性,使得异步代码的写法更接近同步代码。

实例分析

假设我们要从服务器获取数据,并基于这些数据更新页面内容。

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Failed to fetch data'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Network error'));
    };
    xhr.send();
  });
}

async function updatePage() {
  try {
    const data = await fetchData('/api/data');
    console.log(data);
    // 使用数据更新页面内容
  } catch (error) {
    console.error(error);
  }
}

扩展阅读

想要了解更多关于 JavaScript 异步编程的知识,可以阅读以下教程:

JavaScript 异步编程概念图