REACT – Como utilizar o React Async

Olá, pessoal!

Hoje eu quero mostrar como deixar o seu componente em react mais limpo e mais legível usando o react-async.

Vou ensinar uma das formas de utilização da biblioteca react-async, que apresenta uma forma declarativa para resoluções de promises e requisição de dados.

Existem várias formas diferentes para a utilização da react-async e eu quero começar mostrando usando o useAsync que pelo próprio nome do método já da para perceber que se trata de um react hook.

Setup do projeto

Mais uma vez, para facilitar as coisas vamos usar o create-react-app. Para isso, use o comando:

“npx create-react-app example”

React Async – Criando o projeto

Aguarde a instalação e criação do projeto em sua máquina local. Apos concluído entre na pasta “example”

Fazendo requisição na API

Vamos mais uma vez usar a swapi.co e dessa vez, vamos fazer uma requisição no endpoint de filmes.

Abra o projeto em seu editor de texto preferido e dentro da pasta “src” crie uma pasta chamada “helpers” e dentro dessa pasta crie um helper chamado “api.js”.

React Async – Criando o helper api

Agora no arquivo “api.js” vamos começar definindo uma constante referente a URL da nossa api que nesse caso é a “https://swapi.co/api/”, vamos chamar a constante de “API_URL”.

React Async – Criando a url da api

Agora vamos criar uma arrow function chamada getMovie que recebe um objeto como parâmetro e dentro desse objeto a chave “movieId”, porém vamos fazer a desestruturação desse objeto, deixando a função mais legível.

Essa função por sua vez, vai retornar uma promise e dentro do callback da promise, vamos usar a “fetch” api para fazer a requisição, e depois de pegar a resposta, vamos converter os dados para JSON e resolver a promise, caso tenha algum erro, chamamos a função eject.

O resultado final ficará assim:

React Async – Criando função getMovie

Instalando a React-Async

Agora precisamos de instalar em nosso projeto a biblioteca react-async. Para isso volte ao terminal e use o npm (ou yarn) para adicionar a biblioteca. Nesse caso vou usar o npm, com o seguinte comando “npm install –save react-async”.

Aguarde a instalação ser concluída.

React Async – Instalando ReactAsync

Limpando o projeto e importando o useAsync()

Agora que temos a react-async instalada em nosso projeto, vamos abrir o arquivo “App.js” e importar o método “useAsync” da biblioteca react-async.

Vamos também importar o método “getMovie” do nosso helper “api”.

Feito isso, vamos dar uma limpada em nosso componente funcional App, e dentro dele vamos utilizar o useAsync.
Não se esqueça de remover o import do “logo.svg”, já que não é mais necessário.

Nesse momento o “App.js” deve estar assim:

React Async – useAsync

Utilizando o useAsync

Vou explicar como funciona o useAsync. Se você ja utilizou algum react hook, você sabe que os hooks são apenas funções são executadas cada vez que o componente funcional é chamado e que eles sempre retornam uma estrutura de dados pre-definidas e que os dados são populados de acordo com as iterações e eventos que vão ocorrendo no projeto.

Dito isso, o hook useAsync recebe um objecto como parâmetro, nesse objeto se espera pelo menos a chave “promiseFn” que como o próprio nome indica, é a promise que será executada. Essa forma, deixa o hook useAsync bem flexível, pois você pode usar qualquer função ou biblioteca para fazer suas requisições, desde que ela retorne uma promise.

Agora vamos falar do retorno da função useAsync que é composta de um objeto com 3 chaves: “data”, “error”, “isPending”, e a gente pode desestruturar esse objeto e assim ter essas 3 chaves como variáveis disponíveis em nosso código.

Como os nomes das variáveis são bem claros, sabemos que o “isPending” será um booleano (true|false) informando que a requisição está pendente ou não. Sabemos que “error” será a variavel que irá conter o nosso erro caso ele ocorra, ou seja, caso a promise seja rejeitada (reject) e por fim o “data” que irá retornar de fato os dados da requisição.

Agora que ja expliquei tudo, faça a chamada à função “getMovie” usando o hook useAsync, seu código ficará assim:

React Async – useAsync

Nesse momento você deve estar se perguntando sobre o movieId que é esperado em nossa função “getMovie”. A gente pode passar esse parâmetro juntamente com a nossa “promiseFn”.

Para deixar o código mais limpo, eu vou criar um objeto chamado “requestParams”, que irá conter as chaves “promiseFn” com a função “getMovie” e também a chave “movieId” onde eu vou passar o valor 2 (que eu sei que o id do filme “Empire Strikes Back).

Nesse ponto seu código ficará assim:

React Async – useAsync

Agora precisamos utilizar as nossa 3 variáveis retornadas pela “useAsync”, o “data”, “error” e o “isPending”.

Vamos começar pelo “isPending”, caso ele seja verdadeiro, iremos retornar um JSX “h1” com a mensagem de “Loading…”.

Em seguida, vamos utilizar a “error” que caso tem alguma coisa, vamos retornar um JSX “h1” com a mensagem de erro.

E por fim o “data” que caso esteja populado, iremos exibir o título do filme, retornando um JSX h1 com o título do filme que está em “data.title”.

E pronto, seu código deve estar assim:

React Async – Código Final

Rodando o projeto

Agora que você ja fez tudo, volte no terminal e execute o comando “npm start” e o seu browser irá abrir e você verá o resultado final, com uma requisição sendo feita à swapi.co e o nome do filme sendo exibido após a mensagem de loading =)

React Async – Projeto rodando

Obrigado pela leitura, compartilhe!

Se você gostou desse post, compartilhe com seus amigos, ajude a espalhar conhecimento!
Não se esqueça de nos seguir nas redes sociais, porque você não pode ficar de fora!

1. Faça parte da nossa lista de Desenvolvedores ?
2. Se inscreva em nosso canal do Youtube ?
3. Curta nossa página no Facebook ?
4. Não perca as atualizações no Twitter ?
5. Veja as dicas no Instagram ?
6. Siga nossos repositórios no Github ⌨️