在上一篇中，我们探讨了如何使用 Fetch API 进行数据请求，而在本篇中，我们将深入理解如何处理异步操作，尤其是在使用 AJAX 进行网络请求时。
理解异步操作
异步编程是 JavaScript 处理 I/O 操作（如网络请求、文件读取等）时的重要特性。它允许代码在等待某些操作完成时，不会阻塞其他代码的执行。要处理这些异步操作，我们通常使用回调（Callbacks）、Promises 以及 async/await。
1. 使用回调函数
回调函数是一种最基本的处理异步操作的方式。我们可以将一个函数作为参数传递给另一个函数，当异步操作完成时调用这个回调。
以下是一个使用回调函数的 AJAX 请求示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| 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 的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| 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 的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 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 来处理多个承诺，保证所有请求都完成后再继续执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| 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 和异步编程知识。
