[JavaScript] Fetch API

Intro

Fetch API

Fetch API는 네트워크 요청을 보내고 데이터를 가져오는 인터페이스이며, 기존의 XMLHttpRequest보다 간결하고 강력한 비동기 요청 방식이다.

특징

• Promise 기반으로 비동기를 더 쉽게 다룬다.(응답값으로 Promise 객체를 반환)
• Http 기본 요청 방식은 GET이며, 두번 째 인자값 안에서 method 속성을 통해 다른 메서드를 사용할 수 있다.
• 응답 객체의 body는 ReadableStream 형태이므로, 본문을 확인하기 위해서는 JSON형태로 변환해야한다.

기본 문법  및 사용 예시

fetch(url, options)
  .then(response => response.json()) // JSON 변환
  .then(data => console.log("응답 데이터 :", data))
  .catch(error => console.error("에러 발생 :", error));

GET  메서드

fetch("요청할 URL") // 테스트 용으로 https://jsonplaceholder.typicode.com/posts/1 사용
  .then((response) => {
    console.log("응답 객체 : ", response);
    retrun response.json()
  })
  .then((data) => console.log("응답 값 : ", data))
  .catch((error) => console.log("응답 실패 : ", error));

/* 출력
응답 객체 : Response {
    type: "cors",
  url: "https://jsonplaceholder.typicode.com/posts/1",
  redirected: false,
  status: 200,
  ok: true,
  statusText: "OK",
  headers: Headers, // 응답 헤더 정보
  body: ReadableStream, // 응답 본문 (스트림)
  bodyUsed: false
}
응답 값 : {
  userId: 1,
  id: 1,
  title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  body: "quia et suscipit..."
}
*/

POST 메서드

fetch("요청할 URL", { // 테스트용으로 https://jsonplaceholder.typicode.com/posts 사용
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    userId: 1,
    title: "새로운 글",
    body: "내용"
  })
})
  .then(response => {
    console.log("응답 객체:", response);
    return response.json();
  })
  .then(data => console.log("응답 데이터:", data))
  .catch(error => console.error("에러 발생:", error));

/* 출력
응답 객체: Response {
  type: "cors",
  url: "https://jsonplaceholder.typicode.com/posts",
  redirected: false,
  status: 201,
  ok: true,
  statusText: "Created",
  headers: Headers,
  body: ReadableStream,
  bodyUsed: false
}

응답 데이터: {
  id: 101,
  title: "새로운 글",
  body: "내용",
  userId: 1
}
*/

Response(응답) 객체의 속성과 메서드

주요 속성

 

• .ok : 응답 성공 여부 (200~299 범위의 응답 코드일 경우 true)
• .status : HTTP 상태 코드 (예: 200, 404, 500)
• .statusText : 상태 코드에 해당하는 메시지 (OK, Not Found 등)
• .headers : 응답 헤더 (Headers 객체)
• .body : 응답 본문을 ReadableStream 형태로 제공
• .type : 응답 유형 ("basic", "cors", "default", "error", "opaque", "opaqueredirect")

응답 처리 메서드

응답 처리 메서드는 한 번만 사용할 수 있으며, 다른 메서드로 다시 읽을 수 없다!!!

• .json() : 응답을 JSON으로 변환
• .text() : 응답을 텍스트로 변환
• .blob() : 응답을 바이너리 데이터(이미지, 파일)로 변환
• .arrayBuffer() : 응답을 ArrayBuffer 형식으로 변환
• .formData() : 응답을 FormData 객체로 변환

 

XMLHttpRequest(XHR) 와의 차이

XMLHttpRequest(XHR)

XMLHttpRequest(XHR)는 비동기 HTTP 요청을 보내는 API로, AJAX의 핵심 기술이지만, 콜백(callback) 기반이어서 가독성이 떨어지고 유지보수가 어려운 문제가 있다.

XHR 코드 예시

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("데이터 :", JSON.parse(xhr.responseText));
  } else if (xhr.readyState === 4) {
    console.error("에러 발생 :", xhr.status);
  }
};

xhr.send();

Fetch API vs XHR 비교

비교 항목	Promise 기반	XMLHttpRequest(XHR)
기반	Promise 기반	Callback 기반
코드 가독성	간결하고 직관적	콜백 중첩으로 복잡함
에러 처리	response.ok 체크 필요	HTTP 오류 포함한 응답 가능
응답 처리	.json(), .text(), .blob() 등 사용 가능	응답 데이터를 직접 처리해야 함
프로미스 지원	Yes	No
진행 상태 확인 (onprogress)	No	Yes
CORS 지원	기본 지원 (mode 설정 가능)	직접 설정 필요

---

마무리

만약 ajax가 나오지 않았더라면 만약 axios가 없었다면 만약 fetch 가 없었다면 XHR로 통신을 했을거고 난 그걸 배우고 사용해야했었겠지?... 오우야 코드 예시에 있는 것도 제대로 안읽히는데 현업에서 쓴다면....휴 선배 개발자들 덕분에 다행이다

 

[참고]

Velog - Fetch API 이제 그만 좀 찾아보자

Tistory - [Javascript] fetch() 함수로 원격 API 호출하기 - 네로개발일기

MDN - Fetch API 사용하기 문서

MDN - Fetch API 문서