JS-0603 - JavaScript Completo ES6 - Fetch

JS-0603 - JavaScript Completo ES6 - Fetch
Publicado em 18/04/2021 12h09
Visualizações: 523

Obtendo recursos de forma assíncrona via web

Fetch API do JS fornece uma interface que permite a busca de recursos através da web, manipulando requisições e respostas. Funciona de forma similar ao XMLHttpRequest e ao AJAX, contudo, de forma mais robusta, otimizada e flexível. Grande parte dessa otimização se dá através do uso de Promises.

O método fetch é utilizado para realizar as requisições via HTTP/HTTPS e este método retorna a solução de uma promise, que trata a requisição mesmo diante da ocorrência de erros (404, 500 etc). Então, podemos utilizar o método then de Promise para interagirmos com a resposta da requisição, que é um objeto (tudo é objeto) do tipo Response.

Para os exemplos, vou utilizar somente o console, na lateral esquerda, e uma guia aberta do navegador, sem conteúdo algum. As requisições serão realizadas para páginas preparadas para apresentar retornos via API. As utilizadas serão https://www.rodrigobrito.dev.br/projetos/api-dogs/json/api, que é a camada de API do projeto Dogs e o já conhecido ViaCEP.

Para criar um fetch é bem simples. Declara-se o método, a url e o callback da Promise:

JS-0603 - JavaScript Completo ES6 - Fetch

O objeto Response, possui um corpo com o conteúdo da resposta que pode ser transformado, utilizando métodos de seu protótipo que retornam outras promises e a possibilidade de encadeamento destas.

JS-0603 - JavaScript Completo ES6 - Fetch

Um dos recursos mais utilizados, JSON (JavaScript Object Notation) por possuir a mesma sintaxe, permite que o método json() transforme uma resposta em um objeto JS. Ex:

JS-0603 - JavaScript Completo ES6 - Fetch

Consumindo a API do ViaCEP:

JS-0603 - JavaScript Completo ES6 - Fetch

Podemos utilizar os métodos de Response para inserir a solução das Promises no DOM, combinando a transformação com a manipulação de Document. Abaixo, um exemplo de inserção de texto na página:

JS-0603 - JavaScript Completo ES6 - Fetch

Desta forma, os elementos text, HTML, json etc, podem ser adicionados dinamicamente em uma página através de requisições de outras páginas via Fetch API. A seguir, um exemplo, onde a página de postagens da API do projeto Dogs retorna um Array contendo informações das postagens:

JS-0603 - JavaScript Completo ES6 - Fetch

Uma das propriedades dos objetos do array retornado é um atributo src com o caminho da imagem. Desta forma, podemos iterar no Response e utilizar o src do retorno para adicionar imagens dinamicamente na nossa página:

JS-0603 - JavaScript Completo ES6 - Fetch

Response oferece ainda outros recursos, tal como a função blob, que é um tipo de objeto utilizado para representação de dados de um arquivo e transformações de requisições de imagens, gerando uma URL única.

A função clone permite a transformação de Response em diferentes valores, quando o retorno já estiver transformado:

JS-0603 - JavaScript Completo ES6 - Fetch

A propriedade headers possui os cabeçalhos da requisição, com informações sobre o tipo de arquivo, tempo de cache e charset. Como é um objeto iterável, podemos utilizar um forEach para vermos cada um deles:

JS-0603 - JavaScript Completo ES6 - Fetch

A propriedade type retorna o tipo da reposta. Este retorno é interessante, pois nem sempre a url estará disponível para requisições Fetch. Os tipos são os seguintes:

  • basic: resposta normal, mesma origem, com todos os cabeçalhos expostos, exceto "Set-Cookie" e "Set-Cookie2";
  • cors: a resposta foi recebida de uma solicitação de origem cruzada válida. Certos cabeçalhos e o corpo podem ser acessados;
  • error: erro de rede. Nenhuma informação útil que descreve o erro está disponível. O status da resposta é 0, os cabeçalhos são vazios e imutáveis. Este é o tipo de Resposta obtida em Response.error();
  • opaque: resposta para solicitação “sem cors” para recurso de origem cruzada. Severamente restrito; e
  • opaqueredirect: a solicitação de busca foi feita com redirect: "manual". O status da resposta é 0, os cabeçalhos estão vazios, o corpo é nulo e o trailer está vazio.

As API utilizadas nos exemplos são do tipo cors:

JS-0603 - JavaScript Completo ES6 - Fetch

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.