Node.js

Node.js ) fetch()

Hweb 2024. 10. 17. 11:07

fetch() 함수는 JavaScript에서 비동기적으로 네트워크 요청을 보내고, 서버로부터의 응답을 받아오는 데 사용되는 함수입니다. 이 함수는 주로 HTTP 요청을 보내는 데 사용되며, Promise를 반환합니다. 이는 요청이 완료될 때까지 기다렸다가, 성공하면 응답 객체를 반환하고, 실패하면 에러를 반환합니다.

 

기본 사용법

fetch(url, options)	// 호출
  .then((response) => console.log("response:", response))	// 성공
  .catch((error) => console.log("error:", error));	// 실패

 

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // JSON 형태로 응답을 파싱
  })
  .then(data => {
    console.log(data); // 데이터 처리
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

 

fetch('url',  // 호출
	{
	method: "POST",
	body:  // 보낼 데이터
    })
    //서버응답
    .then((response) => console.log(response));

 

매개변수

  1. URL: 요청을 보낼 서버의 주소입니다.
  2. 옵션 객체 (선택 사항): HTTP 메서드, 헤더, 요청 본문 등의 추가 옵션을 설정할 수 있는 객체입니다. 기본적으로 GET 요청으로 처리됩니다.

예를 들어, POST 요청을 보내고 싶다면 다음과 같이 작성할 수 있습니다:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

 

 

주요 특징

  • 비동기 처리: fetch()는 네트워크 요청을 비동기적으로 처리하며, 결과를 Promise 형태로 반환하여 then과 catch를 사용해 응답을 처리할 수 있습니다.
  • 응답 처리: 응답 객체는 HTTP 상태 코드, 헤더 및 응답 본문에 대한 정보를 포함합니다. 본문은 .text(), .json() 등의 메서드를 통해 변환할 수 있습니다.
  • 에러 처리: 네트워크 오류나 HTTP 상태 코드가 200이 아닌 경우에 대한 에러 처리를 catch 블록에서 수행할 수 있습니다.

fetch()는 네이티브 JavaScript를 사용해 네트워크 요청을 쉽게 처리할 수 있게 해주는 함수로, 다양한 애플리케이션에서 많이 사용됩니다.

반응형