Fetch 的格式 - JavaScript

在 JavaScript 中发送异步请求可以使用 fetch 方法。这是一个新的 API，相比于传统的 AJAX 请求有很多优势。

基本用法

fetch 方法返回一个 Promise，可以使用 .then() 和 .catch() 进行链式调用。最简单的用法像这样：

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

这段代码会向 url 发送一个 GET 请求，并且在请求成功后将响应转换为 JSON 格式并打印结果。如果请求失败了，就会打印一个错误。

请求参数

如果你需要发送 POST、PUT 或者其他类型的请求，可以添加一个可选的参数对象。例如：

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

在这个例子中，我们发送了一个 POST 请求，并且设置了请求头部的 Content-Type 为 JSON。我们还将请求体中的 data 对象转换为字符串并传递给了 body 参数。

响应处理

fetch 方法返回的响应对象有很多属性和方法。其中最常用的是 json() 方法，可以将响应体解析为 JSON，还有 text() 方法，可以将响应体解析为纯文本。例如：

fetch(url)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.text();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个例子中，我们先检查了响应的状态码是否为 200，如果不是就抛出异常。如果状态码没有问题，就将响应体解析为纯文本并打印结果。

错误处理

在任何一个 Promise 链中，都可以使用 .catch() 方法来处理错误。例如：

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

在这个例子中，我们没有检查响应的状态码，如果请求出错了就会打印一个错误。如果你需要检查响应状态码，可以像前面的例子那样。

参考文献

• Using Fetch - Web APIs | MDN