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));
매개변수
- URL: 요청을 보낼 서버의 주소입니다.
- 옵션 객체 (선택 사항): 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를 사용해 네트워크 요청을 쉽게 처리할 수 있게 해주는 함수로, 다양한 애플리케이션에서 많이 사용됩니다.
반응형