Usando fetch API

Posted by Bruno Pulis on 17-08-2017

Logo do Javascript

E ai pessoal, tudo bom? Neste post vamos aprender a utilizar a fetchAPI o novo modelo para realizar requisições ajax.

A forma antiga

Antigamente para realizar uma consulta assincrona (Ajax) usariamos o modelo do objeto XMLHttpRequest, nossa requisição HTTP ficaria da seguinte forma:

1
2
3
4
5
6
7
8
var httpRequest;
// Mozilla, Safari
if (window.XMLHttpRequest)
httpRequest = new XMLHttpRequest();
else if (window.ActiveXObject)
// IE
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

Com o advento do jQuery a vida ficou um pouco mais fácil, pois o jQuery proveu uma nova forma de acessar dados assincronamente, atráves do metódo $.ajax().
Neste exemplo, o jQuery faz uma requisição no arquivo script.php, esperando que retorne um JSON da consulta.

1
2
3
4
5
6
var request = $.ajax({
url: "script.php",
method: "POST",
data: { id : menuId },
dataType: "json"
});

Usando a fetchAPI

De acordo com a definição do MDN, a fetchAPI é:

A Fetch API fornece uma interface para buscar recursos.
Parece familiar para qualquer um que tenha usado o XMLHttpRequest, mas a nova API oferece um conjunto de recursos mais poderoso e flexível.

Atualmente a fetchAPI é suportada em praticamente todos os browser’s modernos, você pode conferir a lista.
Uma coisa bastante interesssante é o fato de ser baseada em Promises. Vale lembrar que a fetchAPI retorna um Response com diversos metódos importantes, vamos utlizar o metódo json como resposta.

Para título de exemplo vamos consultar a Swapi uma API do mundo Star Wars.

Nosso objetivo e buscar o personagem Luke Skywalker.

1
2
3
4
5
6
7
8
9
10
const URL = "http://swapi.co/api/people/1" // Retorna Luke Skywalker
fetch(URL)
.then(function(res){
res.json().then(function(data){
console.log(data);
});
})
.catch(function(err){
console.error('Não foi possível achar a informação', err);
});

Explicando o exemplo

  • Na linha 1, eu declaro uma const com o valor da consulta que irá me retorna o Luke.
  • Na linha 2, utilizo o fetchAPI passando como paramêtro a URL definida.
  • Entre as linhas 3 a 6, crio uma Promise que espera uma resposta e converto essa resposta para JSON e exibido o resultado.
  • Caso ele não satisfaça as condições das linhas 3 a 6 ele entrará na linha 8 a 10 e mostrará um erro.

Conclusão

Utilizar a fetchAPI é uma maneira moderna e bem simples para realizar requisições Ajax para nossos projetos,
recentemente eu usei ela num projeto meu chamado Nasa Experiments que consulta uma API da Nasa e retorna fotos e videos dos satélites.

Tags em destaque