​Fetch API：异步请求远程数据

Fetch API 是一种现代的 Web API，用于在浏览器中进行网络请求。它提供了一种更简单、更直观的方式来处理网络数据，比传统的 XMLHttpRequest（XHR）更加易用。

Fetch API 是基于 Promise 设计的，可以使用 async/await 语法来处理异步请求，也可以使用 then/catch 来处理回调函数。

发送 GET 请求

让我们来看一下 Fetch API 的基本使用：

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

这里的 fetch() 函数会返回一个 Promise 对象，它会发起一个 GET 请求，并返回一个 Response 对象。我们可以通过 then() 方法来处理返回的 Response 数据，这里的 response.json() 方法会返回一个 Promise 对象，它会将 Response 转换为 JSON 格式的数据。最后，我们使用 then() 方法来处理 JSON 数据，并使用 catch() 方法来处理错误。

发送 POST 请求

我们也可以发送 POST 请求，并附带一些数据：

const data = { name: "John", age: 30 };

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))

这里我们在请求中使用了 method 参数来指定请求的方法为 POST，使用 headers 参数来指定请求头信息，使用 body 参数来附带数据。

除了 GET 和 POST 请求之外，Fetch API 还支持其他 HTTP 方法，例如 PUT、DELETE 等。

另外，Fetch API 还支持跨域请求，并且可以使用 cors、no-cors、same-origin 等模式来控制跨域请求的行为。

Response 对象

除了基本的请求方法之外，Fetch API 还提供了其他一些有用的功能，例如：

• 可以使用 Response.ok 属性来检查响应是否成功（HTTP 状态码为 200-299）。
• 可以使用 Response.status 属性来获取响应的 HTTP 状态码。
• 可以使用 Response.headers 属性来获取响应头信息。
• 可以使用 Response.redirected 属性来检查响应是否被重定向。

Fetch API 的使用非常简单，而且具有良好的兼容性。它可以轻松地与现代的前端框架集成，例如 Angular、React、Vue 等。