[解決済み] フェッチする JSONデータをPOSTする

質問

を使用してJSONオブジェクトをPOSTしようとしています。 フェッチ .

私が理解できるところでは、私はリクエストのボディに文字列化されたオブジェクトを添付する必要があります、例えば。

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を表示しないので、送信されていないことを意味します。

解決するには？

ES2017で async/await サポート には、このような方法があります。 POST を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 さんの 約束事で答える

しかし、この質問は、以下の原因による問題を尋ねています。 ずっと前に修正されたクロームのバグです。
オリジナルの回答は以下の通りです。

chrome devtoolsはリクエストの一部としてJSONを表示しません。

これが本当の問題なのです , そしてそれは chrome devtoolsのバグ Chrome 46で修正されました。

そのコードは正常に動作します - JSONを正しくPOSTしていますが、見ることができないだけです。

送信したオブジェクトが戻ってくることを期待します。

でないため、うまくいきません。 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ペイロードを受け入れるエンドポイント用。 元のコードは正しい