Fetch API 是一种现代的、基于 Promise 的机制，用于发起 HTTP 请求。它提供了更加强大和灵活的网络请求功能，与传统的 XMLHttpRequest 相比，它更加简洁且易于使用。Fetch API 是 Web API 的一部分，广泛支持于各种现代浏览器中。
Fetch API 的优势
更简洁的语法
使用 Fetch API，你可以通过链式调用来处理异步操作，使得代码看起来更加简洁和易读。例如，发送一个 GET 请求可以非常简单：
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));支持 Promise
Fetch API 返回的是一个 Promise 对象，这使得它可以很方便地与 JavaScript 异步编程模型结合使用。Promise 提供了处理异步操作的方法，如 then 和 catch，使得错误处理更加清晰。
跨域请求的支持
Fetch API 在处理跨域请求时提供了更好的支持。通过设置请求头中的 mode 属性为 cors，你可以轻松实现跨域请求，并且可以处理 CORS 预检请求（Preflight request）。
可配置的请求头
Fetch API 允许你自定义请求头，这对于发送带有身份验证信息或其他自定义数据的请求非常重要。你可以通过传递一个 headers 对象来设置请求头。
多种响应类型
Fetch API 支持多种响应类型，包括文本、JSON、Blob、ArrayBuffer 等。这使得它可以处理各种不同类型的服务器响应数据。
如何使用 Fetch API 发送请求
发送 GET 请求
GET 请求是最常见的请求类型之一，用于从服务器获取资源。下面是一个简单的例子：
// javascriptcn.com 代码示例
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('Error:', error));发送 POST 请求
POST 请求通常用于向服务器提交数据。你可以通过设置请求方法为 POST 并提供请求体来发送 POST 请求：
// javascriptcn.com 代码示例
const data = { username: 'example' };
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));处理错误
在处理网络请求时，错误处理是非常重要的。你可以使用 .catch 方法来捕获请求过程中发生的任何错误，或者在 .then 方法中检查响应的状态码：
// javascriptcn.com 代码示例
fetch('https://api.example.com/data')
.then(response => {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));总结
Fetch API 提供了一种现代化、强大的方式来处理网络请求，它的 Promise-based 设计使其在处理异步操作时更加直观和高效。通过本文档的介绍，你应该对如何使用 Fetch API 发送各种类型的请求有了基本的了解，并能够开始在自己的项目中应用这些知识。