Javascript - fetch()

fetch()

Front-end에서 Back-end로부터 데이터를 받아오려면 api를 호출하고 해당 데이터를 응답받아야 한다.
이때 사용되는 것이 fetch() 이다.

1. 기본 문법

fetch('api 주소')
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  });

먼저, fetch()는 호출할 api의 주소를 인자로 받는다.
해당 주소를 인자로 받아서 해당 데이터의 응답을 return한다.

이후, 차례로 then()이, return된 결과값을 인자로 받는다.
fetch()가 return한 결과값은 바로 사용할 수가 없다.
때문에, 결과값 객체에 json()을 사용해야한다.

json()은 다 읽은 결과값을 Promise형태로 반환한다.

Promise는 간단하게 설명하면,
언젠가는 단일 값을 생성할 수 있는 객체이다.

마지막으로, then()이 다시 한번 반환된 값을 인자로 받아서
지정한 로직에 맞게 실행이 된다.

2. Method

fetch()는 defalut method가 GET이기 때문에 따로 지정을 하지 않아도 GET으로 호출된다.

하지만 method가 POST라면,

fetch('api 주소', {
    method: 'post',
    body: JSON.stringify({
        name: "enjoywater",
    })
  })
  .then(res => res.json())
  .then(res => {
    // data를 응답 받은 후의 로직
  })

처럼 지정할 수 있다.

3. 응답 body가 없는 경우

응답 body로 JSON 데이터를 주지 않는데 Front-end에서 json()을 호출하면 에러가 발생하게 된다.

fetch('api 주소', {
    method: 'post',
    body: JSON.stringify({
        name: "enjoywater",
    })
  })
  .then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

위 처럼 처음에 작성하는 then()에 응답상태로 조건을 넣어주면 에러를 방지할 수 있다.