JavaScript，使用JSON数据与fetch（）进行POST

javascript json fetch-api

2022-08-29 22:14:38

我正在尝试使用抓取发布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回声时，我希望看到我发送（）回来的对象，但这并没有发生 - chrome devtools甚至没有将JSON显示为请求的一部分，这意味着它不会被发送。{a: 1, b: 2}

答案 1

借助 ES2017 异步/等待支持，以下是 JSON 有效负载的方法：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);
})();

无法使用 ES2017？使用承诺查看@vp_art的答案

然而，问题是要求一个由一个早已修复的chrome错误引起的问题。
原始答案如下。

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

这是真正的问题，这是Chrome devtools的一个错误，在Chrome 46中修复。

该代码工作正常 - 它正确地POSTING JSON，只是看不到它。

我希望看到我发回的对象

这不起作用，因为这不是JSfiddle回声的正确格式。

正确的代码是：

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 有效负载的终结点，原始代码是正确的

答案 2

我认为您的问题是只能处理请求。但是，使 json 请求的正确方法是作为正文传递正确：jsfiddleform-urlencodedjson

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));