提取：POST json数据

一尘不染

提取：POST json数据

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显示为请求的一部分，这意味着它没有被发送。

阅读 292

2020-07-27

共1个答案

一尘不染

借助ES2017 async/await支持，这是如何实现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);

})();

无法使用ES2017？参见@vp_art使用诺言的答案
但是，问题是由 很久以来修复的chrome bug 引起的。
原始答案如下。

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

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

该代码可以正常工作-它正确地发布了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有效负载的端点， 原始代码是正确的

2020-07-27