JavaScript에서 HTTP 요청을 처리할 때 Axios 및 Fetch가 오랫동안 인기 있는 도구였습니다. 하지만 개발자가 고려해야 할 강력하고 현대적인 대안이 있습니다. —  Ky. 가볍고 고급 기능이 가득한 Ky를 사용하면 HTTP 요청을 더 쉽고 효율적으로 처리할 수 있습니다. 이 글에서는 Axios 및 Fetch API와 직접 비교하여 Ky

1. Ky, Axios 및 Fetch API 개요

액시오스

Axios는 인기 있는 JavaScript용 약속 기반 HTTP 클라이언트입니다. 자동 JSON 구문 분석, 요청 인터셉터 및 사용자 정의 시간 초과와 같은 기능을 제공하여 HTTP 요청을 단순화합니다. 그러나 특히 경량 애플리케이션의 경우 파일 크기가 단점이 될 수 있습니다.

가져오기 API

가져오기는 HTTP 요청을 만들기 위한 내장 브라우저 API입니다. 널리 사용되지만 Fetch에는 몇 가지 제한 사항이 있습니다. 기본 오류 처리나 내장된 재시도 기능이 포함되어 있지 않아 개발자가 기본 기능에 대해서도 추가 코드를 작성해야 합니다.

키

Ky는 Axios 및 Fetch에 대한 경량(157KB) 대안으로, Fetch를 기반으로 구축되었지만 기능이 더 풍부한 API를 제공합니다. 내장된 재시도, 단순화된 오류 처리, 사용자 정의 가능한 요청 후크를 통해 Ky는 단순성과 강력함 사이의 균형을 유지합니다.

Ky를 선택하는 이유는 무엇입니까?

• 경량 : 크기가 157~KB에 불과하여 성능에 민감한 애플리케이션에 이상적입니다.
• 현대 : Fetch API를 기반으로 구축되었지만 더 나은 기본값이 있습니다.
• 재시도 지원 : 실패한 요청에 대해 자동으로 재시도합니다.
• 후크 : beforeRequest 및 afterResponse 후크를 사용하여 요청과 응답을 쉽게 조작할 수 있습니다.

2. Ky가 더 나은 이유: 주요 특징 및 장점

가볍고 성능이 뛰어남

Ky는 성능과 번들 크기가 중요한 애플리케이션에 탁월한 선택입니다. 가볍음에도 불구하고 Ky는 재시도 및 오류 처리와 같은 필수 기능을 희생하지 않습니다.

간단한 API, 강력한 기능

Ky의 구문은 Fetch만큼 간단하지만 더 많은 내장 기능을 제공합니다. 예를 들어 Ky로 GET 요청을 하는 것은 다음과 같이 쉽습니다:

import ky from 'ky';
const data = await ky.get('https://api.example.com/data').json();

이것이 Fetch보다 나은 이유는 무엇입니까?

• 자동 JSON 구문 분석 : 응답을 수동으로 구문 분석할 필요가 없습니다.
• 오류 처리 : Ky는 404 또는 500과 같은 HTTP 코드에 대해 의미 있는 오류를 발생시킵니다.
• 재시도 : 자동으로 실패하는 Fetch와 달리 Ky는 실패한 요청을 자동으로 재시도합니다.

내장된 재시도

Ky에는 신뢰할 수 없는 네트워크 상태를 처리하는 데 중요한 기능인 재시도 지원이 내장되어 있습니다. Axios는 재시도 기능도 제공하지만 추가 플러그인을 사용하거나 직접 구성해야 합니다. 대조적으로 Ky는 기본적으로 구성 없이 이 기능을 제공합니다.

await ky.get('https://api.example.com/data', { retry: 2 });

이 예시에서 Ky는 실패할 경우 추가 설정 없이 요청을 최대 2번까지 재시도합니다.

3. beforeRequest 및 afterResponse: Ky에서 후크의 힘

Ky의 가장 매력적인 기능 중 하나는 후크 시스템, 특히 beforeRequest 및 afterResponse입니다. 이러한 후크를 사용하면 Axios가 종종 요구하는 외부 미들웨어 없이도 HTTP 요청 및 응답을 완벽하게 제어할 수 있습니다.

beforeRequest 후크: 쉽게 요청 강화

