Fetch API 是一种现代的网络请求方式，旨在取代传统的 XMLHttpRequest。使用 Fetch API 可以方便地发送异步 HTTP 请求，并处理响应。
基础语法
使用 Fetch API 的基本语法如下：
1
2
3
4
5
6
7
| fetch(url, options)
.then(response => {
})
.catch(error => {
});
|
url: 请求的 URL。options: 可选的配置对象，如请求方法、请求头、请求体等。
发送 GET 请求
下面是一个获取数据的示例。假设我们要请求一个 API 获取用户信息：
1
2
3
4
5
6
7
8
9
10
11
12
13
| fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
if (!response.ok) {
throw new Error('网络错误: ' + response.status);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求失败:', error);
});
|
代码解释
fetch() 方法发送 GET 请求。- 使用
response.ok 判断响应是否成功。
response.json() 方法解析响应体中的 JSON 数据。- 通过
then() 方法处理成功的响应，通过 catch() 方法处理错误。
发送 POST 请求
发送 POST 请求可以使用 options 对象，设置请求方法和请求体：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| const userData = {
name: 'John Doe',
email: 'john.doe@example.com'
};
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(userData)
})
.then(response => {
if (!response.ok) {
throw new Error('网络错误: ' + response.status);
}
return response.json();
})
.then(data => {
console.log('创建的用户:', data);
})
.catch(error => {
console.error('请求失败:', error);
});
|
代码解释
method: 'POST' 指定请求方式为 POST。headers 中设置请求头，告诉服务器请求体的类型是 JSON。body 中使用 JSON.stringify() 方法将JavaScript 对象转换为 JSON 字符串。
处理错误
在使用 Fetch API 时，网络错误和 HTTP 状态码都会导致 Promise 被拒绝。在处理响应时，我们可以通过检查状态码来决定怎么处理错误：
1
2
3
4
5
6
7
8
9
10
11
12
13
| fetch('https://jsonplaceholder.typicode.com/nonexistent')
.then(response => {
if (!response.ok) {
throw new Error('请求失败，状态码: ' + response.status);
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('发生错误:', error);
});
|
在这个例子中，我们请求一个不存在的资源，使用 response.ok 检查响应是否成功。若失败，就抛出一个错误。
设置请求参数
有时候我们可能需要向请求中传递查询参数，可以使用 URLSearchParams API：
1
2
3
4
5
6
7
8
9
10
11
12
| const params = new URLSearchParams({
userId: 1
}).toString();
fetch(`https://jsonplaceholder.typicode.com/posts?${params}`)
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('请求失败:', error);
});
|
在这个例子中，我们使用 URLSearchParams 构建查询字符串，将其添加到 URL 中。
处理响应类型
除了 JSON，Fetch API 还支持处理其他类型的响应。比如，如果要获取文本响应，可以使用 response.text()：
1
2
3
4
5
6
7
8
| fetch('https://example.com/some-text')
.then(response => response.text())
.then(data => {
console.log('获取的文本:', data);
})
.catch(error => {
console.error('请求失败:', error);
});
|
总结
Fetch API 是一种强大且灵活的浏览器网络请求 API。它支持多种请求方式，简化了网络请求的过程。在处理网络请求时，记得妥善处理异常和响应状态，以提升应用的健壮性。
