JavaScript Fetch API
추천 자료: ASP.NET Core 인증 및 권한 부여
Fetch API는 JavaScript에서 웹 리소스에 대한 액세스를 제공하는 인터페이스입니다. 이 API는 웹 애플리케이션에서 데이터를 쉽게 가져오거나 전송할 수 있게 해주는 기능을 제공합니다. Fetch API는 Promise 기반으로 작동하며, XMLHttpRequest보다 간결한 구문을 제공합니다.
사용법
기본적인 Fetch API 사용법은 다음과 같습니다.
fetch(url, options)
.then(response => response.json())
.then(data => {
// 데이터 처리 코드를 여기에 작성합니다.
})
.catch(error => {
// 에러 처리 코드를 여기에 작성합니다.
});
url
: 가져오거나 전송할 리소스의 URL입니다.options
: 요청에 대한 추가적인 설정을 객체 형태로 전달합니다. (옵션)
예제
fetch("https://api.example.com/data")
.then(response => {
if (!response.ok) {
throw new Error("네트워크 응답이 올바르지 않습니다.");
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error("데이터 가져오기 중에 문제가 발생했습니다.:", error);
});
위 예제에서는 https://api.example.com/data
URL에서 데이터를 가져오고, 가져온 데이터를 콘솔에 출력합니다. 에러가 발생할 경우, 에러 메시지를 콘솔에 출력합니다.
주의사항
- Fetch API는 기본적으로 CORS(Cross-Origin Resource Sharing) 정책을 따릅니다. 따라서 다른 도메인의 리소스를 가져올 때, 해당 도메인에서 적절한 CORS 헤더를 설정해야 합니다.
- Fetch API는 브라우저 지원이 제한적일 수 있으므로, 구형 브라우저에서 사용할 경우에는 폴리필 또는 XMLHttpRequest를 사용해야 합니다.
추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!