Entendendo a Diferença Entre REST API e Fetch: Como Utilizar Fetch para Consultar APIs REST
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
08-24-2024 09:45 AM
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:
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.
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.
Exemplo de chamado em um Catalog Client Scripts
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.