JavaScript Fetch API

  • 2 minutes to read

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를 사용해야 합니다.
VisualAcademy Docs의 모든 콘텐츠, 이미지, 동영상의 저작권은 박용준에게 있습니다. 저작권법에 의해 보호를 받는 저작물이므로 무단 전재와 복제를 금합니다. 사이트의 콘텐츠를 복제하여 블로그, 웹사이트 등에 게시할 수 없습니다. 단, 링크와 SNS 공유, Youtube 동영상 공유는 허용합니다. www.VisualAcademy.com
박용준 강사의 모든 동영상 강의는 데브렉에서 독점으로 제공됩니다. www.devlec.com