Fetch API 片段

Fetch API 是一个基于 Promise 对象设计的 Web API，用于取代 XMLHttpRequest，提供了一种更加灵活、可扩展的方式来发送网络请求。

发送 GET 请求

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

上面的代码使用 Fetch API 发送了一个 GET 请求到 https://jsonplaceholder.typicode.com/posts，然后通过 response.json() 方法将响应转换为 JSON 格式的数据。如果请求成功，将会在控制台打印出返回的数据，否则将会打印出错误信息。

发送 POST 请求

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

上面的代码使用 Fetch API 发送了一个带有请求体的 POST 请求到 https://jsonplaceholder.typicode.com/posts，请求体的内容是一个 JSON 对象，包含了 title、body 和 userId 三个属性。在发送请求时，需要通过 headers 参数指定请求头的内容。同样地，如果请求成功，将会在控制台打印出返回的数据，否则将会打印出错误信息。

发送 FormData

const form = new FormData()
form.append('username', 'foo')
form.append('password', 'bar')

fetch('https://example.com/login', {
  method: 'POST',
  body: form
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

如果需要上传表单数据，则可以使用 FormData 对象来构造请求体。上面的代码展示了如何构造一个包含 username 和 password 两个字段的表单数据。在发送请求时，只需要将 FormData 对象作为请求体传递给 body 参数即可。

取消请求

const controller = new AbortController()
const signal = controller.signal

setTimeout(() => controller.abort(), 5000)

fetch('https://example.com/big-file', { signal })
  .then(response => response.blob())
  .then(blob => console.log(`Downloaded ${blob.size} bytes`))
  .catch(error => console.error(error))

如果需要取消请求，可以使用 AbortController API。上面的代码展示了如何创建一个 AbortController 对象，并将其信号传递给 Fetch API。然后，通过 setTimeout 定时器来模拟请求超时，当定时器触发时，调用 controller.abort() 方法取消请求。如果请求被取消，将会打印出错误信息，否则将会打印出下载的数据大小。

以上是 Fetch API 的一些常用片段，可以供程序员们参考使用。