TIL Fetch

새로 배운 것들

Fetch

서버에 네트워크 요청을 보내고
새로운 정보를 받아오기 위해 사용되는 API이다.

기본적인 문법은 다음과 같다

let promise = fetch(url, [options])

• url

접근하고자 하는 URL

• [options]

선택 매개변수, 메소드를 지정할 수 있다.

[options] 에 아무것도 지정하지 않으면
GET 메소드로 진행되어 url로부터 콘텐츠를 다운로드 한다

문법으로 알 수 있듯 fetch()를 호출하면
브라우저는 네트워크 요청을 보내고 프로미스로 받아온다.

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

response에는 몇가지 메소드가 들어있다

• response.text()

응답을 읽고 텍스트를 반환한다.

• response.json()

응답을 읽고 json형태로 파싱한다.

이외에도 몇가지 더 있으나 자세한 것은 다음에 다뤄보겠다.

fetch와 프로미스 체이닝 이용하기

네트워크 요청 시 자주 사용하는 문법이다.

fetch(`https://api.github.com/users/${name}`)
  // 원격 서버가 응답하면 .then 아래 코드가 실행됩니다.
  .then(response => response.json()) // 응답을 JSON 형태로 변환시켜서 다음 Promise로 전달합니다
  .then(json => console.log(json)) // 콘솔에 json을 출력합니다
  .catch(error => console.log(error)); // 에러가 발생한 경우, 에러를 띄웁니다

주석에 적힌대로 작동할 것이다.

async/await 를 이용해 프로미스 체이닝 이용하기

function loadJson(url) {
  return fetch(url)
    .then(response => {
      if (response.status == 200) {
        return response.json();
      } else {
        throw new Error(response.status);
      }
    })
}

loadJson('no-such-user.json')
  .catch(alert); // Error: 404

이 코드를 async/await를 이용해 바꾼다면
아래와 같이 바꿀 수 있을 것이다.

async function loadJson(url) { // (1)
  let response = await fetch(url); // (2)

  if (response.status == 200) {
    let json = await response.json();
    return json;
  }

  throw new Error(response.status);
}

loadJson('no-such-user.json')
  .catch(alert); // Error: 404 (3)

1. loadJson 함수는 async 함수로 만들어야 한다.
2. .then을 모두 await로 바꾼다.
3. loadJson에서 던져진 에러는 .catch로 처리한다.
   loadJson을 호출하는 코드는 async 함수 내부가 아니기 때문에
   await loadJson(…)을 사용할 수 없다.