javascript fetch 사용 방법

Fetch API는 JavaScript에서 네트워크 요청을 처리하는 인터페이스로, 비동기적으로 요청을 보내고 응답을 처리하는 방식으로 동작합니다.

Fetch API를 사용하면 XMLHttpRequest 객체와 같이 브라우저 내장 API를 사용하여 데이터를 요청할 수 있습니다. 하지만, Fetch API는 XMLHttpRequest 객체보다 더 직관적이고 유연한 문법을 제공하며, Promise 기반의 비동기 처리를 간편하게 구현할 수 있습니다.

간단한 예제로 Fetch API를 사용하여 네트워크 요청을 보내는 방법을 살펴보겠습니다.

 

fetch(url[, options])

 

url: 가져올 데이터의 주소(URL)를 문자열 형태로 전달합니다.
options(선택 사항): 요청에 대한 추가 옵션을 객체 형태로 전달합니다. 이 객체는 HTTP 요청에 대한 다양한 설정을 지정할 수 있습니다.

 

옵션 설명

fetch() 함수의 두 번째 인수로 옵션 객체를 전달하여 HTTP 요청에 대한 다양한 설정을 지정할 수 있습니다. fetch() 함수의 옵션 객체의 속성은 다음과 같습니다.

method: HTTP 요청의 메서드를 지정합니다. 기본값은 GET입니다. 다른 값으로는 POST, PUT, DELETE 등이 있습니다.

headers: HTTP 요청에 포함될 헤더 정보를 객체 형태로 지정합니다.

body: HTTP 요청에 포함될 데이터를 지정합니다. 이 속성은 POST나 PUT 메서드를 사용할 때 자주 사용됩니다.

mode: CORS 요청에서 사용되는 요청 모드를 지정합니다. 기본값은 "cors"입니다. 다른 값으로는 "same-origin"이나 "no-cors" 등이 있습니다.

credentials: 요청에 사용되는 인증 정보를 지정합니다. 기본값은 "same-origin"입니다. 다른 값으로는 "include"나 "omit" 등이 있습니다.

cache: 캐시 옵션을 지정합니다. 기본값은 "default"입니다. 다른 값으로는 "no-cache", "reload", "force-cache" 등이 있습니다.

redirect: HTTP 요청의 리디렉션 처리 방법을 지정합니다. 기본값은 "follow"입니다. 다른 값으로는 "manual"이나 "error" 등이 있습니다.

referrer: HTTP 요청의 referrer 정보를 지정합니다. 기본값은 "no-referrer"입니다. 다른 값으로는 "referrer", "unsafe-url" 등이 있습니다.

referrerPolicy: referrer 처리 방식을 지정합니다. 기본값은 "no-referrer-when-downgrade"입니다. 다른 값으로는 "no-referrer", "origin", "origin-when-cross-origin" 등이 있습니다.

integrity: 서버에서 전송된 리소스의 무결성 검사를 위한 무결성 값(integrity value)을 지정합니다.

 

 

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

위의 코드에서 fetch() 메소드는 요청을 보내고, 반환되는 Promise를 처리합니다. 이후, response.json() 메소드를 사용하여 응답 데이터를 JSON 형식으로 변환하고, 이를 콘솔에 출력합니다. 오류가 발생하면 catch() 메소드가 실행되어 오류를 처리합니다.

Fetch API는 다양한 HTTP 메소드를 지원하며, 이를 사용하여 서버에 데이터를 전송하거나 리소스를 수정/삭제하는 등의 작업을 수행할 수 있습니다. 이를 위해서는 fetch() 메소드의 두 번째 인자로 객체를 전달하여 HTTP 메소드와 요청 데이터 등을 설정해주어야 합니다.

 

 

 

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // HTTP 메소드
  body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }), // 전송할 데이터
  headers: {
    'Content-type': 'application/json; charset=UTF-8', // 요청 헤더 설정
  },
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

 

위의 코드에서 method 속성으로 POST 메소드를 설정하고, 전송할 데이터는 body 속성에 JSON 문자열로 전달합니다. 이때 요청 헤더를 설정하기 위해 headers 속성에 객체를 전달하며, Content-type 헤더를 설정하여 전송할 데이터의 MIME 타입을 지정합니다.

Fetch API는 브라우저에서 내장되어 있으므로 별도의 라이브러리를 다운로드하거나 설치할 필요가 없습니다. 또한, 다양한 데이터 형식을 처리할 수 있어 JSON, Blob, ArrayBuffer, FormData 등을 지원합니다.

하지만 Fetch API는 오래된 브라우저에서는 지원되지 않을 수 있으므로, 폴리필(polyfill)을 사용하여 이를 보완해야 할 수도 있습니다. 또한, CORS(Cross-Origin Resource Sharing) 정책으로 인해 다른 도메인에 대한 요청을 보낼 때 추가 설정이 필요합니다.

 

 

Fetch API의 장점은 다음과 같습니다.

1. 직관적인 문법: XMLHttpRequest 객체보다 더 직관적이고 유연한 문법을 제공합니다.

2. Promise 기반의 비동기 처리: Promise 기반으로 작성되어 비동기 처리를 간편하게 구현할 수 있습니다.

3. 다양한 데이터 형식 지원: 다양한 데이터 형식을 처리할 수 있어 JSON, Blob, ArrayBuffer, FormData 등을 지원합니다.

4. 내장되어 있음: 브라우저에서 내장되어 있어 별도의 라이브러리를 다운로드하거나 설치할 필요가 없습니다.

 

하지만 Fetch API의 단점도 있습니다.

1. 오래된 브라우저에서 지원하지 않을 수 있음: 오래된 브라우저에서는 지원되지 않을 수 있으므로, 폴리필을 사용하여 이를 보완해야 할 수도 있습니다.

2. CORS 정책 추가 설정 필요: 다른 도메인에 대한 요청을 보낼 때 추가 설정이 필요합니다.

3. 오류 처리 방식 제한: catch() 메소드를 사용하여 오류를 처리할 수 있지만, 오류가 발생한 상태 코드를 확인하기 위해서는 추가적인 작업이 필요합니다.

이와 같은 장단점을 고려하여 프로젝트의 요구사항에 맞게 적절히 사용하면 됩니다.