Ky를 사용하면 beforeRequest 후크를 사용하여 나가는 요청을 쉽게 수정할 수 있습니다. 인증 토큰을 추가해야 하거나 헤더를 수정해야 하는 경우 beforeRequest를 사용하면 수월해집니다.

예 : 모든 요청에 ​​인증 토큰을 추가합니다.

ky.extend({
  hooks: {
    beforeRequest: [
      request => {
        const token = localStorage.getItem('authToken');
        request.headers.set('Authorization', `Bearer ${token}`);
      }
    ]
  }
});

이렇게 하면 반복적인 코드가 줄어들어 전역적으로 인증을 더 쉽게 처리할 수 있습니다.

afterResponse Hook: 응답 처리 단순화

afterResponse 후크를 사용하면 전체 애플리케이션에서 응답을 조작할 수 있습니다. 이 후크는 만료된 토큰 새로 고침과 같은 특정 상태 코드에 대한 재시도를 처리하는 데 특히 유용합니다.

예 : 401 무단 응답 시 만료된 토큰을 자동으로 새로 고칩니다.

ky.extend({
  hooks: {
    afterResponse: [
      async (request, options, response) => {
        if (response.status === 401) {
          const newToken = await refreshAuthToken();
          request.headers.set('Authorization', `Bearer ${newToken}`);
          return ky(request);
        }
      }
    ]
  }
});

이 설정을 사용하면 애플리케이션 전체에 논리를 복제하지 않고도 토큰을 원활하게 새로 고칠 수 있습니다.

4. 오류 처리: Ky vs Axios vs Fetch API

액시오스

Axios는 인터셉터를 통해 적절한 오류 처리 기능을 제공하지만 Ky가 기본적으로 제공하는 단순성은 부족합니다. Axios에는 재시도 및 오류 상태 코드 처리를 위한 사용자 정의 논리가 필요한 경우가 많습니다.

가져오기 API

Fetch의 오류 처리는 기본적으로 제한되어 있습니다. 404 또는 500과 같은 HTTP 상태 코드에 대해 오류가 발생하지 않으므로 개발자가 수동으로 응답 상태를 확인해야 합니다.

키

Ky는 오류 처리에 탁월합니다. 2xx가 아닌 HTTP 응답에 대해 자동으로 오류를 발생시키고 추가 코드 없이 실패한 요청에 대한 재시도 기능을 제공합니다. 이는 Ky를 오류를 우아하게 처리하기 위한 강력한 솔루션으로 만듭니다.

try {
  const data = await ky.get('https://api.example.com/data').json();
} catch (error) {
  console.error('Request failed:', error);
}

Ky는 전체 요청을 약속으로 래핑하여 응답 상태 코드가 실패를 나타내면 자동으로 오류를 발생시켜 디버깅을 단순화합니다.

5. 실제 사례: Ky 실행

Ky의 단순성과 강력함을 보여주는 몇 가지 실제 사례를 통해 Ky를 테스트해 보겠습니다.

예 1: GET 요청 만들기

const response = await ky.get('https://api.example.com/items').json();
console.log(response);

Ky는 자동으로 JSON 구문 분석을 처리하고 Fetch에서는 발생하지 않는 2xx가 아닌 상태 코드에 대해 오류를 발생시킵니다.

예 2: 재시도가 포함된 POST 요청

const response = await ky.post('https://api.example.com/create', {
  json: { name: 'Ky' },
  retry: 3
}).json();
console.log(response);

Ky는 POST 요청이 실패할 경우 최대 3번까지 재시도하여 추가 구성 없이 Fetch 또는 Axios보다 더 나은 안정성을 제공합니다.

6. 결론: Ky는 스위치를 사용할 가치가 있나요?

JavaScript로 HTTP 요청을 만들기 위한 현대적 , 경량 및 기능이 가득한 솔루션을 찾고 있다면 Ky 탁월한 선택입니다. Axios와 Fetch가 여전히 널리 사용되고 있지만 Ky는 자동 재시도, 요청 및 응답 사용자 정의를 위한 후크, 더 나은 기본 오류 처리와 같은 주요 이점을 제공합니다.

HTTP 요청보다 단순성, 성능, 제어를 우선시하는 개발자에게 Ky는 JavaScript 프로젝트의 기본 도구로 고려할 가치가 있습니다.

더 많은 예시와 자세한 API 정보를 보려면 https://www.npmjs.com/package/ky를 방문하세요.