取得：傳輸JSON數據

Question

我正在嘗試使用fetch方法POST一個JSON物件。

根據我的理解，我需要將一個字串化的物件附加到請求的body中，例如：

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開發者工具甚至不顯示JSON作為請求的一部分，這意味著它沒有被發送。

Answer 1

我認為你的問題是jsfiddle只能處理form-urlencoded請求。但是正確的方法是將正確的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 2

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