JavaScript Fetch API

• 4/13/2023
• 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를 사용해야 합니다.