Artigo original: Fetch API – How to Make a GET Request and POST Request in JavaScript
Você frequentemente desejará que seu sistema se comunique com outros servidores da web para obter informações.
Por exemplo, digamos que um novo usuário quer se inscrever para uma conta em seu site da web. Em vez de preencher um formulário manualmente para enviar as informações para o seu sistema, o usuário quer utilizar as informações sobre ele que já estão em outro serviço ou plataforma (ou seja, autenticação de terceiros) para se inscrever.
Em um caso como esse, seu sistema precisa se comunicar com o sistema terceirizado para obter as informações do usuário. Ele fará isso por meio de uma API.
Uma API, ou uma Interface de Programação de Aplicações, é apenas um conjunto de regras que orientarão a comunicação de um software ou sistema com outro.
Se a sua aplicação for uma aplicação de página única (SPA, ou single-page application, em inglês), criada com uma linguagem de programação assíncrona, como o JavaScript, você terá uma ferramenta útil para realizar essa função: o método fetch().
O que é a Fetch API?
fetch() é um mecanismo que permite que você faça chamadas de AJAX (Asynchronous JavaScript And XML, em inglês) simples com o JavaScript.
Assíncrono significa que você pode usar fetch para fazer uma chamada para uma API externa sem parar a execução de outras instruções. Desse modo, outras funções no site continuarão a ser executadas mesmo que uma chamada à API não tenha sido resolvida.
Quando uma resposta (os dados) é mandada de volta pela API, as tarefas assíncronas (fetch) continuam. Se ainda soa difícil para você, leia minha introdução detalhada sobre código assíncrono aqui (texto em inglês).
É importante observar, porém, que fetch não é parte das especificações do JavaScript, mas da WWTAG. Como resultado, você não conseguirá utilizá-lo em um ambiente Node.js (a menos que você instale um módulo especial).
Como usar fetch() em JavaScript
Se vamos falar de APIs, precisamos falar também de endpoints. Um endpoint é simplesmente um URL exclusivo que você pode chamar para interagir com outro sistema.
Vamos imaginar que estamos fazendo uma solicitação a uma API externa para obter alguns dados (como uma publicação em blog). Para isso, usaremos uma solicitação GET simples.
Faça apenas a chamada de fetch() com o URL do endpoint como argumento:
fetch('https://ubahthebuilder.tech/posts/1');O corpo da resposta para esse endpoint terá as informações sobre uma publicação de blog:
{
userId: 1,
id: 1,
title: 'A post by Kingsley',
body: 'Brilliant post on fetch...',
};No fim, o que você está buscando é o corpo da resposta. O objeto da resposta, no entanto, contem algumas informações a mais além do corpo, incluindo o código de status, cabeçalho e outras informações.
Observe que fetch API retorna uma promise. Por causa disso, você precisa aninhar um método then() para tratar da resolução. Saiba mais sobre promises aqui (texto em inglês).
Os dados retornados da API geralmente não estão em um formato utilizável. Desse modo, você precisará converter os dados para um formato com o qual seu JavaScript possa operar. Por sorte, podemos usar o método json() para fazer isso:
fetch('https://ubahthebuilder.tech/posts/1')
.then(data => {
return data.json();
})
.then(post => {
console.log(post.title);
});Como você pode no código acima, você pode aninhar um método then() subsequente para fazer o parsing dos dados (em nosso caso, eu busquei apenas o título)
Nesse exemplo, queríamos apenas obter uma publicação de blog usando a API. E se, em vez disso, quiséssemos publicar uma história?
Como fazer uma solicitação POST
Depois de passar pelas solicitações GET, é preciso configurar mais algumas opções. Até o momento, você forneceu apenas um argumento para fetch() — o URL do endpoint.
Para uma solicitação POST, você precisará passar um objeto das opções de configuração como um segundo argumento. O objeto opcional pode receber vários parâmetros diferentes. Neste caso, inclua apenas as informações mais necessárias.
Como você está enviando uma solicitação POST, é preciso declarar que está usando o método POST.
Também é preciso passar alguns dados para criar de fato uma publicação para o blog. Como você está enviando dados em JSON, precisa definir um cabeçalho com o Content-Type definido como application/json. Por fim, você precisa do corpo (body), que será uma única string de dados em JSON.
const update = {
title: 'A blog post by Kingsley',
body: 'Brilliant post on fetch API',
userId: 1,
};
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(update),
};Em seguida, a chamada à API:
fetch('https://jsonplaceholder.typicode.com/posts', options)
.then(data => {
if (!data.ok) {
throw Error(data.status);
}
return data.json();
}).then(update => {
console.log(update);
// {
//
title: 'A blog post by Kingsley',
//
body: 'Brilliant post on fetch API',
//
userId: 1,
//
id: 101
// };
}).catch(e => {
console.log(e);
});Se a sua solicitação tiver sucesso, você receberá um corpo de resposta contendo o objeto da publicação do blog juntamente a um novo ID. A resposta variará dependendo da forma como a API estiver configurada.
Por fim, observe que os endpoints podem mudar com o tempo e as APIs talvez precisem de reestruturação. Desse modo, você deve juntar todas as suas chamadas de fetch para facilitar o acesso.
Conclusão
Aqui temos alguns pontos para resumir este artigo:
- Sistemas computacionais, software em geral, se comunicam uns com os outros e compartilham informações por meio de uma camada chamada de API.
- Uma API contém o conjunto de regras e protocolos que orientam a forma como dois ou mais sistemas interagem. Por exemplo, o sistema do Facebook pode interagir com o sistema do Google para obter informações sobre um usuário por meio de uma API.
- No JavaScript do front-end, você pode fazer chamadas simples às APIs com a ferramenta chamada
fetch(). - Para fazer uma solicitação GET simples com fetch, é preciso apenas passar o URL do endpoint como argumento.
- Para fazer uma solicitação POST, você precisa passar alguns outros parâmetros, incluindo um objeto de configuração.
Se gostou do artigo do autor e se quiser oferecer o seu apoio, visite a página dele no Buy Me A Coffee.
Obrigado pela leitura e até breve.