[Javascript] Fetch API

Fetch API  

 웹 개발을 하다 보면 클라이언트와 서버 간에 데이터를 주고받기 위해 HTTP 통신을 하게 됩니다. 오늘 포스팅은 Javascript의 비동기 통신을 위해 사용되는 Fetch API에 대해 알아보도록 하겠습니다. 동기, 비동기에 대해 잘 모르시는 분은 아래 링크를 우선 보고 와주시면 감사하겠습니다.

2022.12.01 - [Javascript] - [Javascript] 동기(Synchronous)와 비동기(asynchronous)란?

[Javascript] 동기(Synchronous)와 비동기(asynchronous)란?

 

Fetch API 란?

 비동기 통신 방법의 하나로 ES6 도입된 Javascript 내장 라이브러리입니다. 또한 네트워크로부터 받는 Request, Response의 객체를 받습니다. 유일한 함수 fetch()만 사용할 수 있으며 fetch() 함수는 Promise 객체를 반환합니다. 그리고 통신의 성공/실패와 관계없이 Promise 객체로부터 Response 객체를 받을 수 있다. 

 

 

fetch() 함수 기본 형태

fetch()의 피라미터에는 접근할 url 그리고 선택 피라미터로 method, header 및 옵션을 지정할 수 있다. 

let promise = fetch(url, {options})

선택 매개변수의 옵션은 다음과 같다.

• method : 통신 방법 -> 기본 방식은 Get 방식
• headers : 요청 헤더의 정보
• body : 보내는 데이터 
• mode : cors 값 결정
• cache : cache 사용 여부
• credentials  : 자격 증명을 위한 옵션 설정

fetch(url, {
  method: 'GET'
  mode: 'cors', 
  cache: 'no-cache', 
  credentials: 'same-origin', 
  headers: {
  'Content-Type': 'application/json',
  },
  body: JSON.stringify(data), 
})
.then(response => response.json());

 

위의 코드와 같이 선택 매개변수의 옵션을 설정할 수 있다. 하지만 응답에 실패할 경우도 있다. 이런 경우에 어떻게 처리하는지 알아보겠습니다.

 

fetch() -> 응답 실패 시 

fetch(url)
  .then(function() {
  //응답 성공
  })
  .catch(function() {
  //응답 실패  
  });

 응답에 실패하는 경우 reject promise가 반환됩니다. catch 메서드는 reject promise를 처리하기 위해 사용됩니다. catch 메서드를 활용하여 응답에 실패할 경우를 대비할 수 있습니다.