fetch

JavaScript에서 제공하는 API 중 하나로, 네트워크 요청을 만들고 응답을 다룰 수 있게 해주는 기능을 제공합니다. fetch API는 Promise를 기반으로 동작하며, 비동기적으로 네트워크 요청을 처리할 수 있습니다.

	브라우저	node
실행 여부

fetch() 는 자바스크립트의 브라우저 내장 함수로, 네트워크에서 리소스를 가져오는 동작을 간결하게 표현합니다. fetch() 함수는:

•

첫 번째 인자로 URL을 받습니다.

•

두 번째 인자로 옵션 객체를 받습니다.

•

Promise 타입의 객체를 반환합니다.

반환된 객체는:

•

API 호출이 성공했을 경우에는 응답(response) 객체를 resolve합니다.

•

실패했을 경우에는 예외(error) 객체를 reject합니다.

fetch() 함수는:

•

HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공합니다.

•

네트워크의 리소스를 쉽게 비동기적으로 취득할 수 있습니다.

fetch API의 기본 구조

fetch(input, init)
  .then(response => {
    // 응답 처리
    return response.json(); // JSON 형식으로 파싱된 데이터 반환
  })
  .then(data => {
    // 파싱된 데이터 처리
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Request failed:', error);
  });
JavaScript
복사

fetch API의 주요 매개변수:

매개변수	설명
url	요청을 보낼 URL
options	요청의 옵션 객체 (메소드, 헤더, 본문 등)

input:

•

요청을 보낼 URL이나 Request 객체입니다.

init (optional):

•

초기 설정 객체로, 요청에 대한 다양한 옵션을 설정할 수 있습니다.

•

메서드(method): GET, POST 등 HTTP 메서드 설정

•

헤더(headers): 요청 헤더 설정

•

바디(body): 요청 본문 설정

fetch API의 반환값:

fetch 함수는 Promise를 반환합니다. 이 Promise는 네트워크 요청에 대한 응답(Response)을 나타내는 Response 객체를 resolve하거나, 요청이 실패할 경우 reject합니다.

fetch API의 주요 메서드:

메소드	설명
fetch(input, init)	네트워크 요청을 시작하고 Promise를 반환합니다. input은 요청 URL 또는 Request 객체일 수 있으며, init은 초기 설정 객체입니다.
clone()	Response나 Request 객체를 복제합니다.
arrayBuffer()	Response를 ArrayBuffer로 변환하고 Promise를 반환합니다.
blob()	Response를 Blob로 변환하고 Promise를 반환합니다.
json()	Response를 JSON으로 파싱하고 Promise를 반환합니다.
text()	Response를 텍스트로 변환하고 Promise를 반환합니다.
formData()	Response를 FormData로 변환하고 Promise를 반환합니다.

예시 코드

•

GET 요청

// fetch를 사용하여 GET 요청 보내기
fetch('https://httpbin.org/get')
  .then(response => {
    // 서버 응답을 JSON 형식으로 파싱
    return response.json();
  })
  .then(data => {
    // 파싱된 데이터 출력
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Request failed:', error);
  });
JavaScript
복사

•

POST 요청

// fetch를 사용하여 POST 요청 보내기
const url = 'https://httpbin.org/post'          // URL 경로
const data = { name : 'joeun', age : 20 }       // 데이터 (객체)
// 옵션 객체 (method, headers, body)
// - method     : 요청 메소드 (GET, POST, PUT, DELETE)
// - headers    : 요청 헤더 객체
// - body       : 요청 본문 (data)
const init = {
    method  : 'POST',
    headers : {
        'Content-Type' : 'application/json'
    },
    body    : JSON.stringify(data)
}

fetch(url, init)
    .then(response => {
        // 서버 응답을 JSON 형식으로 파싱
        return response.json();
    })
    .then(data => {
        // 파싱된 데이터 출력
        console.log(data);
    })
    .catch(error => {
        // 오류 처리
        console.error('Request failed:', error);
    });
JavaScript
복사