Tenho trabalhado com o React já por uns 2 anos e uma das perguntas que mais escuto de quem está começando nele agora é: “Como o React recebe dados do servidor?” ou “Como faço para fazer requisições AJAX no React?”

A maioria dos desenvolvedores React irá te responder que React é apenas uma biblioteca visual e portanto o que você precisa não é algo nativo do React e sim apenas a implementação de alguma boa ferramenta que faça requisições AJAX. Acontece que essa resposta não ajuda muito – especialmente levando em conta que o cenário do Javacript evolui num passo incrivelmente acelerado. Então, neste artigo, tento mostrar de forma resumida e prática 5 bibliotecas/plugins/ferramentas (chame do que quiser) para fazermos requisições AJAX dentro do React.

Fetch API

O Fetch é uma API relativamente nova e simples desenvolvida pela equipe do Mozilla, mas que já foi implementada pela maioria dos navegadores em suas versões mais recentes (verifique a compatibilidade de browsers aqui).

O objetivo do Fetch é unificar a forma como sistemas web requisitam dados e substituir o saudoso XMLHttpRequest. Possui também um polyfill para browsers mais antigos, mas recomendo utilizar o fetch apenas em web apps modernos. Se você precisa fazer requisições em APIs no Node.js vale a pena conferir o módulo node-fetch, que implementa o fetch dentro do Node.js.

A requisição AJAX dentro do React utilizando fetch se pareceria mais ou menos com isso :

Se você já está familiarizado com as promises do ES6, deve ter notado que o fetch nada mais é do que uma promise. Você pode aninhar as execuções de forma assíncrona na ordem que desejar utilizando .then( ).then( ).then( ) e assim por diante. Você vai encontrar centenas de exemplos utilizando o fetch nos tutoriais do React. Para saber mais sobre ele confira a documentação oficial aqui.

Axios

Axios é um client HTTP desenvolvido para o Node.js e navegadores. Assim como o fetch, roda tanto no lado do cliente como no do servidor. Possui inúmeras funcionalidades que você pode conferir na página oficial no GitHub.

É assim que você faria uma requisição AJAX no React utilizando o Axios :

Assim como o fetch, o Axios é uma biblioteca que funciona como uma promise, extremamente fácil e simples de utilizar. Sem segredos.

Superagent

Superagent é uma API AJAX pequena e leve criada originalmente para ser fácil de aprender e de extender funcionalidades. Se por algum motivo você não quiser utilizar o fetch ou o Axios, considere utilizar o Superagent.

Aqui vai uma breve demonstração do seu uso :

O Superagent também possui um módulo para o Node.js com a mesma API. Se você está desenvolvendo apps isomórficos (que são renderizados no servidor e não no cliente) utilizando Node.js e React, você pode empacotar o Superagent utilizando algo como o webpack e torna-lo disponível no lado do cliente. Como as APIs para o cliente e servidor são iguais, não é preciso fazer nenhum ajuste no código para roda-lo no browser.

Request

Esta lista estaria incompleta se eu não mencionasse o request, uma biblioteca minimalista extremamente famosa na comunidade do Node.js, afinal são mais de 12k de estrelas no Github. Você encontra mais informações sobre o módulo request na sua página do GitHub.

Exemplo de uso :

jQuery $.ajax

Sim, você leu corretamente. Essa é uma forma rápida e controversa de fazer requisições AJAX no React. Inclusive, no tutorial oficial do React, eles usam jQuery para requisitar dados do servidor. Se você acabou de cair de paraquedas no React e só está brincando com alguma coisa, o jQuery pode te poupar algum tempo. A maioria de nós somos familiarizados com jQuery. E como falei no começo do post, você não é obrigado a se engessar em nenhuma biblioteca específica quando precisa fazer algo fora do escopo do React. Dito isso, fazer requisições AJAX com jQuery no React vai ser moleza pra você:

OBS. Esse Snippet foi retirado do tutorial oficial do React. Não reclamem comigo.

É o mesmo e velho $.ajax do jQuery utilizado dentro de um component do React. Perceba o uso do ‘bind’ logo após o callback ‘success’. Dessa forma nós alteramos o escopo do ‘this’ para podermos manusear os dados do componente do React de dentro da resposta da requisição AJAX.

Porém, é importante lembrar, o jQuery é uma biblioteca grande com um monte de funções. Então não faz muito sentido usa-la somente para fazer requisições AJAX no React (salvo se já o estiver utilizando para realizar um monte de outras tarefas no seu app).

Minha escolha

Axios. É uma biblioteca robusta, compatível com a maioria dos browsers e não deve em nada em comparação com as outras opções. A maioria dos tutoriais de React modernos você vai encontrar algum exemplo utilizando o Axios. E eu recomendo não só para apps em React, mas para qualquer app Javascript.

Fabio Ferreira on EmailFabio Ferreira on InstagramFabio Ferreira on Twitter
Fabio Ferreira

Desenvolvedor Javascript e PHP, é editor do blog Café na Veia e também atua como desenvolvedor web freelancer na cidade de São Paulo.


Author: Fabio Ferreira

Desenvolvedor Javascript e PHP, é editor do blog Café na Veia e também atua como desenvolvedor web freelancer na cidade de São Paulo.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Instagram did not return any images.

Siga também nosso Instagram!