Quando se trata de lidar com solicitações HTTP em JavaScript, Axios e Fetch há muito tempo são as ferramentas mais utilizadas. No entanto, há uma alternativa poderosa e moderna que os desenvolvedores devem considerar —  Ky. Leve e repleto de recursos avançados, Ky torna o tratamento de solicitações HTTP mais fácil e eficiente. Neste artigo, explicaremos por que Ky se destaca, com comparações diretas com Axios e Fetch API.

1. Visão geral das APIs Ky, Axios e Fetch

Eixos

Axios é um cliente HTTP popular e baseado em promessas para JavaScript. Ele simplifica as solicitações HTTP, oferecendo recursos como análise automática de JSON, interceptadores de solicitação e tempos limite personalizados. No entanto, o tamanho do arquivo pode se tornar uma desvantagem, especialmente para aplicativos leves.

Buscar API

Fetch é uma API de navegador integrada para fazer solicitações HTTP. Embora seja amplamente utilizado, o Fetch tem algumas limitações: não inclui tratamento de erros padrão ou novas tentativas integradas, exigindo que os desenvolvedores escrevam código adicional até mesmo para funcionalidades básicas.

Ky

Ky é uma alternativa leve (157 ~ KB) ao Axios e Fetch, construída sobre o Fetch, mas oferecendo uma API mais rica em recursos. Com novas tentativas integradas, tratamento de erros simplificado e ganchos de solicitação personalizáveis, Ky atinge um equilíbrio entre simplicidade e poder.

Por que escolher Ky?

• Leve : apenas 157~ KB de tamanho, ideal para aplicativos sensíveis ao desempenho.
• Moderno : construído na API Fetch, mas com padrões melhores.
• Suporte para novas tentativas: novas tentativas automáticas em solicitações com falha.
• Hooks : Fácil manipulação de solicitações e respostas com ganchos beforeRequest e afterResponse.

2. Por que Ky é melhor: principais recursos e vantagens

Leve e de alto desempenho

Isso torna Ky uma ótima escolha para aplicações onde o desempenho e o tamanho do pacote são críticos. Apesar de ser leve, Ky não sacrifica recursos essenciais como novas tentativas e tratamento de erros.

API simples, recursos poderosos

A sintaxe do Ky é tão direta quanto a do Fetch, mas oferece mais poder integrado. Por exemplo, fazer uma solicitação GET com Ky é tão fácil quanto:

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

Por que isso é melhor que Fetch?

• Análise JSON automática : Não há necessidade de analisar manualmente a resposta.
• Tratamento de erros : Ky gera erros significativos para códigos HTTP como 404 ou 500.
• Retries : Ky repete automaticamente as solicitações com falha, ao contrário do Fetch, que falha silenciosamente.

Novas tentativas integradas

Ky vem com suporte integrado para novas tentativas, um recurso crucial para lidar com condições de rede não confiáveis. Axios também oferece funcionalidade de nova tentativa, mas você precisa usar um plugin adicional ou configurá-lo você mesmo. Por outro lado, Ky fornece esse recurso por padrão com configuração zero.

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

Neste exemplo, Ky tentará novamente a solicitação até 2 vezes em caso de falha, sem qualquer configuração adicional.

3. beforeRequest e afterResponse: O poder dos ganchos em Ky

Um dos recursos mais atraentes do Ky é seu sistema de hooks, especialmente beforeRequest e afterResponse. Esses ganchos oferecem controle total sobre suas solicitações e respostas HTTP sem a necessidade de middleware externo, que o Axios geralmente exige.

Gancho beforeRequest: aprimore solicitações facilmente

Com Ky, você pode modificar facilmente solicitações de saída usando o gancho beforeRequest. Se você precisa adicionar tokens de autenticação ou modificar cabeçalhos, beforeRequest torna isso fácil.

Exemplo : Adicionando um token de autorização a cada solicitação.

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

Isso reduz o código repetitivo, tornando mais fácil lidar com a autenticação globalmente.

Gancho afterResponse: simplifique o tratamento de respostas

Com o gancho afterResponse, você pode manipular as respostas em todo o seu aplicativo. Este gancho é especialmente útil para lidar com novas tentativas em códigos de status específicos, como atualizar tokens expirados.

Exemplo: atualização automática de um token expirado em uma resposta 401 não autorizada.

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

Com esta configuração, você pode atualizar tokens perfeitamente sem duplicar a lógica em seu aplicativo.

4. Tratamento de erros: Ky vs Axios vs Fetch API

Eixos

Axios fornece tratamento decente de erros por meio de interceptadores, mas falta a simplicidade que Ky oferece imediatamente. O Axios geralmente requer lógica personalizada para novas tentativas e tratamento de código de status de erro.

Buscar API

O tratamento de erros do Fetch é limitado por padrão. Ele não gera erros para códigos de status HTTP como 404 ou 500, forçando os desenvolvedores a verificar o status das respostas manualmente.

Ky

Ky é excelente no tratamento de erros. Ele gera erros automaticamente para respostas HTTP diferentes de 2xx e fornece funcionalidade de nova tentativa para solicitações com falha, sem a necessidade de código adicional. Isso torna Ky uma solução robusta para lidar com erros com elegância.

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

Ky envolve toda a solicitação em uma promessa, gerando automaticamente um erro se o código de status da resposta indicar uma falha, o que simplifica a depuração.

5. Exemplos práticos: Ky em ação

Vamos testar Ky com alguns exemplos práticos que mostram sua simplicidade e poder.

Exemplo 1: Fazendo uma solicitação GET

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

Ky lida automaticamente com a análise JSON e gera um erro para qualquer código de status diferente de 2xx, o que o Fetch não faz.

Exemplo 2: solicitação POST com novas tentativas

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

Ky tenta novamente a solicitação POST até 3 vezes se ela falhar, oferecendo melhor confiabilidade do que Fetch ou Axios sem configuração extra.

6. Conclusão: Ky vale a pena mudar?

Se você está procurando uma solução moderna , leve e repleta de recursos para fazer solicitações HTTP em JavaScript, Ky é uma excelente escolha. Embora Axios e Fetch ainda sejam amplamente usados, Ky oferece vantagens importantes, como novas tentativas automáticas, ganchos para personalizar solicitações e respostas e melhor tratamento de erros padrão.

Para desenvolvedores que priorizam simplicidade , desempenho e controle sobre solicitações HTTP, definitivamente vale a pena considerar Ky como uma ferramenta primária em seus projetos JavaScript.

Para mais exemplos e informações detalhadas da API, você pode visitar https://www.npmjs.com/package/ky.