JavaScript | fetch() 方法

在 Web 开发中，我们经常需要获取或发送数据。fetch() 是在 JavaScript 中发送 HTTP 请求的现代 API。它返回一个 Promise 对象，可以读取响应并对其进行处理。

发送 GET 请求

通过使用 fetch() 方法发送 GET 请求，可以获取一个资源的内容。以下是一个例子，该例子使用了 fetch() 方法从 API 获取 JSON 数据，并将其打印到控制台上：

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

发送 POST 请求

通过使用 fetch() 方法发送 POST 请求，可以将数据传递到服务器上。以下是一个例子，该例子使用了 fetch() 方法向服务器提交了数据，并将服务器的响应打印到控制台上：

const data = {
  title: 'foo',
  body: 'bar',
  userId: 1
}

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

处理错误

在使用 fetch() 方法时，可能会遇到各种各样的错误。以下是一些处理错误的方法：

• 使用 catch() 方法捕获 Promise 的错误。
• 检查请求状态，并根据状态码处理错误。

下面是一个处理错误的例子，该例子使用 fetch() 方法向服务器发送一个无效的请求，并将服务器的响应打印到控制台上：

fetch('https://jsonplaceholder.typicode.com/invalid-url')
  .then(response => {
    if (!response.ok) {
      throw Error(response.statusText);
    }
    return response;
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(error => console.error(error))

总结

使用 fetch() 方法发送 HTTP 请求是一种简单且灵活的方式，可以获取或发送数据。使用该方法时，需要处理错误并将 Promise 的响应数据传递给回调函数。