JS Fetch用法介绍

fetch() 是 JavaScript 中用于发送网络请求的 API，它可以用于获取数据和向服务器发送数据。下面是 fetch() 的基本用法。

发送 GET 请求

发送 GET 请求时，需要指定请求的 URL 和请求方法。

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

上面的代码会发送一个 GET 请求到 https://example.com/data，并将响应转换为 JSON 格式，然后将响应数据输出到控制台。

发送 POST 请求

发送 POST 请求时，需要指定请求的 URL、请求方法和请求体。

fetch('https://example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码会发送一个 POST 请求到 https://example.com/data，并将请求体设为 { key: 'value' }，同时指定请求头的 Content-Type 为 application/json。然后将响应转换为 JSON 格式，然后将响应数据输出到控制台。

错误处理

fetch() 返回的是一个 Promise 对象，可以使用 then() 和 catch() 方法进行响应处理和错误处理。如果请求失败或响应状态码不是 2xx，则会触发 catch() 方法。

fetch('https://example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(response.statusText)
    }
    return response.json()
  })
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码会发送一个 GET 请求到 https://example.com/data，如果响应状态码不是 2xx，则会抛出一个错误，然后将错误输出到控制台。

以上就是 fetch() 的基本用法介绍。更多详细的用法请参考 MDN 文档。