[JavaScript] fetch

fetch

• HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API
• HTTP 요청을 전송할 URL과 HTTP 요청 메서드/헤더/페이로드 등을 설정한 객체를 전달
• HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환

const promise = fetch(url [, optinos]);

• fetch 함수는 HTTP 응답을 나타내는 프로미스를 반환, 후속 처리 메서드 then을 통해 프로미스가 resolve한 Response 객체를 전달받을 수 있음
• Response 객체는 HTTP 응답을 나타내는 다양한 프로퍼티를 제공
• Reponse.prototype에는 Response 객체에 포함되어 있는 HTTP 응답 몸체를 위한 다양한 메서드를 제공
  • response.text(): 응답을 읽고 텍스트로 반환
  • response.json(): 응답을 JSON 형태로 파싱
  • response.formData(): 응답을 FormData 객체 형태로 반환
  • response.blob(): 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환
  • response.arrayBuffer(): 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환

GET 요청

fetch(url)
  .then(res => {
    if (!res.ok) throw new Error(res.statusText);
      return res.json();
  })
  .then(todos => console.log(todos))
  .then(err => console.log(err));

 

POST 요청

fetch(url, {
  method: 'POST',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({
    title: 'title',
    content: 'content'
  })
})
.then(res => {
  if (!res.ok) throw new Error(res.statusText);
    return res.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));

 

PUT 요청

fetch(url, {
  method: 'PUT',
  headers: { 'content-type': 'application/json' },
  body: JSON.stringify({
    content: 'content'
  })
})
.then(res => {
  if (!res.ok) throw new Error(res.statusText);
    return res.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));

 

DELETE 요청

fetch(url, {
  method: 'DELETE'
})
.then(res => {
  if (!res.ok) throw new Error(res.statusText);
    return res.json();
})
.then(json => console.log(json))
.catch(err => console.error(err));

 

fetch - 에러 처리

💡 fetch 함수를 사용할 때는 에러 처리에 주의해야 함

const wrongUrl = "url";

// 부적절한 URL이 지정으로 404 Not Found 에러 발생
fetch(wrongUrl)
  .then(res => {
    if (!res.ok) throw new Error(res.statusText); // status: 404, statusText: Bad Request
      return res.json();
  })
  .then(json => console.log(json))
  .catch(err => console.log(err));

fetch(url)
  .then((res) => {
    if (!res.ok) {
      const errorMessage = res.json()
      console.log("errorMessage: ", errorMessage) // Error Message
    }
    return res.json();
  })
  .catch((err) => console.error(err));

• fetch 함수가 반환하는 프로미스는 기본적으로 404 Not Found나 500 Internal Server Error와 같은 HTTP 에러가 발생해도 에러를 reject하지 않고 불리언 타입의 ok 상태를 false로 설정한 Response 객체를 resolve 함
• res.ok: 상태 범위 200~299
• 오프라인 등의 네트워크 장애나 CORS 에러에 의해 요청이 완료되지 못한 경우에만 프로미스를 reject 함
• fetch 함수를 사용할 때는 다음과 같이 fetch 함수가 반환하는 프로미스가 resolve한 불리언 타입의 ok 상태를 확인해 명시적으로 에러를 처리할 필요가 있음

 

 

참고자료

• Fetch API - Web API | MDN (mozilla.org)
• https://ko.javascript.info/fetch