Como usar Ja­vaS­cript Fetch para Re­qui­si­ções API

Ja­vaS­cript fetch é uma função integrada que envia re­qui­si­ções API, mantendo o código limpo e or­ga­ni­zado. Além da con­fi­gu­ra­ção padrão GET para so­li­ci­ta­ção de dados, ela também pode ser utilizada para enviar, alterar e excluir dados.

O que é e para que serve Ja­vaS­cript fetch?

Ja­vaS­cript fetch é uma função que realiza re­qui­si­ções API com Promises. Esse tipo de interação evita que o código se torne confuso e oferece muitas outras fun­ci­o­na­li­da­des. Ja­vaS­cript fetch envia uma re­qui­si­ção ao servidor desejado e a executa em segundo plano. Como funciona e quais pos­si­bi­li­da­des a API fetch oferece, ex­pli­ca­re­mos nas seções a seguir.

As vantagens do objeto Promise

Para entender o fun­ci­o­na­mento da função Ja­vaS­cript fetch, é ne­ces­sá­rio conhecer objetos Promise. Promises, in­tro­du­zi­dos no Ja­vaS­cript ES6, visam facilitar o tra­ta­mento de operações as­sín­cro­nas. Como o nome sugere, um objeto Promise é uma espécie de promessa: se for cumprida, ou seja, se o código funcionar, você receberá um valor. Se a promessa não for cumprida, um objeto de erro será retornado. Como subs­ti­tuto ou com­ple­mento para callbacks, Promises tornam processos as­sín­cro­nos mais con­fiá­veis e melhoram a le­gi­bi­li­dade do código.

Promises podem ter os estados pending (pendente), fulfilled (cumprido) ou rejected (rejeitado).

• pending: A operação ainda não foi executada nem cancelada.
• fulfilled: A operação foi executada com sucesso.
• rejected: A operação falhou.

Em casos de fulfilled e rejected, você pode reagir usando métodos como then() e catch(). Ja­vaS­cript fetch utiliza essas fun­ci­o­na­li­da­des e faz uso de Promises para executar uma re­qui­si­ção XHR a um servidor.

Fun­ci­o­na­mento de Ja­vaS­cript fetch

A sintaxe básica da função Ja­vaS­cript fetch é rápida de explicar. Ela se parece com isso:

fetch()

O método pode aceitar dois ar­gu­men­tos. Primeiro, um URL, que deve ser colocado entre aspas dentro dos pa­rên­te­ses. Em segundo lugar, um objeto que não é obri­ga­tó­rio. Ele é adi­ci­o­nado após a instrução principal.

Para ilustrar melhor o fun­ci­o­na­mento e a estrutura, uti­li­za­mos o seguinte código de exemplo:

fetch(url)
.then(function() {
})
.catch(function() {
});

No primeiro passo, for­ne­ce­mos como parâmetro o URL da API teórico. Em seguida, uti­li­za­mos o método Promise then(), que é com­ple­men­tado por uma função. Esta função será executada quando a Promise retornar a variável resolve. resolve é usado quando uma ação deve ser con­si­de­rada bem-sucedida. A função de then() contém o código ne­ces­sá­rio para lidar com os dados recebidos da API.

Abaixo, temos o método catch() que é chamado quando a variável reject é retornada. reject é retornado quando a API não pode ser acessada ou outros erros ocorrem. Nesse caso, a função dentro de catch() é executada. Dessa maneira, com apenas três linhas, você está preparado para todas as situações e pode iniciar re­qui­si­ções API com Ja­vaS­cript fetch.

Re­qui­si­ções GET com Ja­vaS­cript fetch

Você pode usar Ja­vaS­cript fetch para recuperar dados de uma API. No exemplo a seguir, fazemos uma re­qui­si­ção GET. Este é o com­por­ta­mento padrão de Ja­vaS­cript fetch. Para isso, for­ne­ce­mos novamente um URL de exemplo. A resposta será retornada como Promise, no qual aplicamos o método then(), con­ver­tendo a resposta do servidor em um objeto JSON e, em seguida, uti­li­zando novamente o método then() para exibir os dados recebidos no console. Um código adequado para essa operação seria:

fetch("https://beispielurl.com/api")
.then((response) => response.json())
.then((json) => console.log(json));

Enviar dados com POST

Embora a re­qui­si­ção GET seja a padrão, você também pode realizar operações POST com Ja­vaS­cript fetch para enviar dados. Novamente, pre­ci­sa­mos es­pe­ci­fi­car o URL desejado. Em seguida, usamos a chave method para definir o tipo de re­qui­si­ção, que nesse caso é “POST”. Seguem-se duas outras chaves obri­ga­tó­rias: body e headers.

A chave body define os dados a serem enviados ao servidor. Ela inclui os pa­râ­me­tros title e body. Também usamos JSON.stringify para converter os dados em uma string. headers é usado para definir o tipo de dado a ser enviado ao servidor (neste caso JSON) e es­co­lhe­mos a co­di­fi­ca­ção padrão UTF-8. Ambas as chaves devem ser definidas para uma re­qui­si­ção POST. No nosso exemplo, o código seria:

fetch("https://beispielurl.com/api", {
method: "POST",
body: JSON.stringify({
title: "Aqui está o título",
body: "Aqui está o conteúdo",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

Atualizar objetos com PUT ou PATCH

Com uma re­qui­si­ção PUT ou PATCH, um objeto pode ser com­ple­ta­mente atu­a­li­zado. Isso também é possível com Ja­vaS­cript fetch. A abordagem é se­me­lhante à do exemplo anterior. Assim, novamente deve haver uma opção body com string ou JSON.stringify. Também devemos es­pe­ci­fi­car o tipo de conteúdo como application/json. No nosso exemplo, o código seria:

fetch("https://beispielurl.com/api", {
method: "PUT",
body: JSON.stringify({
title: "Aqui está o título",
body: "Aqui está o conteúdo",
}),
headers: {
"Content-type": "application/json; charset=UTF-8",
},
})
.then((response) => response.json())
.then((json) => console.log(json));

Em vez de PUT, você pode usar PATCH.

Remover objetos com DELETE

Se você deseja usar Ja­vaS­cript fetch para excluir um objeto, uma re­qui­si­ção DELETE é ne­ces­sá­ria. Se quiser, você também pode im­ple­men­tar o método then() nessa re­qui­si­ção. Um exemplo cor­res­pon­dente seria:

fetch("https://beispielurl.com/api", {
method: "DELETE",
})
.then(() => {
element.innerHTML = "Removido com sucesso";
})
.catch((error) => {
console.error('Erro na requisição:', error);
});