자바스크립트 Fetch API

Fetch API는 네트워크를 통한 리소스 가져오기 인터페이스를 제공하고, 이전의 'XMLHttpRequest' 방식을 대체하는 현대적인 방법이다.

 

Fetch API의 주요 특징

1. Promise 지원 : Fetch는 프로미스를 기반으로 구축되어 비동기 코드를 더 깔끔하고 읽기 쉽게 작성할 수 있다.
2. 요청과 응답 객체 : HTTP 요청과 응답을 각각 'Request'와 'Response' 객체로 캡슐화한다.
3. CORS 지원 : Cross-Origin Resource Sharing(CORS)을 지원하여 도메인 간 요청을 쉽게 처리할 수 있다.
4. 스트리밍 : 대용량 데이터를 효율적으로 처리할 수 있는 스트리밍을 지원한다.

 

Fetch API 기본 문법

Fetch API는 'fetch()' 함수를 사용하여 HTTP 요청을 수행한다.

 

옵션으로 'method' , 'body' , 'headers' 등의 속성을 지정할 수 있다.

'fetch()' 함수의 요청에 대한 응답은 Promise로 반환되며 비동기 데이터 처리를 위해 'then()' 을 사용하고 에러 처리를 위해서는 'catch()' 함수를 사용한다.

 

 

GET 방식 요청

'fetch(url)' 메서드는 응답을 포함하는 프로미스를 반환합니다. 응답의 JSON 본문을 읽기 위해서는 'json()' 메서드를 사용합니다.

 

 

POST 방식 요청

POST 방식의 요청은 첫 번째 인수로 URL 주소를, 두 번째 인수로 요청에 대한 설정 객체를 받습니다.

이 설정 객체에는 'method' , 'headers' , 'body' 속성이 포함될 수 있씁니다. POST 요청은 데이터를 추가하는 데 사용되며 'body' 속성에 JSON 문자열 형태로 데이터를 포함합니다.

 

추가 주의사항

 

에러처리 : 네트워크 오류 뿐만 아니라 HTTP 응답 상태 코드도 체크해야 합니다. 'response.ok' 속성을 사용하여 성공적인 응답을 확인할 수 있습니다.

 

CORS 설정 : 서버 측에서 CORS 설정이 필요할 수 있습니다. 클라이언트 요청에서 CORS 정책을 준수하려면 서버에서 적절한 헤더를 설정해야한다.