Why Ky is the Best Alternative to Axios and Fetch for Modern HTTP Requests

When it comes to handling HTTP requests in JavaScript, Axios and Fetch have long been the go-to tools. However, there's a powerful, modern alternative that developers should consider — Ky. Lightweight and packed with advanced features, Ky makes handling HTTP requests easier and more efficient. In this article, we'll break down why Ky stands out, with direct comparisons to Axios and Fetch API.

Table of Contents

1. Overview of Ky, Axios, and Fetch API
2. Why Ky is Better: Key Features and Advantages
3. beforeRequest and afterResponse: The Power of Hooks in Ky
4. Error Handling: Ky vs Axios vs Fetch API
5. Practical Examples: Ky in Action
6. Conclusion: Is Ky Worth the Switch?

1. Overview of Ky, Axios, and Fetch API

Axios

Axios is a popular, promise-based HTTP client for JavaScript. It simplifies HTTP requests by offering features like automatic JSON parsing, request interceptors, and custom timeouts. However, its file size can become a drawback, especially for lightweight applications.

Fetch API

Fetch is a built-in browser API for making HTTP requests. While widely used, Fetch has some limitations: it doesn't include default error handling or built-in retries, requiring developers to write additional code for even basic functionality.

Ky

Ky is a lightweight (1~ KB) alternative to Axios and Fetch, built on top of Fetch but offering a more feature-rich API. With built-in retries, simplified error handling, and customizable request hooks, Ky strikes a balance between simplicity and power.

Why Choose Ky?

• Lightweight: Just 1~ KB in size, ideal for performance-sensitive applications.
• Modern: Built on the Fetch API but with better defaults.
• Retry Support: Automatic retries on failed requests.
• Hooks: Easy manipulation of requests and responses with beforeRequest and afterResponse hooks.

2. Why Ky is Better: Key Features and Advantages

Lightweight and Performant

This makes Ky a great choice for applications where performance and bundle size are critical. Despite being lightweight, Ky doesn't sacrifice essential features like retries and error handling.

Simple API, Powerful Features

Ky's syntax is as straightforward as Fetch, yet it offers more built-in power. For example, making a GET request with Ky is as easy as:

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

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

Why is this better than Fetch?

• Automatic JSON parsing: No need to manually parse the response.
• Error handling: Ky throws meaningful errors for HTTP codes like 404 or 500.
• Retries: Ky automatically retries failed requests, unlike Fetch, which fails silently.

Built-in Retries

Ky comes with built-in retry support, a crucial feature for handling unreliable network conditions. Axios also offers retry functionality, but you need to use an additional plugin or configure it yourself. In contrast, Ky provides this feature by default with zero configuration.

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

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

In this example, Ky will retry the request up to 2 times in case of a failure, without any additional setup.

3. beforeRequest and afterResponse: The Power of Hooks in Ky

One of Ky's most compelling features is its hooks system, particularly beforeRequest and afterResponse. These hooks give you full control over your HTTP requests and responses without the need for external middleware, which Axios often requires.

beforeRequest Hook: Enhance Requests Easily

With Ky, you can easily modify outgoing requests using the beforeRequest hook. Whether you need to add authentication tokens or modify headers, beforeRequest makes it effortless.

Example: Adding an authorization token to every request.

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

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

This reduces repetitive code, making it easier to handle authentication globally.

afterResponse Hook: Simplify Response Handling

With the afterResponse hook, you can manipulate responses across your entire application. This hook is especially useful for handling retries on specific status codes, like refreshing expired tokens.

Example: Refreshing an expired token automatically on a 401 Unauthorized response.

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);
        }
      }
    ]
  }
});

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);
        }
      }
    ]
  }
});

With this setup, you can seamlessly refresh tokens without duplicating logic across your application.

4. Error Handling: Ky vs Axios vs Fetch API

Axios

Axios provides decent error handling via interceptors, but it lacks the simplicity that Ky offers out of the box. Axios often requires custom logic for retries and error status code handling.

Fetch API

Fetch's error handling is limited by default. It doesn't throw errors for HTTP status codes like 404 or 500, forcing developers to check response statuses manually.

Ky

Ky excels in error handling. It automatically throws errors for non-2xx HTTP responses and provides retry functionality for failed requests without needing additional code. This makes Ky a robust solution for handling errors elegantly.

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

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

Ky wraps the entire request in a promise, automatically throwing an error if the response status code indicates a failure, which simplifies debugging.

5. Practical Examples: Ky in Action

Let's put Ky to the test with a few practical examples that showcase its simplicity and power.

Example 1: Making a GET Request

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

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

Ky automatically handles JSON parsing and throws an error for any non-2xx status codes, which Fetch does not.

Example 2: POST Request with Retries

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

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

Ky retries the POST request up to 3 times if it fails, offering better reliability than Fetch or Axios without extra configuration.

6. Conclusion: Is Ky Worth the Switch?

If you're looking for a modern, lightweight, and feature-packed solution for making HTTP requests in JavaScript, Ky is an excellent choice. While Axios and Fetch are still widely used, Ky offers key advantages like automatic retries, hooks for customizing requests and responses, and better default error handling.

For developers who prioritize simplicity, performance, and control over HTTP requests, Ky is definitely worth considering as a primary tool in your JavaScript projects.

For more examples and detailed API information, you can visit https://www.npmjs.com/package/ky.