27 AJAX与异步编程之处理异步操作

在上一篇中，我们探讨了如何使用 Fetch API 进行数据请求，而在本篇中，我们将深入理解如何处理异步操作，尤其是在使用 AJAX 进行网络请求时。

理解异步操作

异步编程是 JavaScript 处理 I/O 操作（如网络请求、文件读取等）时的重要特性。它允许代码在等待某些操作完成时，不会阻塞其他代码的执行。要处理这些异步操作，我们通常使用回调（Callbacks）、Promises 以及 async/await。

1. 使用回调函数

回调函数是一种最基本的处理异步操作的方式。我们可以将一个函数作为参数传递给另一个函数，当异步操作完成时调用这个回调。

以下是一个使用回调函数的 AJAX 请求示例：

function fetchData(url, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    }
  };
  xhr.send();
}

fetchData('https://jsonplaceholder.typicode.com/posts/1', function(data) {
  console.log(data);
});

在这个例子中，fetchData 函数接受一个 URL 和一个回调函数。数据请求完成后，将结果返回给回调。

2. 使用 Promises

Promises 为异步编程提供了更好的可读性和链式调用的能力。Promise 对象代表一个可能尚未完成的异步操作，并可以在将来某个时间点提供值。

下面是使用 Promises 的示例：

function fetchData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText));
        } else {
          reject(new Error('Request failed with status ' + xhr.status));
        }
      }
    };
    xhr.send();
  });
}

fetchData('https://jsonplaceholder.typicode.com/posts/1')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在这个示例中，fetchData 返回一个 Promise 对象，使用 resolve 和 reject 方法来处理异步操作的结果。

3. 使用 async/await

async/await 是基于 Promises 的一种更现代的处理异步请求的方式，使代码更像同步代码，更易于理解。

以下是使用 async/await 的示例：

async function fetchData(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  const data = await response.json();
  return data;
}

(async () => {
  try {
    const data = await fetchData('https://jsonplaceholder.typicode.com/posts/1');
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
})();

在这个示例中，fetchData 函数声明为 async，我们使用 await 等待 Promise 的完成。这种方式极大简化了异步调用的处理。

处理多个异步请求

在实际开发中，我们可能需要进行多个异步请求。这时，我们可以使用 Promise.all 来处理多个承诺，保证所有请求都完成后再继续执行。

async function fetchMultipleData(urls) {
  const promises = urls.map(url => fetchData(url));
  return Promise.all(promises);
}

(async () => {
  const urls = [
    'https://jsonplaceholder.typicode.com/posts/1',
    'https://jsonplaceholder.typicode.com/posts/2'
  ];
  
  try {
    const results = await fetchMultipleData(urls);
    console.log(results);
  } catch (error) {
    console.error('Fetch error:', error);
  }
})();

在这个示例中，fetchMultipleData 函数使用 map 方法创建一个包含多个 Promise 的数组，随后使用 Promise.all 等待所有 Promise 都完成。

小结

通过这些示例，我们可以看到处理异步操作的几种不同方法：回调函数、Promises 以及 async/await。随着代码的复杂性增加，使用 async/await 处理异步操作往往会更加清晰。

在下一篇中，我们将开始一个实际的项目，通过搭建项目环境来实践我们刚刚学到的 AJAX 和异步编程知识。