Fetch API - JavaScript

Fetch API 是 JavaScript 原生提供的一种用于发起网络请求的 API，使用起来简单直观，功能强大，是替代传统 XMLHttpRequest 的一种现代化解决方案。本文将为你介绍 Fetch API 的用法及注意事项。

发起 GET 请求

使用 Fetch API 发起网络请求，我们需要调用 fetch() 方法。例如，以下代码可以向指定的 URL 发起一个 GET 请求。

fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码中，我们通过 fetch() 方法向 'http://api.example.com/data' 发起了一个 GET 请求。

接着，我们使用了 Promise 的 then() 方法，分别解析了响应对象和响应数据。如果请求成功，我们将得到一个 JSON 对象，保存在变量 data 中。

最后，我们使用了 catch() 方法来捕捉异常，并输出错误信息。

发起 POST 请求

除了 GET 请求之外，我们还可以使用 Fetch API 发起其他类型的请求。例如，以下代码可以向指定的 URL 发起一个 POST 请求。需要注意的是，我们需要手动设置请求头和请求体。

const options = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John Doe' })
};

fetch('http://api.example.com/user', options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码中，我们使用了一个包含了 method、headers 和 body 字段的对象，来构造 POST 请求。其中，headers 表示请求头，我们将其设置为 'Content-Type': 'application/json'，表示请求体是一个 JSON 对象。body 则表示请求体，我们将其设置为一个包含 name 属性的 JSON 对象。最后，我们将 options 对象作为 fetch() 方法的第二个参数传入，即可发起一个 POST 请求。

注意事项

使用 Fetch API 发起网络请求时，我们需要注意以下几个问题。

1. fetch() 方法返回的是一个 Promise 对象，需要使用 then() 方法和 catch() 方法来分别解析响应对象和异常信息。

2. 对于 POST、PUT、DELETE 等需要发送请求体的请求，我们需要手动设置请求头和请求体。

3. 对于非 GET 请求，在服务端返回数据之前，浏览器可能不会触发跨域请求的 cors 预检，因此需要在服务端正确设置 Access-Control-Allow-Origin 头，避免跨域问题。

4. Fetch API 并不是所有浏览器都支持，不过我们可以通过 polyfill 或者使用第三方库来解决兼容性问题。

更多使用 Fetch API 的信息，请参考 MDN 文档。