[250920] TIL

Today I Learned (2025-09-20)

• HTTP 요청 보내는 도구 (Axios, Fetch, Ky)

• Fetch 기반 경량 HTTP 클라이언트, 내부적으로 Fetch 사용함 + 체이닝 API

• 네트워크 오류 발생 시 자동으로 재요청을 시도하여 안정성을 높인다.
• 타임아웃 기능 내장되어 있어,응답이 지연될 경우 일정 시간 후 요청을 중단할 수 있다.
• 번들 크기가 작기 때문에 초기 로딩 속도를 향상시킬 수 있다.

단점

• HTTP 오류 상태코드를 자동으로 reject 하지 않는다. 따라서 Fetch API 기반인 ky도 HTTP Error 클래스를 사용하여 에러 처리를 해야한다.
  • 네트워크 단에서 실패만 reject하고 404, 500 같은 상태코드는 성공으로 처리함

async function fetchUser() {
  try {
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/invalid-url"
    );

    // 네트워크는 성공했지만, 상태 코드 확인 필요
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    console.log("유저 정보:", data);
  } catch (error) {
    console.error("에러 발생:", error.message);
  }
}

fetchUser();

import ky from "ky";

async function fetchUser() {
  try {
    // 존재하지 않는 엔드포인트 호출
    const data = await ky
      .get("https://jsonplaceholder.typicode.com/invalid-url")
      .json();
    console.log("유저 정보:", data);
  } catch (error) {
    if (error.name === "HTTPError") {
      // Ky는 HTTPError 클래스로 에러 던짐
      console.error("HTTP 에러 발생:", error.response.status);
    } else {
      console.error("기타 네트워크 에러:", error.message);
    }
  }
}

fetchUser();