자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아올 수 있다

Ajax를 이용해 페이지 새로고침 없이(비동기식) 서버에서 데이터를 가져올 수 있다.

Ajaxx외에도 서버에 네트워크 요청을 보내고 받아올 수 있는 방법 중 fetch api를 이용할 수 있다.

• fetch는 구식 브라우저에서는 지원하지 않지만 대부분의 모던 브라우저가 지원하고 있음

<aside> 📌 fetch 기본 사용법 ⇒ let promise = fetch(url, [options]);

</aside>

• 첫 번째 인자 url은 접근하고자 하는 url
• 두 번째 인자 options는 선택 매개변수로 http method나 headers, body 내용을 개체로 지정할 수 있음
  • options에 아무것도 적지 않으면 default 값으로 get 요청

fetch를 호출하면 브라우저는 네트워크 요청을 보내고 promise를 반환한다.

• promise 객체 반환이므로 비동기 통신 방식

반환받은 promise가 내장 클래스 Response 인스턴스와 함께 이행 상태가 된다.

아직은 본문(body)이 도착하기 전이지만 개발자는 응답 헤더를 보고 요청이 성공적으로 처리되었는지 확인할 수 있다.

네트워크 문제로 존재하지 않는 경로 혹은 http 요청을 보낼 수 없는 상태에서는 promise는 거부 상태가 된다.

Promise의 응답 객체 꺼내기

1. then 메소드 사용

const promise = fetch('<https://jsonplaceholder.typicode.com/users>');

 promise.then((response) => {
     console.log(response);
 });

Fetch API를 사용해서 응답 받은 데이터는 Response 객체에 담기게 된다.

하지만 Fetch API는 내부적으로 Promise 객체를 반환하여 응답 객체에 대한 접근이 차단되어 있다.