fetch 함수

사용하는 이유

• 백엔드 API를 불러들이고 데이터를 응답 받기위해 사용한다.

• 똑같은 기능으로 axios 라이브러리가 있고 axios도 흔하게 쓰인다.

기본 설명

const promise = fetch(url, [, options])

• fetch 함수에는 HTTP 요청을 전송할 url과 HTTP 요청 메서드, 요청 헤더 등을 설정한 객체를 전달한다.

• fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다.

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

• fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 프로미스를 반환한 다음, then 메서드를 통해 프로미스가 resolve한 Response 객체를 전달받을 수 있다.

• 주의사항 : res는 각 함수의 매개변수일 뿐, 모두 똑같은 값이 아니다.

• res (Response Object) : http 통신에서 요청과 응답 중 응답의 정보를 담고 있는 객체다.

• res.json() : JSON을 응답으로 보낸다.

• 가끔 응답 정보가 안 오는 경우도 있는데, 정보가 안왔는데 프론트엔드에서 res.json()을 호출하면 에러가 난다.

• 따라서 위 코드에서 첫번째 then에 if문을 설정해 정보가 안 왔을 때의 상황도 설정해주는게 좋다.

.then(res => {
    if (res.status === 200) {
        alert("저장 완료");
    } else if (res.status === 403) {
        return res.json();
    }
  })
  .then(res => {
    console.log("에러 메시지 ->", res.message);
  })

fetch 함수 메서드

GET 메서드와 POST 메서드

• fetch 함수의 기본 메서드는 GET 메서드다.

• POST 메서드를 사용할 때는 JSON.stringfy()를 사용해서 객체형태의 데이터를 텍스트 기반인 JSON 형태로 변환한다.

• JSON은 String, Number, Object, Array, Boolean, Null을 지원하지만, Function, Date, Undefined 등과 같은 타입은 지원하지 않는다. 그래서 Function, Date, Undefined는 JSON이 지원하는 타입으로 바꿔야 되서 JSON.stringty()를 사용한다.

• axios는 객체를 그대로 작성해도 되서 편리하다.