Fetch 기본 사용 방법

fetch를 이용하면 서버에서 데이터를 가져오거나 추가하는 등의 요청을 할 수 있다.

fetch는 새로 생긴 메소드이고 이전에는 XMLHttpRequest 객체를 이용해서 데이터를 주고 받았다.

대부분 fetch를 쓰겠지만 다음의 경우에는 XMLHttpRequest을 이용해야 한다.

 

1. XMLHttpRequest가 사용된 예전 코드를 유지보수 할 때

2. 폴리필 없이 구형 브라우저에서도 돌아가도록 해야 할 때

3. fetch에 없는 기능을 사용할 때

 

GET 요청

app.get('/user', (req, res) => {
  res.status(200).send({ id: 1, name: 'john' });
});

NodeJS Express의 서버 코드가 위와 같다면 아래 getData 메소드를 클라이언트에서 호출했을 때 console에 출력되는 값은 { id: 1, name: 'john' }이다.

async function getData() {
  const res = await fetch('http://localhost:3000/user');
  const json = await res.json();
  console.log(json); // { id: 1, name: 'john' }
}

 

POST 요청

GET 이외의 요청은 fetch의 두 번째 인자로 객체를 넣어줘야 한다.

객체에는 다음의 몇 가지 속성이 포함된다.

method에는 POST, PUT, PATCH, DELETE 중 사용할 메소드를 입력한다.

headers를 이용해 다양한 request 헤더를 설정할 수 있다.

body에는 서버로 보낼 데이터 객체를 넣는다.

async function postData() {
  const body = {
    user: 'john'
  };
  const res = await fetch('http://localhost:3000/user', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify(body)
  });
  const json = await res.json();
  console.log(json); // 요청 결과
}

 

에러 핸들링

1. 상태 코드

fetch를 이용해서 서버에 request를 보내면 서버는 요청이 어떻게 처리 됐는지를 알려주는 상태 코드를 보내준다.

성공했으면 200, 문제가 있을 때에는 400이나 500번대의 숫자를 보낸다.

상태 코드를 반환했다는 것은 fetch가 정상적으로 처리됐다는 것을 의미한다.

때문에 엄밀한 의미로 400이나 500번대의 상태 코드를 에러라고 할 수 없다.

에러가 아니기 때문에 try, catch 블록으로도 잡히지 않는다.

if 문을 사용해서 상태 코드에 따라 적절한 조치를 취할 수 있도록 해야 한다.

async function getData() {
  const res = await fetch('http://localhost:3000/user');
  // 정상적으로 처리됐을 때
  if (res.status === 200) {
    const json = await res.json();
    console.log(json);
    // 500 문제가 발생했을 때
  } else if (res.status === 500) {
    console.log('500');
  } else {
    console.log('상태를 알 수 없는 문제가 발생');
  }
}

위 코드에서는 fetch를 했을 때 받을 수 있는 상태 코드가 200과 500일 뿐이라고 가정한 것이고

만약 다른 상태 코드를 받았을 때에는 상태를 알 수 없는 문제가 발생했다는 메시지가 나오도록 했다.

이렇게 예상 가능한 상태 코드 처리를 먼저 해주고

나머지 예상치 못한 상태 코드가 왔을 때에도 else 등으로 예외 처리를 해야 한다.

 

2. 에러

위와 같은 상태 코드가 아닌 fetch를 이용한 request 자체에 문제가 있을 경우에는

에러가 발생하기 때문에 try, catch 블록으로 감싸서 처리해야 한다.

 

예를 들어 fetch의 첫 번째 인자에 넣은 문자가 없는 URL일 경우에는 fetch에 실패했다는 에러가 발생한다.

또한 fetch로 받아온 데이터가 json 형태가 아닌 string이라면 json으로 파싱할 수 없다는 에러가 발생한다.

async function getData() {
  try {
    const res = await fetch('http://localhost:3000/200'); // 없는 url일 때
    const json = await res.json(); // json으로 파싱할 수 없을 때
    console.log(json);
  } catch (error) {
    console.log(error); // 발생한 에러 표시
  }
}

 

깃허브 : github.com/socratone/simple-fetch

참고 : 

ko.javascript.info/fetch

ko.javascript.info/xmlhttprequest