如何使用 Fetch API 发布 JSON 数据？-js教程-PHP中文网

如何使用 Fetch API 发布 JSON 数据？

Mary-Kate Olsen

发布： 2024-12-11 02:57:14

原创

338 人浏览过

How Can I POST JSON Data Using the Fetch API?

使用 Fetch API 发布 JSON 数据

使用 POST 请求类型发送 JSON 数据是常见的做法。您可以使用 JavaScript 的 Fetch API 来完成此操作，它提供了用于发出 HTTP 请求的强大接口。

通过 Fetch API 发送 JSON 数据的一种方法是包含 JSON 对象作为请求正文。为此，请使用 JSON.stringify() 将 JSON 对象转换为字符串：

const body = JSON.stringify({a: 1, b: 2});

登录后复制

然后，将此字符串化对象附加到请求正文：

fetch("/echo/json/", {
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: body
})
.then(res => console.log(res))
.catch(res => console.log(res));

登录后复制

但是，这方法在某些情况下可能不起作用，特别是在使用 jsfiddle 的 JSON echo 等开发工具时。或者，您可以使用 ES2017 async/await 语法来处理 JSON 负载：

(async () => {
  const rawResponse = await fetch('https://httpbin.org/post', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({a: 1, b: 'Textual content'})
  });
  const content = await rawResponse.json();

  console.log(content);
})();

登录后复制

此方法将响应转换为 JSON 对象，可以在代码中更有效地查询和处理该对象。

以上是如何使用 Fetch API 发布 JSON 数据？的详细内容。更多信息请关注PHP中文网其他相关文章！