Fetch : POST JSON 데이터

질문 : 가져 오기 : POST 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} )를 다시 볼 수있을 것으로 예상되지만 이것은 발생하지 않습니다. 크롬 devtools는 요청의 일부로 JSON을 표시하지도 않습니다. , 이는 전송되지 않음을 의미합니다.

답변

---

ES2017 async/await 지원 을 사용하여 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 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 페이로드를 수락하는 엔드 포인트의 경우 원래 코드가 정확합니다.

출처 : https://stackoverflow.com/questions/29775797/fetch-post-json-data