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:

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.

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.

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.

⤧  Próximo NodeSchool.io BH - 2017 ⤧  Anterior Global Accessibility Awarenss Day 2017