在前端开发中，与后端进行数据交互是非常常见的操作。在过去，我们使用 XMLHttpRequest (XHR) 对象来实现这个功能。然而，随着 Web 技术的不断发展，Fetch API 成为了更好的选择。
Fetch API 简介
Fetch API 是一种用于进行网络请求的新标准，它提供了一个简单、强大和灵活的接口来处理 HTTP 请求。Fetch API 基于 Promise 实现，这使得异步编程更加方便和可读。
Fetch API 只是浏览器提供的原生 API 的一部分，所以你无需安装任何额外的库或框架就可以使用它。
下面是一个基本的 Fetch API 请求示例：
fetch(url) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
在这个示例中，fetch() 方法发送一个 GET 请求到指定的 URL，并返回一个 Promise 对象。我们可以使用 .then() 和 .catch() 方法对 Promise 进行处理。
在第一个 .then() 中，我们将响应对象（即 response）转换成 JSON 格式的响应体，并将其传递给下一个 .then() 处理。在第二个 .then() 中，我们将解析后的数据输出到控制台中。如果出现错误，我们就会进入 .catch() 方法中进行处理。
Fetch API 请求的详细设置
Fetch API 提供了多种选项用于自定义请求。下面是一些主要的选项：
- method：指定 HTTP 请求方法，如 GET、POST、PUT、DELETE 等。
- headers：指定 HTTP 请求头，可以包括自定义头部和标准头部，如 Content-Type、Accept、Authorization 等。
- body：指定 HTTP 请求体，可以是字符串、Blob 对象或 FormData 对象等。
- mode：指定请求模式，如 cors、no-cors 或 same-origin。cors 模式允许跨域请求，no-cors 模式不允许跨域请求，same-origin 模式只允许相同源请求。
- cache：指定缓存模式，如 default、no-store、reload 或 force-cache。default 模式使用浏览器默认缓存策略，no-store 模式禁止缓存，reload 模式强制从服务器重新获取资源，force-cache 模式强制使用缓存。
- credentials：指定是否发送 cookies 和其他凭据信息，如 omit、same-origin 或 include。omit 表示不发送任何凭据，same-origin 表示只发送同源凭据，include 表示发送所有凭据。
下面是一个带有自定义选项的 Fetch API 请求示例：
-- -------------------- ---- ------- ----- ------- - - ------- ------- -------- - --------------- ------------------ -- ----- ---------------- --------- ------- --------- -------- --- ----- ------- ------ ----------- ------------ ------------- -- ---------- -------- -------------- -- ---------------- ---------- -- ------------------ ------------ -- ----------------------
在这个示例中，我们定义了一个包含多个选项的对象 options，然后将其作为第二个参数传递给 fetch() 方法。这个请求使用 POST 方法发送 JSON 格式的数据，并且使用了 cors 模式和 same-origin 凭据。
使用 Fetch API 进行文件上传
Fetch API 不仅可以用于发送文本数据，还可以用于发送二进制数据，例如文件。下面是一个使用 Fetch API 进行文件上传的示例：
-- -------------------- ---- ------- ------ ----------- ---------------- ------- -------------------------------------- -------- -------- ------------ - ----- --------- - -------------------------------------- ----- ---- - ------------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------