fetch 介绍

fetch 是一个现代的 Web API，用于在浏览器中发起网络请求。它基于 Promise 构建，提供了一种更简洁、灵活的方式来处理网络请求。下面是关于 fetch 及其各个 HTTP 方法的介绍：

1. 语法

fetch 是用于发送网络请求的函数，语法如下：

fetch(url [, options]);

• url: 请求的 URL。
• options (可选): 包含各种设置的对象，如请求方法、请求头、body 等。

fetch 函数会返回一个 Promise 对象，通过该对象你可以获取到服务器响应的内容。需要注意的是，fetch 默认不会发送或接收任何 cookies，需要额外配置。

2. 用法

1. GET 方法

GET 方法用于从服务器获取数据。在 fetch 中，GET 请求可以通过以下方式发起：

fetch(url)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

这里通过 .json() 方法将响应转换为 JSON 格式，并处理返回的数据或错误。

fetch 的 get 方法可以通过 URL 参数或者请求头来传递参数。

1.1 GET 方法传参 - URL 参数

将参数拼接在 URL 后面

fetch("https://api.example.com/data?param1=value1&param2=value2", {
  method: "GET",
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

1.2 GET 方法传参 - 请求头

将参数放在请求头的 Authorization 字段中

fetch("https://api.example.com/data", {
  method: "GET",
  headers: {
    Authorization: "Bearer " + token,
  },
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

其中，token 是一个字符串类型的令牌，用于身份验证。

2. POST 方法

POST 方法用于向服务器提交数据。在 fetch 中，POST 请求可以通过以下方式发起：

fetch(url, {
  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));

这里需要设置请求的方法为 POST，同时指定请求头为 Content-Type: application/json 并提供要发送的数据。

3. DELETE 方法

DELETE 方法用于删除指定资源。在 fetch 中，DELETE 请求可以通过以下方式发起：

fetch(url, {
  method: "DELETE",
})
  .then((response) => console.log("Resource deleted"))
  .catch((error) => console.error("Error:", error));

这里需要设置请求的方法为 DELETE，指定要删除资源的 URL。

4. PUT 方法

PUT 方法用于更新指定资源的内容。在 fetch 中，PUT 请求可以通过以下方式发起：

fetch(url, {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(data),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Error:", error));

这里设置请求的方法为 PUT，同时提供要更新的数据。

总的来说，fetch 提供了一种简单而强大的方式来处理各种类型的网络请求，并且配合不同的 HTTP 方法可以实现对服务器的不同操作。在使用时需要注意处理 Promise 的回调和错误，以确保程序正常运行。