Fetch API 전체 가이드

Fetch API 소개

Fetch API는 간단하고 유연한 방식으로 HTTP 요청을 수행할 수 있는 최신 기본 JavaScript API입니다. XMLHttpRequest와 같은 이전 기술에 대한 더 쉽고 깔끔한 대안을 제공합니다. Fetch는 약속 기반이므로 async/await 및 .then() 체이닝과 같은 최신 JavaScript 기능과 잘 작동합니다.

Fetch API는 간단한 요청과 복잡한 요청을 모두 처리하면서 RESTful API와 상호작용하는 이해하기 쉬운 방법을 제공합니다. 최신 브라우저에서 널리 지원되며 웹 개발에 사용되는 일반적인 도구입니다.

Fetch API의 주요 기능:

1. Promise 기반: Promise를 기반으로 구축되어 비동기 코드를 관리하는 쉽고 직관적인 방법을 제공합니다.
2. 모든 HTTP 메서드 지원: GET, POST, PUT, DELETE, PATCH 등
3. 콜백이 없는 지옥: Promise 덕분에 중첩된 콜백을 피할 수 있습니다.
4. 스트림 지원: Fetch는 스트림을 지원하므로 대용량 데이터를 효율적으로 처리하는 데 적합합니다.
5. 향상된 오류 처리: XMLHttpRequest와 달리 Fetch API는 HTTP 오류 상태(예: 404 또는 500)를 거부하지 않습니다. 수동으로 처리해야 합니다.

설치

Fetch API는 최신 웹 브라우저에 내장되어 있으므로 브라우저 환경에서 작업하는 경우 아무것도 설치할 필요가 없습니다. 기본적으로 사용 가능하며 HTTP 요청에 사용할 준비가 되어 있습니다.

그러나 Node.js 환경(기본적으로 가져오기가 지원되지 않는 환경)에서 작업하는 경우 node-fetch와 같은 폴리필을 설치할 수 있습니다.

1. npm 사용(Node.js 환경의 경우):

Node.js 환경에서 작업 중이고 Fetch를 사용해야 하는 경우 node-fetch를 설치할 수 있습니다.

npm install node-fetch

그런 다음 프로젝트로 가져옵니다.

const fetch = require('node-fetch');

Fetch API 사용

Fetch API는 HTTP 요청을 만드는 데 사용할 수 있는 전역 fetch() 함수를 제공합니다. 이 함수는 요청에 대한 응답을 나타내는 Response 객체로 해석되는 Promise를 반환합니다.

구문

fetch(url, [options])

매개변수

1. URL:

   • 유형: 문자열
   • 설명: 요청이 전송되는 URL입니다. 이는 전체 URL이거나 요청에 정의된 기본 URL을 기반으로 하는 상대 URL일 수 있습니다.

2. 옵션 (선택 사항):

   • 유형: 객체
   • 설명: 요청을 수정하기 위한 선택적 구성 개체입니다. 몇 가지 일반적인 옵션은 다음과 같습니다.
     • 메서드: HTTP 메서드(예: GET, POST, PUT, DELETE).
     • 헤더: 요청에 포함할 사용자 정의 헤더(예: 콘텐츠 유형, 승인)
     • body: 요청 본문(POST 또는 PUT과 같은 메서드에만 해당)
     • 모드: 교차 출처 요청을 제어합니다. (예: 'cors', 'no-cors', 'same-origin')
     • 캐시: 요청이 캐시와 상호 작용하는 방식을 지정합니다(예: 'no-store', 'reload').
     • credentials: 쿠키 및 인증(예: '동일 출처', '포함')을 제어합니다.

기본 가져오기 요청(GET)

Fetch API를 사용한 기본 GET 요청은 간단합니다. fetch() 함수는 제공된 URL에 요청을 보내고 Response 객체로 해결되는 Promise를 반환합니다.

예제 코드:

다음은 Fetch API를 사용한 간단한 GET 요청의 예입니다.

