JavaScript，用fetch（）用JSON数据做一个POST

Question

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

Answer 1

在搜索引擎中，我最终讨论了使用fetch发布非json数据的主题，所以我想添加这个。

对于非json，您不必使用表单数据。您可以简单地将Content-Type标头设置为Application/x-wan-form-urlencoded并使用字符串：

fetch('url here', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work
    body: 'foo=bar&blah=1'
});

构建body字符串的另一种方法是使用库，而不是像我上面那样输入它。例如，来自query-string或qs包的stringify函数。所以使用它看起来像：

import queryString from 'query-string'; // import the queryString class

fetch('url here', {
    method: 'POST',
    headers: {'Content-Type':'application/x-www-form-urlencoded'}, // this line is important, if this content-type is not set it wont work
    body: queryString.stringify({for:'bar', blah:1}) //use the stringify object of the queryString class
});

Answer 2

我认为您的问题是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));

Answer 3

借助ES2017async/wait支持，这是POSTJSON有效负载的方法：

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