A Fetch API é uma interface nativa do JavaScript que permite realizar requisições HTTP sem a necessidade de instalar bibliotecas de código, como por exemplo, a biblioteca Axios.
Neste artigo você vai aprender a utilizar a Fetch API através de exemplos práticos somente com HTML e JavaScript.
API
Foi escolhido uma API gratuita com a temática do desenho animado "Ricky and Morty" que nos permitirá carregar dados de um endpoint real.
HTML
Para o exemplo desse artigo, teremos a seguinte estrutura HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Como consumir uma API no JavaScript com a Fetch API</title>
</head>
<body>
<button id="load-from-api">Carregar dados</button>
<button id="load-all-characters">Carregar todos os personagens</button>
<script src="./app.js"></script>
</body>
</html>
É uma marcação de conteúdo simples, dentro da tag Body se tem dois botões nos quais vamos adicionar eventos de "click" no arquivo app.js que é importado logo abaixo os botões nesse código HTML.
JavaScript
Dentro do arquivo app.js, será realizado os seguintes passos:
- Capturar o elemento da DOM com id "load-from-api" e armazenar em uma variável chamada loadDataBtn.
- Obter a tag HTML da DOM com o id "load-all-characters"
- Armazenar a Url da Api do "Rick and Morty" em uma variável chamada "BASE_URL"
- Adicionar o "listener" de evento de click no elemento "loadDataBtn" e "loadAllCharactersBtn"
const loadDataBtn = document.getElementById("load-from-api");
const loadAllCharactersBtn = document.getElementById("load-all-characters");
const BASE_URL = "https://rickandmortyapi.com/api/character";
loadDataBtn.addEventListener("click", () => {
// Algum código aqui
});
loadAllCharactersBtn.addEventListener("click", () => {
// Algum código aqui
});
Carregando dados da Api com a Fetch Api
Vamos trabalhar dentro da função que é executada ao clicar no elemento com id "load-from-api", mas antes disso é necessário salientar que a Fetch API retorna uma Promise, na qual podemos lidar com ela de duas formas:
- Utilizando Async/Await
- Utilizando a forma tradicional de lidar com Promises com o ".then"
Vamos utilizar o Async/Await, onde o async será colocado antes da função que lida com o evento de Click e o Await é colocado antes da chamada da Fetch Api:
loadAllCharactersBtn.addEventListener("click", async () => {
const apiResponse = await fetch(BASE_URL);
});
Quando se está trabalhando com a Fetch Api, também se faz necessário tratar os dados retornos da API. Nesse exemplo a API retorna JSON, então precisamos tratar o dado como JSON. Importante observar que a função no JavaScript para tratar dados em JSON também retorna uma Promise, por esse motivo também se faz necessário utilizar o await.
No exemplo foi executado os passos acima mencionados e o dado já preparado para utilização dentro do código JavaScript foi armazenado na variável: "parsedResponse".
loadDataBtn.addEventListener("click", async () => {
const apiResponse = await fetch(BASE_URL);
const parsedResponse = await apiResponse.json();
console.log("parsedResponse");
console.log(parsedResponse);
});