npm install node-fetch

설명:

• fetch()는 주어진 URL에 대한 요청을 시작합니다.
• .then(response => response.json()): JSON 데이터를 파싱하여 Response 객체를 JavaScript 객체로 변환합니다.
• .catch(): 네트워크 오류나 실패한 요청 등의 오류를 포착하고 기록합니다.

가져오기로 POST 요청하기

Fetch API를 사용하면 POST 요청도 할 수 있습니다. POST 요청은 일반적으로 양식 제출이나 새 리소스 생성과 같이 서버에 데이터를 보내는 데 사용됩니다.

POST 요청 구문:

const fetch = require('node-fetch');

예제 코드:

다음은 서버에 데이터를 보내는 POST 요청의 예입니다.

fetch(url, [options])

설명:

• 메서드: 'POST': POST 요청임을 지정합니다.
• body: JSON.stringify(postData): 요청 본문으로 보내기 전에 데이터를 JSON 문자열로 변환합니다.
• 헤더: Content-Type 헤더를 application/json으로 설정하여 전송되는 데이터가 JSON 형식임을 나타냅니다.

응답 데이터 처리

Fetch API에서 반환된 응답 개체에는 응답 데이터와 상호작용하기 위한 여러 속성과 메서드가 포함되어 있습니다.

주요 속성 및 대응 방법:

1. response.json(): 응답 본문을 JSON으로 구문 분석합니다.
2. response.text(): 응답 본문을 문자열로 구문 분석합니다.
3. response.blob(): 응답을 바이너리 대형 객체로 구문 분석합니다(이미지나 파일을 처리하는 데 유용함).
4. response.ok: 응답 상태 코드가 200-299(성공) 범위에 있는지 여부를 나타내는 부울입니다.
5. response.status: 응답의 HTTP 상태 코드입니다(예: 성공의 경우 200, 찾을 수 없는 경우 404).
6. response.headers: 요청에 대한 응답으로 서버에서 반환한 헤더입니다.

예제 코드:

다음은 다양한 유형의 응답 데이터를 처리하는 방법에 대한 예입니다.

npm install node-fetch

설명:

• response.ok는 응답이 성공했는지 확인합니다(상태 코드 200-299). 그렇지 않으면 오류가 발생합니다.
• response.json()은 응답을 JavaScript 객체로 구문 분석하기 위해 호출됩니다.

가져오기 오류 처리

XMLHttpRequest와 달리 Fetch API는 HTTP 오류 상태(예: 404 또는 500)를 자동으로 거부하지 않습니다. 네트워크 장애가 있거나 요청이 차단된 경우에만 거부됩니다. 404 또는 500과 같은 오류를 처리하려면 response.ok 속성을 확인해야 합니다.

오류 처리 예:

Fetch에서 오류를 효과적으로 처리하는 방법의 예는 다음과 같습니다.

const fetch = require('node-fetch');

설명:

• response.ok: 응답 상태 코드가 200–299 범위(성공을 나타냄)에 있는지 확인합니다.
• 요청이 실패하면(예: 404 또는 500 오류) 해당 상태 코드와 함께 오류가 발생합니다.

결론

Fetch API는 JavaScript로 HTTP 요청을 만들기 위한 강력하고 현대적인 도구입니다. REST API를 사용하여 작업하는 깔끔하고 직관적인 방법을 제공하며, 약속 기반 아키텍처를 통해 비동기 코드를 쉽게 관리할 수 있습니다. 모든 HTTP 메소드, 오류 처리 및 응답 구문 분석을 지원하는 Fetch는 웹 개발자에게 필수적인 도구입니다.

데이터 가져오기, 양식 제출, 인증 처리 등 Fetch API는 HTTP 요청에 대한 유연성과 제어 기능을 제공하므로 최신 웹 애플리케이션에 탁월한 선택입니다.

위 내용은 Fetch API 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!