1. Fetch 시작하기

1.1 Fetch 등장 배경

Fetch 사용 이유에 대해 알기 위해서는 비동기통신의 역사에 대해 간략하게 알고 넘어갈 필요가 있다. Fetch가 나오기 전까지는 JS에서 Ajax를 사용하기는 굉장히 번거로웠다. XMLHttpRequest API(이하 XHR)를 사용하여 XML 데이터를 주고받았는데 코드가 복잡해 가독성도 떨어지고 서버의 동작을 파악하기 힘들었다. 이러한 불편함을 해소하기 위해 Fetch API가 ES6부터 등장하며 XHR를 사용하던 방식보다 직관적이며 가독성이 더욱 좋아지게 되었다.

1.2 Fetch 사용 이유

Fetch는 네트워크 통신을 포함한 리소스를 가지고 오기 위한 인터페이스를 제공해 주는 API이다. XHR과 기능은 같지만 확장 가능하며 효과적으로 구성되어 있고,[1] 내장기능이라 라이브러리 업데이트에 따른 에러를 걱정하지 않아도 된다.

2. Fetch 문법

2.1 Response 프로퍼티와 메서드

2.1.1 Response 프로퍼티와 메서드를 설명하기 앞선 간략한 promise 설명 예제

let promise = fetch('연습 url')

console.log(promise)

Promise는 앞에서 살펴 봤듯이 fetch를 사용했을 때 실행 결과에 대한 상태를 반환해 주는 약속된 객체이다. Promise에는 3가지 상태 pending, fulfilled, reject가 존재한다. pending은 진행 중, fullfilled는 완료, rejected는 실패를 의미한다. 위 console 창을 확인해 보면 PromiseState의 상태는 fullfilled, fetch를 해오는 것에 성공한 것을 확인할 수 있다.

2.1.2 Response 프로퍼티와 메서드를 설명하기 앞선 간략한 then 함수 설명 예제

let promise = fetch("연습 URL").then(function (response) {
    console.log(response);
});

자바스크립트는 then() 메서드를 제공한다. then() 메서드 안에 ‘연습 URL’의 응답값을 담을 수 있는 콜백 함수를 만들어 놓고 정상적으로 응답이 들어왔을 경우 응답값을 처리할 수 있다.

2.1.3 Response property에 대한 설명과 예제

Response는 자바스크립트의 객체이다. Response는 성공과 실패에 대한 중요한 정보를 담고 있다. 본격적으로 Response의 프로퍼티를 알아보자.