[JS]fetch 실습

실제로 OPEN API를 이용해 데이터를 불러와보자.

API는 "json placeholder" 라는 페이지를 이용했다. (데이터 출처)

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))

위와 같이, 데이터를 불러온다. (default는 get방식이다.)

1. fetch를 이용해 url 데이터를 불러온다.
2. then 메서드를 통해 응답값을 json형식으로 변환한다.
3. then 메서드를 통해 그 값(data)을 console에 출력한다.

다음과 같이 데이터를 잘 불러오는 것을 확인할 수 있다.

그렇다면, 이번엔 POST방식으로 데이터를 불러와보자.
POST방식에서는 fetch('URL', {}) 처럼 URL뒤의 인자도 중요하다.

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers:{'Content-Type' : 'application/json'},
    body: JSON.stringify({
        title: 'foo',
        body:'bar',
        userId:'1'
    })
})

서버에서 우리가 얻고자하는 데이터가 json형태인지 알기 위해서, method와 headers를 알맞게 기입해주어야 한다.
body에 데이터를 json 문자열 형식으로 꼭 변환해서 보내주어야 한다.
fetch함수를 사용한 결과를 console에 나타냈다.

결과는 위와 같다.
(http상태코드 201은 성공적으로 요청되었으며 서버가 새 리소스를 작성했다고 이해하면 된다.)

그렇다면, post로 서버에 보낸 우리의 데이터가 잘 있는지 확인해보자.

fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers:{'Content-Type' : 'application/json'},
    body: JSON.stringify({
        title: 'foo',
        body:'bar',
        userId:'1'
    })
}).then(res => res.json()).then(data => console.log(data))

get방식과 마찬가지로, 응답값을 json형식으로 바꾸고, 그 데이터를 콘솔에 불러와보자.

결과는 위와 같이 잘 나오는 것을 볼 수 있고, 서버에서 id값을 101로 부여한 것을 확인할 수 있다.