[JavaScript] Fetch API

 

 

 

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

Fetch API 사용하기 - Web API | MDN

 

fetch API 란?

 

• JavaScript에서 네트워크 요청을 수행하기 위해 사용하는 API
• 직관적이고 사용하기 쉬움
• 비동기적으로 HTTP 요청을 보냄

 

주요 특징

 

1. Promise 기반

• fetch는 Promise를 반환하기 때문에 비동기 처리를 할 때 'then', 'catch' 메서드 사용, async/await 구문 사용
• 코드 가독성 증가, 복잡한 비동기 처리를 더 쉽게 할 수 있음

2. 직관적인 API

• 첫번째로 인자로 요청할 URL 전달, 두번째 인자로 요청의 설정을 객체로 전달

3. 응답 처리

• fetch가 반환하는 Promise는 Response 객체를 반환
• Response 객체에는 응답 상태, 헤더, 그리고 본문을 포함한 정보가 담겨있음
• 응답본문은 json(), text(), blob() 등의 메서드를 사용해 원하는 형식으로 변환 가능

 

기본 사용법

 

// 간단한 GET 요청
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json(); // JSON 형식으로 응답 본문을 파싱
  })
  .then(data => {
    console.log(data); // 데이터를 처리
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

 

 

POST 요청

 

// POST 요청 예시
fetch('https://api.example.com/data', {
  method: 'POST', // 요청 방법
  headers: {
    'Content-Type': 'application/json' // 요청 헤더 설정
  },
  body: JSON.stringify({ // 요청 바디
    name: 'John Doe',
    age: 30
  })
})
  .then(response => response.json()) // 응답을 JSON으로 변환
  .then(data => console.log(data)) // 데이터를 처리
  .catch(error => console.error('Error:', error)); // 에러 처리

 

 

주요 메서드와 프로퍼티

 

• response.ok : 응답의 성공 여부를 나타내는 Boolean 값
• response.status : HTTP 상태 코드 반환
• response.json() : 응답 본문에 JSON 형식으로 파싱
• response.text() : 응답 본문을 텍스트 형식으로 반환
• response.blob() : 응답 본문을 Blob 객체로 반환

 

장점

 

• 직관적이고 가독성이 좋음
• 설정과 사용이 간단함
• 다양한 옵션을 지원함

 

단점

• CORS 제한