Javascript Fetch Note - 崔旭的笔记

An Example about Fetch

1
fetch("https://api.example.com/data", {
2
  method: "POST", // 请求方法
3
  headers: {
4
    "Content-Type": "application/json", // 请求头中的 Content-Type
5
  },
6
  body: JSON.stringify({
7
    // 请求体中的数据
8
    name: "John Doe",
9
    age: 30,
10
  }),
11
})
12
  .then((response) => {
13
    if (response.ok) {
14
      // 判断响应是否成功
15
      return response.json(); // 将响应转换为 JSON 格式
16
    } else {
17
      throw new Error("Network response was not ok."); // 抛出异常
18
    }
19
  })
20
  .then((data) => {
21
    console.log(data); // 处理 JSON 格式的响应数据
22
  })
23
  .catch((error) => {
24
    console.error("There was a problem with the fetch operation:", error); // 处理异常
25
  });

fetch 默认是异步执行的。当你调用 fetch 函数时，它会立即返回一个 Promise 对象，然后在后台发起网络请求。一旦请求完成，Promise 对象就会被解析为一个 Response 对象，然后你可以使用 then() 方法来获取响应数据。

由于 fetch 是异步执行的，它不会阻塞 JavaScript 主线程。这意味着你可以在发送请求时继续执行其他的 JavaScript 代码，不必等待网络请求完成。这种异步执行的方式可以提高应用程序的性能和响应速度。

如果你需要使用 fetch 函数来进行同步请求，可以使用 async/await 或者使用同步的 XMLHttpRequest 对象。但是，这种同步方式可能会降低应用程序的性能和响应速度，因此不建议在大多数情况下使用。