首页 > web前端 > js教程 > 如何使用 Fetch API 发布 JSON 数据?

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

Mary-Kate Olsen
发布: 2024-12-11 02:57:14
原创
322 人浏览过

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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板