获取:POST JSON 数据

新手上路,请多包涵

我正在尝试使用 fetch 发布一个 JSON 对象。

据我了解,我需要将一个字符串化对象附加到请求的正文中,例如:

fetch("/echo/json/",
{
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
    method: "POST",
    body: JSON.stringify({a: 1, b: 2})
})
.then(function(res){ console.log(res) })
.catch(function(res){ console.log(res) })

使用 jsfiddle 的 JSON 回显 时,我希望看到我发送回来的对象( {a: 1, b: 2} ),但这不会发生 - chrome devtools 甚至没有将 JSON 显示为请求的一部分,这意味着它没有被发送。

原文由 Razor 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 926
2 个回答

借助 ES2017 async/await 支持,这是 POST 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);
 })();

不能使用 ES2017? 使用承诺查看@vp_art 的答案

然而,问题是询问由 长期修复的 chrome 错误引起的问题。

原始答案如下。

chrome devtools 甚至没有将 JSON 显示为请求的一部分

这是真正的问题,它是 chrome devtools 的一个错误,已在 Chrome 46 中修复。

该代码工作正常 - 它正确地发布 JSON,它只是看不到。

我希望看到我发回的对象

这不起作用,因为这不是 JSfiddle 的 echo 的正确格式

正确的代码 是:

 var payload = {
 a: 1,
 b: 2
 };

 var data = new FormData();
 data.append( "json", JSON.stringify( payload ) );

 fetch("/echo/json/",
 {
 method: "POST",
 body: data
 })
 .then(function(res){ return res.json(); })
 .then(function(data){ alert( JSON.stringify( data ) ) })

对于接受 JSON 有效负载 的端点,原始代码是正确的

原文由 Razor 发布,翻译遵循 CC BY-SA 4.0 许可协议

我认为您的问题是 jsfiddle 只能处理 form-urlencoded 请求。但是发出 json 请求的正确方法是传递正确的 json 作为主体:

 fetch('https://httpbin.org/post', {
  method: 'POST',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({a: 7, str: 'Some string: &=&'})
}).then(res => res.json())
  .then(res => console.log(res));

原文由 vp_arth 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