React Native: fazendo requisições com Fetch

Introdução

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.

Onde fazer requisição?

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.

Quais métodos de requisições podemos fazer?

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ção fetch() que são as informações da requisição.

Informações como method (onde é especificado o método de requisição), headers (onde passamos o content-type e o charset) e body (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.

Como montar as requisições?

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

Método GET

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
}

Método POST

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.

Método PUT

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.

Método PATCH

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 id dentro 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.

Método DELETE

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).

Outras maneiras de fazer requisições

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.

Conclusão

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:

• Artigo: Configurando o ambiente React Native
• Artigo: Como começar com React Native
• Alura+: React e React Native: o poder da dobradinha