Javascript 获取：POST JSON 数据

发布于04月23日

我正在try 使用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's JSON echo时，我希望看到我发回的对象({a: 1, b: 2})，但这并没有发生——chrome devtools甚至没有将JSON显示为请求的一部分，这意味着它没有被发送.

推荐答案

对于ES2017 async/await support，以下是如何使用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's answer using promises

但是，该问题是由a long since fixed chrome bug.引起的问题
最初的答案如下.

chrome devtools甚至没有在请求中显示JSON

This is the real issue here，它是bug with chrome devtools，固定在Chrome46上.

这段代码运行良好——它正确地发布了JSON，只是看不见而已.

我希望能看到我送回的东西

这不起作用，因为这不是correct format for JSfiddle's echo.

前correct code名是:

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有效载荷的端点，the original code is correct