비동기 HTTP 요청 (1) Fetch

자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다.
ex) 주문 전송, 사용자 정보 읽기 등

여러가지 방법이 있는데, 가장 먼저 Fetch()에 대해 알아보자.

Fetch() 메서드

let promise = fetch(url, [options])

・ url - 접근하고자 하는 URL
・ options - 선택 매개변수, method나 header 등을 지정할 수 있다

options 에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로 부터 콘텐츠를 불러온다.
fetch() 를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다.
이 때, 반환되는 프라미스는 fetch()를 호출하는 코드에서 사용된다.

💻 기본적인 fetch() 사용법 💻

fetch(주소)
  .then((response) => response.json())
  .then((data) => {
    // data를 응답 받은 후의 로직
  })
  .catch(err => {
    console.log(err);
  });

💻 method가 POST인 경우 💻

fetch('주소', {
    method: 'post',
    body: JSON.stringify({
        속성 이름 : 보내줄 값
    })
  })
  .then(response => response.json())
  .then(res => {
     console.log(response);
  })

[요약]

• fetch 함수를 사용하면 리소스를 비동기로 요청할 수 있다.
• fetch를 호출하면 브라우저는 요청을 보내고 Promise 객체를 반환한다.
  이 때, 요청이 완료되면 성공 여부에 상관없이 Promise가 resolved 되어 Response 객체가 반환된다. (즉, 404 같은 응답 코드를 받아도 에러가 나지 않는다)
• HTTP 요청이 완료되지 못한 상태면 Promise가 rejected 된다. 이 때, catch 메서드를 사용하여 에러를 처리할 수 있다.
• Response 객체는 응답에 대한 정보를 담고 있다.