Integrando APIs REST externas

## Consumindo APIs Externas com Axios/Fetch: Guia Completo

A comunicação com APIs externas é uma habilidade fundamental para qualquer desenvolvedor web moderno. Seja para buscar dados, enviar informações ou integrar serviços, dominar o consumo de APIs é crucial. Neste guia, exploraremos como consumir APIs externas usando as bibliotecas Axios e Fetch, abordando autenticação, tratamento de erros e timeouts.

Escolhendo entre Axios e Fetch

Ambas as bibliotecas, Axios e Fetch, são amplamente utilizadas para realizar requisições HTTP em JavaScript. A escolha entre elas muitas vezes se resume a preferências pessoais e aos recursos que você precisa:

• Fetch: É uma API nativa do navegador, o que significa que não requer instalação de bibliotecas externas. Oferece uma interface mais simples e é ideal para projetos que buscam minimalismo. No entanto, o tratamento de erros e a formatação de dados podem exigir mais código manual.
• Axios: É uma biblioteca popular baseada em Promises que oferece funcionalidades adicionais, como interceptores, transformação automática de dados (JSON) e tratamento simplificado de erros. É uma escolha excelente para projetos maiores e mais complexos.

Implementando com Fetch

async function fetchData(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`Erro na requisição: ${response.status}`);
    }

    const data = await response.json(); // ou response.text() para dados textuais
    return data;

  } catch (error) {
    console.error(\"Erro ao buscar dados:\", error);
    throw error; // Propagar o erro para tratamento posterior
  }
}

Implementando com Axios

import axios from 'axios';

async function fetchData(url) {
  try {
    const response = await axios.get(url);
    return response.data; // Dados são automaticamente convertidos para JSON
  } catch (error) {
    console.error(\"Erro ao buscar dados:\", error);
    throw error; // Propagar o erro para tratamento posterior
  }
}

Lidando com Autenticação (API Keys)

Muitas APIs exigem autenticação para garantir o acesso seguro aos recursos. Uma forma comum é o uso de chaves de API. A seguir, exemplos de como incluir a chave de API nos headers das requisições:

Fetch:

async function fetchData(url, apiKey) {
  try {
    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Authorization': `Bearer ${apiKey}`, // Ou 'X-API-Key' ou outro header especificado pela API
        'Content-Type': 'application/json' // Definir o tipo de conteúdo, se necessário
      }
    });

    // ... restante do código para tratamento da resposta
  } catch (error) {
    // ... tratamento de erros
  }
}

Axios:

import axios from 'axios';

async function fetchData(url, apiKey) {
  try {
    const response = await axios.get(url, {
      headers: {
        'Authorization': `Bearer ${apiKey}`, // Ou 'X-API-Key'
        'Content-Type': 'application/json'
      }
    });

    // ... restante do código para tratamento da resposta
  } catch (error) {
    // ... tratamento de erros
  }
}

Importante: Armazene suas chaves de API de forma segura. Nunca as inclua diretamente no código-fonte do cliente. Use variáveis de ambiente ou mecanismos de configuração no lado do servidor para proteger suas credenciais.

Tratamento de Erros

O tratamento adequado de erros é fundamental para uma experiência de usuário robusta. Considere os seguintes cenários:

• Erros de Rede: Problemas de conexão, falhas no servidor.
• Códigos de Status HTTP: 400 Bad Request, 401 Unauthorized, 404 Not Found, 500 Internal Server Error, etc.
• Formato de Dados Inesperado: A API pode retornar dados em um formato diferente do esperado.

Exemplo de tratamento de erros:

async function fetchData(url) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      // Tratar erros HTTP
      throw new Error(`Erro na requisição: ${response.status} - ${response.statusText}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error(\"Erro ao buscar dados:\", error);

    //Tratamento específico com base no tipo de erro (opcional)
    if (error.message.includes(\"401\")) {
      // Lidar com erros de autenticação (ex: redirecionar para a página de login)
      console.log(\"Erro de autenticação. Redirecionando...\");
    } else {
        //Exibir mensagem genérica para o usuário
        alert(\"Ocorreu um erro ao buscar os dados. Tente novamente mais tarde.\");
    }

    throw error; //Propagar o erro para tratamento posterior (ou retornar um valor padrão)
  }
}

Implementando Timeouts

O timeout é crucial para evitar que as requisições fiquem bloqueadas indefinidamente, especialmente em caso de falha na rede ou lentidão da API.

Fetch:

async function fetchDataWithTimeout(url, timeoutMs = 5000) {
  const controller = new AbortController();
  const signal = controller.signal;

  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);

  try {
    const response = await fetch(url, { signal });

    if (!response.ok) {
        throw new Error(`Erro na requisição: ${response.status} - ${response.statusText}`);
    }

    const data = await response.json();
    clearTimeout(timeoutId); // Limpar o timeout se a requisição for bem-sucedida
    return data;

  } catch (error) {
      clearTimeout(timeoutId);
      if (error.name === 'AbortError') {
          console.error('Requisição cancelada por timeout!');
          throw new Error('Timeout da requisição.'); //Rejeita com mensagem de timeout
      }
      console.error('Erro ao buscar dados:', error);
      throw error; // Propaga outros erros
  }
}

Axios:

import axios from 'axios';

async function fetchDataWithTimeout(url, timeoutMs = 5000) {
  try {
    const response = await axios.get(url, { timeout: timeoutMs });
    return response.data;
  } catch (error) {
    if (error.code === 'ECONNABORTED') { // Timeout error
      console.error('Requisição cancelada por timeout!');
      throw new Error('Timeout da requisição.'); // Rejeita com mensagem de timeout
    }
    console.error(\"Erro ao buscar dados:", error);
    throw error; // Propaga outros erros
  }
}

Conclusão

Consumir APIs externas é uma tarefa fundamental no desenvolvimento web moderno. Ao dominar o uso de Axios e Fetch, juntamente com técnicas de autenticação, tratamento de erros e timeouts, você estará bem equipado para construir aplicações web robustas e eficientes que se comunicam com o mundo exterior. Lembre-se de sempre priorizar a segurança e o tratamento adequado de erros para garantir uma ótima experiência para o usuário.