目录
4. 异步代码的实际应用——使用 fetch API 进行异步网络请求
在前端开发中，理解同步和异步编程是非常重要的。它们是处理程序中操作顺序和时间控制的两种方式。下面，我们将详细介绍同步和异步代码的区别、实现方式，以及在实际开发中的应用。
1. 同步代码（Synchronous Code）
同步代码的执行是按顺序进行的，每一行代码都会等待上一行代码执行完毕后再执行。这种方式会导致程序在执行某些耗时操作时阻塞，直到任务完成才能继续执行后续代码。
示例：同步代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同步代码示例</title>
</head>
<body>
<h1>同步代码执行示例</h1>
<div id="output"></div>
<script>
// 同步代码示例
function syncTask() {
document.getElementById('output').innerHTML += "任务1开始<br>";
// 模拟耗时操作
for (let i = 0; i < 500000000; i++) { } // 模拟延迟
document.getElementById('output').innerHTML += "任务1结束<br>";
document.getElementById('output').innerHTML += "任务2开始<br>";
// 模拟另一个耗时操作
for (let i = 0; i < 500000000; i++) { } // 模拟延迟
document.getElementById('output').innerHTML += "任务2结束<br>";
}
syncTask();
</script>
</body>
</html>
运行结果：
- "任务1开始" 显示
- 等待
任务1完成后，显示 "任务1结束" - 接着执行
任务2，并显示 "任务2开始" - 最后显示 "任务2结束"
注意：在执行这段代码时，页面会被阻塞，直到所有的任务完成后，才会继续执行后续的任务。虽然这段代码比较简短，但如果任务更复杂，页面就会变得不响应，影响用户体验。
2. 异步代码（Asynchronous Code）
异步代码的执行不需要等待上一行代码完成，而是继续执行后续代码。异步编程常常用于处理耗时操作（如网络请求、文件读取、数据库查询等），避免阻塞程序的执行。
示例：异步代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步代码示例</title>
</head>
<body>
<h1>异步代码执行示例</h1>
<div id="output"></div>
<script>
// 异步代码示例
function asyncTask() {
document.getElementById('output').innerHTML += "任务1开始<br>";
// 模拟异步操作
setTimeout(() => {
document.getElementById('output').innerHTML += "任务1结束<br>";
}, 2000); // 设置延时2秒
document.getElementById('output').innerHTML += "任务2开始<br>";
setTimeout(() => {
document.getElementById('output').innerHTML += "任务2结束<br>";
}, 1000); // 设置延时1秒
}
asyncTask();
</script>
</body>
</html>
运行结果：
- "任务1开始" 和 "任务2开始" 会几乎同时显示（因为它们是异步操作）。
- 等待 1 秒钟，"任务2结束" 显示。
- 再等待 1 秒钟，"任务1结束" 显示。
注意：在这段异步代码中，
setTimeout用来模拟延迟操作。在延迟期间，程序不会阻塞，其他任务（如任务2）可以同时进行。通过这种方式，我们避免了同步代码中可能出现的界面冻结问题，提升了用户体验。
3. 同步与异步的比较
- 同步：按顺序执行，前一个任务完成后才能执行下一个任务，适用于短时间的操作，但对于耗时操作会导致程序阻塞。
- 异步：不按顺序执行，任务可以在后台执行，不会阻塞主线程，适用于需要等待的操作，如网络请求、文件读取等。
4. 异步代码的实际应用——使用 fetch API 进行异步网络请求
下面是一个使用 fetch API 获取天气信息的示例代码，演示如何在异步代码中使用 API 请求。
示例：异步获取天气数据
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>异步网络请求示例</title>
</head>
<body>
<h1>天气预报</h1>
<div id="output"></div>
<script>
// 异步获取天气信息
async function fetchWeather() {
try {
document.getElementById('output').innerHTML = "正在获取天气数据...<br>";
const response = await fetch('https://api.openweathermap.org/data/2.5/weather?q=Beijing&appid=YOUR_API_KEY');
const data = await response.json();
document.getElementById('output').innerHTML = `城市: ${data.name}<br>温度: ${(data.main.temp - 273.15).toFixed(2)}°C<br>天气: ${data.weather[0].description}`;
} catch (error) {
document.getElementById('output').innerHTML = "获取天气数据失败!";
}
}
fetchWeather();
</script>
</body>
</html>
运行结果：
- 页面显示 “正在获取天气数据...”
- 然后，页面会显示从 API 获取到的城市、温度和天气状况。
注意：在实际使用时，你需要替换
YOUR_API_KEY为你从 OpenWeatherMap 获取的有效 API 密钥。
5. 总结
- 同步编程：代码按顺序逐行执行，可能会导致程序在处理耗时操作时阻塞，影响性能。
- 异步编程：使用回调、Promises 或 async/await 让程序继续执行而不被耗时操作阻塞，通常适用于处理网络请求或其他耗时操作。
掌握同步和异步编程的区别，并合理选择它们的使用场景，有助于提升程序的效率和用户体验。在实际项目中，很多操作如网络请求、文件读写都需要使用异步编程，避免阻塞主线程。