[Javascript] fetch api로 GET/POST 데이터 전송하기

fetch는 비동기 방식으로 HTTP 요청을 날리고 응답을 받을 수 있는 api입니다.

우리가 fetch 예제를 보면 흔히 다음과 같이 사용할 것입니다.

fetch('http://localhost/project/example.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
  	name: 'olly',
    age: 20
  })
})

하지만 example.php에서 다음과 같은 코드를 작성했다면 값을 받아올 수 있을까요?

echo $_POST['name'];
echo $_POST['age'];

결과를 보면 아무것도 출력되지 않습니다. 그 이유는 body에서 데이터를 json 형태로 전송했기 때문에 php에서 post로 데이터를 받아올 수 없었던 것입니다.

 

fetch를 사용해 GET/POST 전송을 하려면 다음의 코드를 참고할 수 있습니다.

fetch('http://localhost/project/example.php', {
  method: 'POST',
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  body: new URLSearchParams({
    name: 'olly',
    age: 20
  })
})

이렇게 header와 body 부분을 변경해주면 POST로 보낸 데이터를 잘 받아오는 것을 확인할 수 있습니다.

 

fetch와 관련된 더 자세한 내용은 아래의 링크에 잘 나와 있습니다.

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch 사용하기 - Web API | MDN