Consumo de APIs: Dominando Fetch e Axios em JavaScript

A comunicação com APIs (ApplicationDebugging e Ferramentas de Desenvolvimento do NavegadorAprenda a depurar código JavaScript com as Ferramentas do Navegador. Use console, breakpoints e debugger para solucionar bugs de forma prática. Programming Interfaces) é uma parte fundamental de aplicações modernas. Muitas vezes, precisamos buscar (ou enviar) dados para servidores externos em aplicações web. O JavaScript oferece diversas maneiras de lidar com requisições HTTP, sendo o fetch e a biblioteca Axios duas das formas mais populares.

Nesta jornada, exploraremos como esses recursos funcionam, dando ênfase a exemplos práticosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. e a uma narrativa simples que o ajude a compreender, passo a passo, como consumir APIsConstruindo e Consumindo APIs RESTAprenda a criar e consumir APIs REST com Node.js e Express em nosso tutorial detalhado, abordando rotas, verbos HTTP e integração front-end. usando essas duas abordagens.

Visão Geral sobre Consumo de APIs🔗

Imagine que você deseje consultar uma lista de produtos armazenados em um servidor remoto ou enviar dados de um formulárioIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário. para um backend. A ideia de consumir APIsConstruindo e Consumindo APIs RESTAprenda a criar e consumir APIs REST com Node.js e Express em nosso tutorial detalhado, abordando rotas, verbos HTTP e integração front-end. consiste precisamente em estabelecer esse diálogo, enviando requisições e recebendo respostas.

No JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., a programação assíncrona é fundamental para lidar com essas requisições sem bloquear a execução do restante do código. É aqui que entram:

• O Fetch, método nativo do JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. para fazer requisições.
• O Axios, uma biblioteca third-party que simplifica bastante o processo de consumir dados de um servidor externo.

Introdução ao Fetch🔗

Desde aquelas versões mais recentes do JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. (ECMAScript 2015+), foi introduzida a API fetch, que nos permite fazer requisições HTTP de forma mais intuitiva, comparado aos métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. mais antigos, como XMLHttpRequest.

Estrutura Básica

A estrutura básica de uma chamada com fetch é:

fetch('https://api.meuservico.com/produtos')
  .then(response => {
    // Transformando a resposta em JSON
    return response.json();
  })
  .then(data => {
    // Utilizando os dados retornados
    console.log(data);
  })
  .catch(error => {
    // Tratando erros da requisição
    console.error(error);
  });

1. Chamamos fetch passando a URL da API.

2. Recebemos um objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. response que contém diversas informações da requisição.

3. Transformamos response em JSONTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas. (caso o retornoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. seja dados em JSON).

4. Recebemos os dados convertidos, prontos para serem manipulados.

5. Por fim, tratamos possíveis erros com catch.

Usando Async/Await com Fetch

É possível tornar o código mais legível ao usar async/awaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática., evitando aninhamentos extensos de then:

async function obterProdutos() {
  try {
    const response = await fetch('https://api.meuservico.com/produtos');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Erro ao obter produtos:', error);
  }
}
obterProdutos();

Nesse formato:

• awaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática. fetch(...); pausa a execução da funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. assíncrona até que a PromiseCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática. seja resolvida.
• Caso ocorra um erro, ele é capturado pelo catch.

Introdução ao Axios🔗

O Axios é uma biblioteca popular para fazer requisições HTTP em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. e costuma ser utilizada tanto no navegador quanto no Node.jsIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web.. Ele apresenta algumas facilidades adicionais em relação ao fetch, como interceptação de requisições e tratamento automatizado de alguns resultados.

Para começar a usar, é comum instalar a dependência (no contexto de aplicações Vue, React ou mesmo Node.jsIntrodução ao Node.js: Servidor e FerramentasDescubra como dominar o Node.js e criar servidores HTTP. Aprenda a instalar, configurar e utilizar o NPM, além de aplicar práticas no desenvolvimento web.). Em projetos simples no navegador, também é possível referenciar diretamente via CDN. Aqui vamos focar no uso básico.

Exemplo de Requisição GET

axios.get('https://api.meuservico.com/produtos')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Erro ao buscar produtos:', error);
  });

Observe que a resposta em Axios já vem encapsulada em um objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. response, cujo corpo costuma ser acessado por meio de response.data.

Usando Async/Await com Axios

Tal como no fetch, podemos aplicar async/awaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática.:

async function buscarProdutos() {
  try {
    const response = await axios.get('https://api.meuservico.com/produtos');
    console.log(response.data);
  } catch (error) {
    console.error('Erro ao buscar produtos:', error);
  }
}
buscarProdutos();

