fetch 함수

fetch 함수

1. fetch( ) 함수

 - 네트워크 요청을 보내고, 응답을 처리하기 위한 기본적인 웹 API

 - 웹 페이지 or 웹 패을리케이션에서 서버로 HTTP 요청을 보내고, 서버로부터 데이터를 받아올 수 있음

 - 비동기적으로 작동하며, Promise를 반환함

 

2. 구문

 - 각 매개변수와 메소드는 다음과 같음

    - url : 요청을 보낼 URL 주소

    - options : 요청에 대한 추가 설정을 정의하는 객체. HTTP 메서드, 헤더, 요청 본문 등 다양한 옵션 지정 가능 (선택)

    - .then( ) : fecth( )가 성공적으로 요청을 보내고, 응답을 받으면 실행되는 Promise의 첫 번째 핸들러. 여기서 응답을 처리

    - .catch( ) : 네트워크 오류 or 요청 처리 중 발생한 다른 오류를 처리하기 위한 Promise의 두 번째 핸들러

fetch(url [, options])
  .then(response => {
    // 응답(response)을 처리하는 코드
  })
  .catch(error => {
    // 에러 처리 코드
  });

 

 - fetch( ) 함수는 기본적으로 GET 요청을 수행하며, 다른 HTTP 메서드를 사용하려면, options 객체 내에서 method 속성을 설정해야 함

fetch(url, {
  method: 'POST',
  // 다른 옵션들도 설정 가능
})
.then(response => {
  // 응답(response)을 처리하는 코드
})
.catch(error => {
  // 에러 처리 코드
});

 

 - 서버로부터 받은 응답을 JSON 형식으로 파싱하거나 텍스트로 처리하는 등 다양한 방식으로 응답 처리 가능

 - 헤더 정보를 확인하거나 상태 코드를 검사하여, 요청 처리에 대한 결정을 내릴 수 있음

fetch(url)
.then(response => response.json())
.then(data => {
  // JSON 데이터 (data)를 처리하는 코드
})
.catch(error => {
  // 에러 처리 코드
});