详细讲解JavaScript 中的Fetch API
Fetch API 是 JavaScript 提供的用于进行网络请求的一组接口，它为替代传统的 XMLHttpRequest 提供了一种现代且强大的方式。Fetch API 使用 Promise 和 Response 对象，使得异步操作更加简便和可读。
核心组件
fetch() 函数:
fetch(url)：发起对url的 GET 请求。fetch(url, options)：使用options对象配置请求，可以指定请求方法、请求头、请求体等。Response 对象:
表示从服务器返回的响应，包含了响应的信息，如状态码、头部信息等。
response.json()：返回一个 Promise，解析为 JSON 格式。response.text()：返回一个 Promise，解析为文本。其他方法：
arrayBuffer()、blob()等，根据需要选择。
基本用法
// 发起简单的 GET 请求
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});
// 发起带有配置的 POST 请求
fetch('https://api.example.com/postData', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
// 可以添加其他自定义头部
},
body: JSON.stringify({
key1: 'value1',
key2: 'value2'
}),
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});配置选项
在 fetch 函数的第二个参数中，可以使用一个配置对象，其中常用的选项包括：
method：请求的方法，如 GET、POST 等。headers：请求头，包含一组键值对。body：请求体，通常用于 POST 请求，可以是字符串、FormData 等。mode：请求的模式，例如 cors、no-cors、same-origin。cache：控制缓存，默认是 default。credentials：控制是否发送 Cookie，默认是 same-origin。redirect：控制跟随重定向的行为，默认是 follow。
异常处理
在使用 Fetch API 时，需要注意处理网络请求可能出现的异常，比如网络错误、服务器错误等。可以通过 response.ok 属性来判断响应是否成功，以及通过 Promise 的 catch 方法来捕获异常。
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Fetch error:', error);
});Fetch API 的优势之一是使用 Promise，它提供了更清晰的异步处理方式，可以更方便地进行链式操作。
