Когда дело доходит до обработки HTTP-запросов в JavaScript, Axios и Fetch уже давно являются лучшими инструментами. Однако существует мощная современная альтернатива, которую следует рассмотреть разработчикам —  Ky. Легкий и оснащенный расширенными функциями, Ky делает обработку HTTP-запросов проще и эффективнее. В этой статье мы объясним, почему Ky выделяется, проведя прямые сравнения с Axios и Fetch API.

1. Обзор Ky, Axios и Fetch API

Аксиос

Axios — популярный HTTP-клиент на основе обещаний для JavaScript. Он упрощает HTTP-запросы, предлагая такие функции, как автоматический анализ JSON, перехватчики запросов и настраиваемые тайм-ауты. Однако размер файла может стать недостатком, особенно для легких приложений.

Получить API

Fetch — это встроенный API браузера для выполнения HTTP-запросов. Несмотря на широкое использование, Fetch имеет некоторые ограничения: он не включает обработку ошибок по умолчанию или встроенные повторные попытки, что требует от разработчиков написания дополнительного кода даже для базовых функций.

Кай

Ky — это облегченная (157~ КБ) альтернатива Axios и Fetch, созданная на основе Fetch, но предлагающая более многофункциональный API. Благодаря встроенным повторным попыткам, упрощенной обработке ошибок и настраиваемым перехватчикам запросов Ky обеспечивает баланс между простотой и мощностью.

Почему выбирают Кая?

• Легкий: размер всего 157~ КБ, идеально подходит для приложений, чувствительных к производительности.
• Современный: создан на основе Fetch API, но с лучшими настройками по умолчанию.
• Поддержка повторных попыток: автоматические повторные попытки при неудачных запросах.
• Хуки: простое манипулирование запросами и ответами с помощью хуков beforeRequest и afterResponse.

2. Почему Кай лучше: ключевые особенности и преимущества

Легкий и производительный

Это делает Ky отличным выбором для приложений, где производительность и размер пакета имеют решающее значение. Несмотря на легкость, Ky не жертвует такими важными функциями, как повторные попытки и обработка ошибок.

Простой API, мощные функции

Синтаксис Ky такой же простой, как и у Fetch, но предлагает больше встроенных возможностей. Например, сделать запрос GET с помощью Ky так же просто, как:

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

Почему это лучше, чем Fetch?

• Автоматический анализ JSON : нет необходимости анализировать ответ вручную.
• Обработка ошибок : Кай выдает значимые ошибки для HTTP-кодов, таких как 404 или 500.
• Повторные попытки : Ky автоматически повторяет неудачные запросы, в отличие от Fetch, который завершается автоматически.

Встроенные повторы

Ky имеет встроенную поддержку повторных попыток — важную функцию для обработки ненадежных сетевых условий. Axios также предлагает функцию повторной попытки, но вам необходимо использовать дополнительный плагин или настроить его самостоятельно. Напротив, Ky предоставляет эту функцию по умолчанию с нулевой конфигурацией.

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

В этом примере Кай повторит запрос до 2 раз в случае сбоя без какой-либо дополнительной настройки.

3. beforeRequest и afterResponse: сила хуков в Ky

Одной из наиболее привлекательных особенностей Ky является система хуков, особенно beforeRequest и afterResponse. Эти перехватчики дают вам полный контроль над вашими HTTP-запросами и ответами без необходимости использования внешнего промежуточного программного обеспечения, которое часто требуется Axios.

Хук beforeRequest: легко улучшайте запросы

С помощью Ky вы можете легко изменять исходящие запросы, используя хук beforeRequest. Если вам нужно добавить токены аутентификации или изменить заголовки, beforeRequest сделает это без труда.

Пример : добавление токена авторизации к каждому запросу.

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

Это уменьшает количество повторяющегося кода, упрощая глобальную аутентификацию.

Хук afterResponse: упрощение обработки ответов

С помощью хука 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 против Axios против Fetch API

Аксиос

Axios обеспечивает достойную обработку ошибок с помощью перехватчиков, но ему не хватает простоты, которую Ky предлагает «из коробки». Axios часто требует специальной логики для повторных попыток и обработки кодов ошибок.

Получить API

Обработка ошибок Fetch по умолчанию ограничена. Он не выдает ошибок для кодов состояния HTTP, таких как 404 или 500, что вынуждает разработчиков проверять статусы ответов вручную.

Кай

Кай отлично справляется с обработкой ошибок. Он автоматически выдает ошибки для HTTP-ответов, отличных от 2xx, и обеспечивает функцию повтора для неудачных запросов без необходимости использования дополнительного кода. Это делает Ky надежным решением для элегантной обработки ошибок.

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

Ky оборачивает весь запрос в обещание, автоматически выдавая ошибку, если код состояния ответа указывает на сбой, что упрощает отладку.

5. Практические примеры: Кай в действии

Давайте проверим Ky на нескольких практических примерах, демонстрирующих его простоту и мощь.

Пример 1. Создание запроса GET

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

Ky автоматически обрабатывает анализ JSON и выдает ошибку для любых кодов состояния, отличных от 2xx, чего Fetch не делает.

Пример 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?

Если вы ищете современное , легкое и многофункциональное решение для выполнения HTTP-запросов в JavaScript, Ky — отличный выбор. Хотя Axios и Fetch по-прежнему широко используются, Ky предлагает ключевые преимущества, такие как автоматические повторы, перехватчики для настройки запросов и ответов, а также улучшенная обработка ошибок по умолчанию.

Для разработчиков, которые отдают приоритет простоте , производительности и контролю над HTTP-запросами, Ky определенно стоит рассмотреть в качестве основного инструмента в ваших проектах JavaScript.

Дополнительные примеры и подробную информацию об API можно найти на странице https://www.npmjs.com/package/ky.