6 minutos de leitura
Autor(a)
Formado em Sistemas de Informação na FIAP e em Design Gráfico na Escola Panamericana de Artes e Design. Trabalho como desenvolvedor e instrutor na Alura. Nas horas vagas sou artista/ilustrador.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
Este artigo tem como foco o framework React Native, mas
Fetché uma API nativa do JavaScript. Portanto, pode ser usada em qualquer aplicação que utilize JavaScript e seu uso não está limitado a apenas React Native ou React.Para saber mais: Fetch API
O método mais comum para consumir dados de alguma aplicação web ou REST APIs é através da API Fetch, onde passamos a o caminho (URL) do serviço a ser consumido e depois tratando sua resposta e recebendo os dados. Por padrão, a requisição que fazemos usa o método GET. Porém, existem outros métodos úteis que podem ser utilizados em nossa aplicação híbrida.
A resposta desta pergunta é: depende. Cada requisição tem um caso diferente de uso. Por exemplo: precisamos receber dados assim que nosso aplicativo é carregado, preenchendo a tela com informações importantes? Podemos utilizar, então, os hooks useEffect() e useState() (lembrando que esses hooks devem respeitar o ciclo de vida de um componente).
Para saber mais: Artigo: React hooks
Podemos, também, fazer uma requisição após o pressionamento de um botão, utilizando o atributo onPress de um componente TouchableOpacity e passando uma função que pode executar um fetch. Neste caso, podemos fazer uma requisição pegando informações específicas que são passadas por um TextInput.
Então, sua localização varia dependendo da necessidade.
Os principais métodos são:
GET (padrão da função fetch()) que vai receber informações de uma API;POST que envia informações para a API;PUT que atualiza uma entrada (detalhe que todas as informações de entrada precisam ser passadas) e que também serve para adicionar uma entrada caso um parâmetro de identificação (por exemplo id) não exista dentro do banco de dados da API;PATCH que atualiza uma entrada (diferente do PUT, não é necessário passar todas as informações de entrada);DELETE que remove uma entrada da API.Uma parte importante de trabalhar com outros métodos de requisição que não seja
GET, é a necessidade de passar um objeto a mais dentro da funçãofetch()que são as informações da requisição.Informações como
method(onde é especificado o método de requisição),headers(onde passamos ocontent-typee ocharset) ebody(onde passamos os parâmetros de entrada).Outra coisa importante é que todas essas informações devem ser enviadas como String, então o corpo da requisição precisa ter um formato de objeto JSON, mas ainda precisa ser transformado em String.
Aqui vou passar alguns exemplos de como montar cada um desses métodos de requisições com fetch(). Para mostrar um "resultado", vou utilizar uma fake (falsa) API Rest online que retorna para nós um código válido de requisição.
Para saber mais desta API
Esse é o método mais simples de montar:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((json) => console.log(json));
Dentro do console, devemos receber a seguinte informação:
{
id: 1,
title: '...',
body: '...',
userId: 1
}
A partir daqui, precisamos passar o objeto com nossas informações de requisição:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
A resposta que devemos receber da API deve ser a seguinte:
{
id: 101,
title: 'foo',
body: 'bar',
userId: 1
}
Algumas observações:
Como não passamos um valor para
id, um valor será automaticamente atribuído, definido pelo banco de dados.Também não precisamos imprimir, no console, o resultado da requisição. Utilizamos
console.log()neste caso apenas para ver se a entrada foi inserida com sucesso.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
body: JSON.stringify({
id: 1,
title: 'foo',
body: 'bar',
userId: 1,
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
A resposta que devemos receber da API deve ser a seguinte:
{
id: 1,
title: 'foo',
body: 'bar',
userId: 1
}
Uma observação:
Identificamos a entrada a ser alterada pela URL da requisição (
/posts/1).Não precisamos imprimir, no console, o resultado da requisição. Utilizamos
console.log()neste caso apenas para ver se a entrada foi atualizada com sucesso.
Esse método de requisição não precisa receber todas as informações dos parâmetros, apenas aquelas que queremos atualizar.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PATCH',
body: JSON.stringify({
title: 'foo',
}),
headers: {
'Content-type': 'application/json; charset=UTF-8',
},
})
.then((response) => response.json())
.then((json) => console.log(json));
A resposta que devemos receber da API deve ser a seguinte:
{
id: 1,
title: 'foo',
body: '...',
userId: 1
}
Uma observação:
Não passamos o
iddentro do corpo, mas identificamos a entrada a ser alterada pela URL da requisição (/posts/1).Não precisamos imprimir no console o resultado da requisição. Utilizamos
console.log()neste caso apenas para ver se a entrada foi atualizada com sucesso.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE',
});
Uma observação:
Identificamos a entrada a ser alterada pela URL da requisição (
/posts/1).
Até agora falamos apenas da Fetch API, que é reconhecida nativamente nos browsers atuais. Mas será que existe uma maneira mais simples de escrever todas essas requisições?
Uma das bibliotecas mais famosas para trabalhar com requisições no React Native é o Axios. Ela simplifica grande parte dessas requisições e também adiciona uma camada de compatibilidade com browsers e sistemas mais antigos (inclusive, o Internet Explorer 11). Isso porque essa biblioteca não trabalha com Fetch API, mas, sim, com XMLHttpRequests.
Se quiser conhecer mais sobre o Axios, visite o link da biblioteca: https://github.com/axios/axios.
Trabalhar com requisições dentro do React Native não foge muito dos padrões do JavaScript. A principal diferença acontece no momento em que essas requisições são montadas, como é o caso do uso de Hooks. Bibliotecas podem ser utilizadas para facilitar e aumentar a compatibilidade de seus projetos.
Gostou deste artigo? Compartilhe nas redes sociais e nos diga o que achou!
Veja mais conteúdos sobre React Native:
Avalie este artigo
Criando o primeiro App Android
Ler mais
Push notifications com Firebase Cloud Messaging
Ler mais
Salvando o estado utilizando o Icepick
Ler mais