Com isso, o fluxo de código fica semelhante ao do fetch, mas contamos com recursos de Axios que podem simplificar a configuração de cabeçalhosFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica., interceptores, entre outros.

Diferentes Tipos de Requisições🔗

Em projetos no dia a dia, GET nem sempre é suficiente. Muitas vezes, precisamos também enviar informações para o servidor (POST), atualizar dados (PUT) ou remover registros (DELETE).

Métodos Fetch

Para usar métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. diferentes de GET com fetch, geralmente especificamos um objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. de configuração:

fetch('https://api.meuservico.com/produtos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ nome: 'Produto X', preco: 99.90 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Repare que definimos:

• methodIntrodução a Formulários: `<form>`, `action`, `method`Explore este tutorial sobre formulários HTML, conhecendo a função dos atributos action e method para envio seguro e organizado dos dados do usuário.: métodoClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. HTTP desejado (POST, PUT, DELETE etc.).
• headers: cabeçalhosFormatação de Texto: `<p>`, `<h1>-<h6>`, `<strong>`, `<em>`Aprenda a formatar textos em HTML com tags de parágrafo, títulos e destaques, organizando seu conteúdo e garantindo semântica. (ex.: Content-Type).
• body: o payload em formato JSONTrabalhando com JSON e LocalStorageAprenda a manipular JSON e utilizar LocalStorage para persistir dados, otimizar a experiência do usuário e desenvolver aplicações web interativas..

Métodos Axios

No Axios, usamos métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. prontos para cada tipo de requisição:

axios.post('https://api.meuservico.com/produtos', {
  nome: 'Produto X',
  preco: 99.90
})
.then(response => console.log(response.data))
.catch(error => console.error(error));

Por trás dos panos, algo equivalente é feito, mas de forma mais concisa.

Tratamento de Erros🔗

Independentemente de usarmos fetch ou Axios, precisamos estar atentos a possíveis erros de rede ou respostas inesperadas. Além do try/catch (no caso de async/awaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática.) ou catch (no caso de PromisesCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática.), é interessante verificar códigos de status:

Com Fetch

async function obterDados() {
  try {
    const response = await fetch('https://api.meuservico.com/info');
    if (!response.ok) {
      // Se não for uma resposta 2xx, tratamos como erro
      throw new Error(`Erro: Status ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Erro ao obter dados:', error);
  }
}

Com Axios

axios.get('https://api.meuservico.com/info')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // Servidor respondeu com um código de status fora de 2xx
      console.error('Erro de resposta:', error.response.status);
    } else if (error.request) {
      // Nenhuma resposta foi recebida
      console.error('Erro na requisição:', error.request);
    } else {
      // Outro tipo de erro
      console.error('Erro:', error.message);
    }
  });

O Axios torna mais prático lidar com diferentes cenários de erro, disponibilizando informações detalhadas sobre cada um dos objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. de erro.

Comparando Fetch e Axios🔗

Para facilitar a análise, segue uma tabelaCriando Tabelas: `<table>`, `<tr>`, `<td>`, `<th>`Descubra como montar tabelas HTML com tags básicas. Este tutorial prático ensina o uso de <table> <tr> <td> e <th> para organizar dados de forma eficiente. comparativa:

Em geral, se você deseja algo leve, sem instalar dependências extras, o fetch é suficiente. Por outro lado, se você precisa de maior flexibilidade e um tratamento de erros padronizado, Axios pode ser uma excelente escolha.

Conclusão🔗

A interação com APIs é parte essencial do desenvolvimento moderno em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Você aprendeu:

1. Os fundamentos do fetch, utilizando then e também async/awaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática..

2. Como efetuar requisições usando a biblioteca Axios, que simplifica algumas configurações típicas de projetos web.

3. Diferenças práticas entre as duas abordagens, com uma pequena tabelaCriando Tabelas: `<table>`, `<tr>`, `<td>`, `<th>`Descubra como montar tabelas HTML com tags básicas. Este tutorial prático ensina o uso de <table> <tr> <td> e <th> para organizar dados de forma eficiente. comparativa que pode ajudá-lo a decidir o que usar em cada cenário.

Escolher entre Fetch e Axios depende das necessidades do projeto: simplicidade e nativo vs. recursos avançados e conveniências. O importante!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. é sentir-se confortável para estabelecer conexões com APIs de forma confiável, o que se torna cada vez mais frequente em aplicações web.

Parabéns! Você avançou um passo importante!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. na jornada de manipulação de APIs e programação assíncrona em JavaScript, dominando duas das ferramentas mais comuns para consumir dados de servidores. Use esse conhecimento em seus projetos e continue explorando o universo do desenvolvimento web.