자바스크립트 fetch 함수

fetch() 함수는 자바스크립트에서 제공하는 비동기 네트워크 요청 메서드로, 서버로부터 데이터를 받아오는 데 사용됩니다. fetch() 함수는 Promise를 반환하며, Response 객체를 resolve하는 새로운 Promise를 생성합니다.

 

사용법

 

fetch() 함수는 다음과 같은 문법을 가집니다.

 

fetch(url, options);

 

여기서 첫 번째 매개변수인 url은 요청을 보낼 서버의 주소를 의미하며, 두 번째 매개변수인 options은 옵션 객체입니다. 옵션 객체는 HTTP 요청에 대한 다양한 옵션을 설정할 수 있는데, method, headers, body 등이 있습니다.

 

fetch() 함수로 요청을 보내면, 응답으로 Response 객체가 반환됩니다. Response 객체는 HTTP 응답에 대한 정보를 가지고 있으며, ok, status, statusText, headers 등의 속성을 제공합니다. 또한, Response 객체는 json(), text() 등의 메서드를 제공하여, 응답 데이터를 쉽게 다룰 수 있습니다.

 

fetch() 함수는 기본적으로 CORS를 지원합니다. 즉, 다른 도메인에서 데이터를 가져올 수 있습니다. 그러나 서버에서 Access-Control-Allow-Origin 헤더를 설정해주어야 합니다.

 

fetch() 함수는 또한 async/await와 함께 사용할 수 있습니다. 이를 통해 코드의 가독성을 높이고, 비동기 처리를 더욱 간편하게 할 수 있습니다.

 

하지만, fetch() 함수는 오래된 브라우저에서는 지원되지 않을 수 있으므로, 이를 고려하여 polyfill을 사용하거나 대체 방법을 고려해야 합니다.