JavaScript Fetch API 教程
本文详细讲解了JavaScript中的Fetch API，并通过一个简单案例展示了如何使用Fetch API进行异步请求。
1. Fetch API 简介
Fetch API是现代JavaScript中用于发起HTTP请求的一种新方法，它提供了一个全局的`fetch`函数，用于发起网络请求并返回一个Promise对象。与XMLHttpRequest相比，Fetch API更加简洁和易用。
2. Fetch API 的基本用法
下面是一个使用Fetch API发起GET请求的示例：
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});上述代码首先使用`fetch`函数发起一个GET请求，然后使用`.then`方法处理响应。如果响应成功，它会将响应体解析为JSON格式，并在控制台中打印出来。如果请求失败，它会抛出一个错误并在`.catch`方法中处理。
3. 案例讲解：获取用户信息
下面是一个完整的示例，演示如何使用Fetch API从API获取用户信息并在网页上显示。
3.1 HTML 部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户信息获取示例</title>
</head>
<body>
<h1>用户信息</h1>
<div id="user-info"></div>
<script src="script.js"></script>
</body>
</html>3.2 JavaScript 部分（script.js）
document.addEventListener('DOMContentLoaded', () => {
fetch('https://api.example.com/users/1')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.json();
})
.then(data => {
const userInfoDiv = document.getElementById('user-info');
userInfoDiv.innerHTML = `
<p>用户名: ${data.username}</p>
<p>邮箱: ${data.email}</p>
<p>年龄: ${data.age}</p>
`;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
});3.3 示例说明
在这个示例中，我们首先创建了一个简单的HTML页面，包含一个标题和一个用于显示用户信息的`div`元素。然后，在`script.js`文件中，我们使用Fetch API从API获取用户信息，并在DOM加载完成后将用户信息显示在`div`元素中。
4. 总结
Fetch API是JavaScript中一个非常强大的工具，它使得发起网络请求和处理响应变得更加简单和直观。通过本文的讲解和案例，希望你已经掌握了如何使用Fetch API进行异步请求。
