我正在尝试使用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,这意味着它没有被发送。
{a: 1, b:2}
借助ES2017 async/await支持,这是如何实现POSTJSON负载的方法:
async/await
POST
(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); })();
但是,问题是由 很久以来修复的chrome bug 引起的 。 原始答案如下。
chrome devtools甚至没有在请求中显示JSON
这是真正的问题 , 这是 Chrome 46中修复的chromedevtools的错误。
该代码可以正常工作-它正确地发布了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有效负载的端点, 原始代码是正确的