소개
Fetch API는 웹 애플리케이션이 서버와 상호 작용하고 네트워크를 통해 콘텐츠를 검색하는 방식의 주요 발전을 나타냅니다. XHR(XMLHttpRequest)에 대한 최신 대안으로 도입된 Fetch API는 개발자에게 더 강력한 성능, 유연성 및 단순성을 제공합니다. 최신 브라우저와의 통합을 통해 Fetch는 최신 웹 애플리케이션을 구축하는 데 중요한 도구가 되었으며 비동기 작업을 보다 자연스럽고 효율적으로 처리할 수 있게 되었습니다.

Fetch API란 무엇인가요?
Fetch API는 HTTP 요청 전송 및 네트워크 응답 처리를 단순화하는 JavaScript 인터페이스입니다. 복잡하고 투박한 구문으로 악명 높았던 이전 XMLHttpRequest와 달리 Fetch는 JavaScript의 Promise API와 원활하게 통합되는 간소화된 인터페이스를 제공합니다. 이러한 통합을 통해 비동기 작업 관리가 더 쉬워질 뿐만 아니라 코드 가독성과 유지 관리성이 향상되어 코드베이스가 더 깔끔하고 관리하기 쉬워집니다.

기본적으로 Fetch는 네트워크 요청을 보내는 최신 브라우저에서 사용할 수 있는 전역 함수인 fetch() 함수를 중심으로 구축되었습니다. 이 함수는 Response 객체로 해석되는 Promise를 반환하여 개발자가 응답 데이터, 헤더 및 상태에 쉽게 액세스할 수 있도록 합니다. 이를 통해 네트워크 요청 결과를 보다 직관적이고 체계적으로 처리할 수 있습니다. (자세히 보기)

기본 구문
Fetch API는 간단하면서도 강력하게 설계된 fetch() 함수를 중심으로 진행됩니다. 이 함수는 네트워크 요청을 시작하는 데 사용되며 두 가지 기본 인수와 함께 제공됩니다:

• URL: 가져오려는 리소스의 URL 문자열입니다.
• 옵션(선택 사항): HTTP 메서드, 헤더, 본문 콘텐츠, 모드 등 요청에 대한 다양한 설정이나 구성이 포함된 개체입니다.

간단한 가져오기 호출의 구조
기본 가져오기 호출은 간단하며 다음과 같습니다.

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• url은 가져올 리소스의 주소입니다.
• then() 메소드는 Fetch API에 의해 해결된 Promise를 처리하여 Response 객체를 제공합니다.
• catch() 메소드는 요청 중에 발생할 수 있는 모든 오류를 처리합니다.

기본 가져오기 요청의 예

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

이 예에서는 성공 시 콘솔에 응답이 기록되고 오류가 정상적으로 처리되는 간단한 가져오기 요청이 수행되는 방법을 보여줍니다.

가져오기를 사용하는 이유는 무엇인가요?

가져오기 사용의 장점

Promises: Fetch의 가장 중요한 장점 중 하나는 Promise를 사용한다는 것입니다. Promise는 XHR의 콜백 기반 접근 방식에 비해 비동기 작업을 처리하는 더 깔끔하고 관리하기 쉬운 방법을 제공합니다. Promise를 사용하면 성공적인 응답을 처리하기 위한 .then() 메서드와 오류 관리를 위한 .catch() 메서드를 연결하여 더 읽기 쉽고 디버그하기 쉬운 코드를 만들 수 있습니다.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

또한 Fetch API는 async/await 구문과 완벽하게 결합되어 비동기 코드를 더욱 간단하게 만듭니다.

async/await 사용 예:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

깔끔한 구문: Fetch는 XHR에 비해 현대적이고 덜 장황한 구문을 제공합니다. fetch()에 전달된 구성 개체를 사용하면 HTTP 메서드, 헤더, 본문 콘텐츠와 같은 요청 매개변수를 쉽게 설정할 수 있어 코드가 더 깔끔하고 유지 관리하기 쉬워집니다.(전체 기사 읽기

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는 응답 스트리밍을 지원하므로 개발자는 대량의 데이터를 보다 효율적으로 처리할 수 있습니다. XHR은 큰 응답으로 인해 성능 문제가 발생하거나 청크 처리를 위한 추가 처리가 필요할 수 있지만 Fetch의 Response 객체는 청크에서 데이터를 읽는 .body.getReader()와 같은 메서드를 제공합니다. 이는 대규모 데이터 세트를 스트리밍하고 관리하는 데 특히 유용합니다.

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

전체 기사 읽기- 여기를 클릭하세요

결론
Fetch API는 개발자가 웹 애플리케이션에서 네트워크 요청을 수행하는 방식에 혁명을 일으켰습니다. 더욱 깔끔한 구문, Promise와의 원활한 통합, async/await 및 스트리밍과 같은 최신 기능 지원을 통해 Fetch는 HTTP 요청 처리를 위한 강력하고 유연한 도구를 제공합니다. 웹 개발이 계속 발전함에 따라 Fetch API는 효율적이고 유지 관리가 가능하며 현대적인 웹 애플리케이션을 구축하는 데 중요한 구성 요소로 남을 것입니다.