Fetch API
Fetch API 是用于在浏览器中发送网络请求的现代 API，它提供了一种更简洁、灵活和强大的方式来处理 HTTP 请求和响应。Fetch API 基于 Promise，支持现代的异步编程模式，取代了传统的 XMLHttpRequest API，在现代 Web 开发中被广泛应用。
Fetch API
Fetch 参数
Fetch API 包括以下主要组件和概念：
fetch() 函数: fetch() 函数是 Fetch API 的核心，用于发送网络请求。它接收一个 URL 参数，以及可选的配置对象，返回一个 Promise 对象，可以使用 .then() 方法处理响应数据。
Response 对象: Response 对象表示从服务器返回的响应，包含响应的状态、头部信息、内容等。开发者可以通过 Response 对象提取响应数据，并进行相应处理。
Request 对象: Request 对象表示待发送的请求，包含请求的 URL、请求头、请求方法等信息。可以通过自定义 Request 对象来设置请求的各种参数。
Promise: Fetch API 基于 Promise 对象，支持异步操作，可以通过 .then() 方法链式处理请求和响应，处理成功和失败的回调函数。
Headers 对象: Headers 对象用于表示请求或响应的头部信息，开发者可以通过 Headers 对象添加、获取、删除头部信息。
CORS（跨域资源共享）支持: Fetch API 提供了内置的跨域资源共享支持，可以方便地发送跨域请求，并在响应中处理访问控制与安全性。
fetch 事件: Fetch API 允许对请求和响应执行各种操作，开发者可以监听 fetch 事件，并在其中做一些自定义的处理。
Fetch 优点
Fetch API 具有以下优点：
更简洁：Fetch API 使用 Promise 和简洁的方法调用，代码更易读、易维护。
更灵活：Fetch API 提供了更多定制化的选项，如配置请求、处理响应等，满足不同场景下的需求。
支持跨域资源共享：Fetch API 提供了对 CORS 的原生支持，可以轻松处理跨域请求。
在现代 Web 开发中，推荐使用 Fetch API 来替代传统的 XMLHttpRequest API，以获得更好的性能、更好的可读性和更好的可维护性。Fetch API 已成为 Web 开发的主流网络请求工具，广泛应用于前端开发和移动应用开发中。
Fetch 实战
GET 请求
使用 Fetch API 发送 GET 请求的代码示例如下：
GET - 简版
fetch("https://zichin.com/blogapi/pageviews")
.then((res) => res.json())
.then((data) => console.log("result -->", data))
.catch((error) => console.error("error -->", error));GET - 标准版
const baseUrl = location.host.includes("localhost")
? "http://localhost:5173"
: "https://zichin.com";
const prefix = "/blogapi";
const url = baseUrl + prefix + "/pageviews";
fetch(url, {
method: "GET",
headers: {
"Content-Type": "application/json;charset=utf-8",
},
})
.then((res) => res.json())
.then((data) => console.log("result -->", data))
.catch((error) => console.error("error -->", error));GET 请求（url）
使用 Fetch API 发送带参数的 GET 请求的代码示例如下：
请求参数 - queryStr
fetch("https://zichin.com/blogapi/pageviews?page=1&size=5")
.then((res) => res.json())
.then((data) => console.log("result -->", data))
.catch((error) => console.error("error -->", error));请求参数 - queryStr
const getList = (params) => {
const baseUrl = location.host.includes("localhost")
? "http://localhost:5173"
: "https://zichin.com";
const prefix = "/blogapi";
const params = new URLSearchParams(params);
const _url = baseUrl + prefix + url + "?" + params;
return fetch("https://api.example.com/data", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
}).then((response) => response.json());
};POST 请求
使用 Fetch API 发送 POST 请求的代码示例如下：
fetch("https://api.example.com/data", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ name: "John", age: 30 }),
})
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));POST 请求（FormData）
使用 Fetch API 发送带参数的 POST 请求（使用 FormData）的代码示例如下：
const formData = new FormData();
formData.append("name", "John");
formData.append("age", "30");
fetch("https://api.example.com/data", {
method: "POST",
body: formData,
})`
`
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));POST 请求（Blob）
使用 Fetch API 发送带参数的 POST 请求（使用 Blob）的代码示例如下：
const data = new Blob(["Hello, World!"], { type: "text/plain" });
fetch("https://api.example.com/data", {
method: "POST",
body: data,
})`
`
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));POST 请求（ArrayBuffer）
使用 Fetch API 发送带参数的 POST 请求（使用 ArrayBuffer）的代码示例如下：
const arrayBuffer = new ArrayBuffer(8);
const dataView = new DataView(arrayBuffer);
dataView.setInt32(0, 42);
fetch("https://api.example.com/data", {
method: "POST",
body: arrayBuffer,
})`
`
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));POST 请求（ArrayBufferView）
使用 Fetch API 发送带参数的 POST 请求（使用 ArrayBufferView）的代码示例如下：
const arrayBufferView = new Uint8Array([1, 2, 3, 4, 5]);
fetch("https://api.example.com/data", {
method: "POST",
body: arrayBufferView,
})`
`
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.error(error));案例测试
GET 请求
请求数据: {}返回数据: {}