Contexto
O código dessa aplicação está nesse link, o resultado final se encontra aqui.
Uma duvida muito comum quando se inicia no desenvolvimento web é como fazer aplicações o backend e o frontend se comunicarem. Como que eu posso fazer minha aplicação react se comunicar com minha API ? Essas são as dúvidas que eu vou tentar responder brevemente com esse post.
Como ?
A comunicação entre essas partes do sistema pode ser feita a partir do método http, que é um protocolo de comunicação onde através dele é possível a comunicação entre os diferentes pontos de um sistema. O protocolo Http possui métodos que são utilizados para diferentes finalidades, os principais são o GET e o POST, explicando de forma mínima o GET teria a função de pegar dados do servidor enquanto o POST teria a função de transmitir dados para o servidor.
Como eu faço isso em uma aplicação React
O Código abaixo é uma função javascript que vai receber o nome de uma personagem e vai fazer uma requisição para para a api retornar os personagens que coincidem com aqueles nomes.
const fetchCharacters = async (charactersName) => {
const response = await fetch(`https://www.breakingbadapi.com/api/characters/?name=${charactersName}`);
const data = await response.json();
return data;
};
Na primeira linha há uma requisição é feita a requisição para o a rota api/characters/
passando o parâmetro name
que vai receber o parâmetro da função, a constante response vai receber uma Promise de uma resposta http, para extrair os dados dessa resposta utilizamos na proxima linha o método .json()
que também é um Promise só que agora da resposta do servidor com o nome do personagem, apelido...
No caso da minha aplicação essa função é chamada ao enviar do formulário que pergunta o nome do personagem da seguinte forma:
const handleSubmit = async (e) => {
e.preventDefault();
const inputValue = e.target[0].value;
const charachtersData = await fetchCharacters(inputValue);
setCharacters(charachtersData);
};
<form onSubmit={handleSubmit}>
A primeira linha da função handleSubmit vai evitar que a página recarregue por conta do comportamento padrão do elemento form, o inputValue armazena o nome do personagem pesquisado, o charachtersData vai armazenar a resultado da função que foi apresentada anteriormente, e por último a reposta da api é definida como estado pelo setCharacters, agora é só exibir esses dados como queira.
Uma outra forma de fazer essa requisição é quando o componente é montado, digamos que você quer exibir as informações do Walter White enquanto o usuário não escolhe o personagem, você pode ter pensado em fazer da seguinte forma:
const SearchBar = () => {
cosnt [characters, setCharacters] = useState(null)
fetchCharacters('Walter White').then(data => {setCharacters(data)})
return (
<form>
{/*Componentes do formulário*/}
</form>
);
};
Se feito dessa forma, você vai ter um problema desse componente ser renderizado infinitamente pois, como ele atualiza o estado do componente, ele força que o componente remonte, e durante o processo de montagem ele vai novamente fazer a requisição e assim por diante...
Para fazer essa requisição enquanto o componente monta é necessário utilizar o hook useEffect, /UTILIZANDO ARRAY DE DEPENDÊNCIAS/
const SearchBar = () => {
cosnt [characters, setCharacters] = useState(null)
useEffect(() => {
fetchCharacters('Walter White').then(data => {setCharacters(data)},[])
}, [])
return (
<form>
{/*Componentes do formulário*/}
</form>
);
};
Dessa forma toda vez que o componente SearchBar for montado a função fetchCharacters vai ser chamada e seu retorno passado para o setCharacters que vai modificar o estado.
Essas são as formas de comunicação http através do React, a partir da montagem do componente ou através de um evento como o enviar do formulário.
Top comments (0)