Entendendo a Diferença Entre REST API e Fetch: Como Utilizar Fetch para Consultar APIs REST

Community Alums
Not applicable

O que é REST API?

  • REST (Representational State Transfer): É uma arquitetura para criar APIs. Não é um protocolo específico, mas um conjunto de regras para construir APIs que comunicam dados entre sistemas de forma eficaz.

  • Funcionamento: Quando você faz uma solicitação a uma API RESTful, você está pedindo informações sobre um recurso (como um usuário ou um produto). A API então responde com uma representação desse recurso. Isso é feito através de requisições HTTP, como GET para obter dados, POST para enviar novos dados, PUT para atualizar dados e DELETE para remover dados.

  • Formatos de Resposta: As respostas geralmente são enviadas em formatos como JSON, HTML ou texto, e incluem cabeçalhos que contêm informações adicionais sobre a solicitação e a resposta.

  • Exemplo de uso: Você pode usar uma API REST para buscar informações de um usuário, adicionar um novo produto ou atualizar detalhes de um item no banco de dados.

O que é fetch?

  • fetch: É uma função do JavaScript que permite fazer requisições HTTP de forma moderna e simples. Ela é usada para se comunicar com APIs, como uma API RESTful, e pode enviar e receber dados entre o cliente (navegador) e o servidor.

  • Funcionamento: Quando você usa fetch(), você faz uma solicitação para um servidor e a função retorna uma promise. Essa promise é preenchida quando o servidor responde, permitindo que você manipule a resposta usando métodos como then e catch.

  • Formatos de Resposta: A função fetch permite processar a resposta em diferentes formatos, como JSON ou texto, e lidar com erros se a solicitação falhar.

  • Exemplo de uso: Você pode usar fetch para obter dados de uma API REST e exibir esses dados na sua página web.

Portanto, a REST API é como um serviço que você pode consultar, enquanto fetch é a forma como você faz essas consultas usando JavaScript.

 

A Fetch API em Detalhe

A Fetch API é uma ferramenta do JavaScript que permite fazer solicitações HTTP para servidores e processar as respostas de forma simples e moderna. Ela substitui a antiga XMLHttpRequest, oferecendo uma abordagem mais fácil e flexível, baseada em promises.

 

Com o fetch(), você pode solicitar dados de um servidor apenas passando a URL. O fetch() retorna uma promise, que é como uma promessa de que a resposta vai chegar no futuro. Quando a resposta chega, você pode verificar se a solicitação foi bem-sucedida e acessar os dados em vários formatos, como texto ou JSON.

Aqui está um exemplo básico de como usar fetch() para obter dados em formato JSON de um servidor:

ThalesSantos_4-1724517557665.png

 Exemplo básico de uso do fetch

 

then: Quando você usa fetch(), ele faz uma promessa de trazer dados. Se a promessa for cumprida (ou seja, se os dados forem trazidos com sucesso), o then é usado para dizer ao código o que fazer com esses dados. Em outras palavras, o then executa um bloco de código quando a promessa é cumprida, permitindo que você trabalhe com a resposta recebida.

 

ThalesSantos_5-1724517634676.png

Exemplo utilizando a DevTools do Google Chrome

 

catch: Às vezes, a promessa de trazer dados pode falhar, por exemplo, se o servidor estiver fora do ar ou a URL estiver errada. Quando isso acontece, a promessa é "quebrada" ou rejeitada. O catch é usado para lidar com essa situação, executando um bloco de código que trata o erro, como mostrar uma mensagem de que algo deu errado.

 

Resumindo:

then - O que fazer quando os dados chegam.

catch - O que fazer se algo der errado.

 

Exemplo Prático: Chamada fetch para API de CEP no ServiceNow

Vamos supor que você está trabalhando em um formulário no ServiceNow onde o usuário deve inserir um CEP, e você deseja que os campos de endereço sejam automaticamente preenchidos com as informações correspondentes.

ThalesSantos_7-1724517727996.png

Exemplo de chamado em um Catalog Client Scripts

ThalesSantos_8-1724517807227.png

Resultado do Formulário após preenchimento do campo cep

 

Neste exemplo, a função onChange é acionada quando o valor do CEP muda. Ela faz uma requisição fetch para a API de CEP, processa a resposta e preenche automaticamente os campos do formulário com as informações recebidas. Se algo der errado, a função exibe uma mensagem de erro.

 

Resumo e Perspectivas

Refletir sobre essas ferramentas e suas interações nos leva a considerar como a tecnologia continua a evoluir para atender às necessidades dos desenvolvedores e usuários. A forma como escolhemos e utilizamos essas ferramentas pode influenciar profundamente a eficiência e a experiência das aplicações que construímos. O entendimento profundo das arquiteturas de comunicação e das ferramentas disponíveis nos permite tomar decisões mais informadas e criar soluções que são não apenas funcionais, mas também elegantes e sustentáveis.

 

Portanto, a verdadeira lição aqui não está apenas no domínio técnico de REST e fetch, mas na compreensão de como essas ferramentas podem ser usadas para melhorar a forma como interagimos com o mundo digital. Em última análise, elas são uma parte essencial da contínua evolução da web, permitindo que façamos mais com menos.

0 REPLIES 0