Entender o API handling com JavaScript é crucial para qualquer desenvolvedor frontend. Este guia prático explora como fazer requisições HTTP para buscar e enviar dados, utilizando métodos como Fetch e Axios, além de abordar o tratamento de erros. Prepare-se para dominar a comunicação entre sua aplicação e o servidor, elevando suas habilidades de desenvolvimento a um novo nível.
O que é API?
Uma API (Interface de Programação de Aplicações) é um conjunto de definições e protocolos que permite a comunicação entre dois componentes de software. Pense nela como um contrato que define como diferentes partes de um sistema podem interagir. Algumas tecnologias comuns para criar APIs incluem:
- JavaScript (com o framework Express)
- Python (com o framework Django)
- Go (com o framework Gin)
- Java (com o framework Spring Boot)
- C# (com o framework ASP.NET Core)
O que é API Handling?
API handling com JavaScript refere-se ao processo de fazer requisições HTTP para um servidor, seja para buscar ou enviar dados. No universo do JavaScript e React, essas chamadas são geralmente feitas utilizando o Fetch, Axios, ou bibliotecas como React Query ou TanStack Query. Dominar essas ferramentas é essencial para construir aplicações web dinâmicas e interativas.
Métodos HTTP
As APIs utilizam diferentes métodos HTTP, cada um com um propósito específico:
GET– Recupera dados do servidor.POST– Envia novos dados para o servidor.PUT– Atualiza dados existentes (substitui todo o recurso).PATCH– Atualiza parte de um recurso existente.DELETE– Remove dados do servidor.
Entender esses métodos é fundamental para interagir corretamente com as APIs e garantir que as operações sejam realizadas da maneira esperada.
Fazendo Requisições API em JavaScript
Método Fetch
O método Fetch nativo é amplamente utilizado para interagir com APIs. Ele aceita dois argumentos: o endpoint da API e um objeto de opções para passar cabeçalhos, corpo da requisição, método, etc.
Método Fetch com Requisição GET
Para fazer uma requisição GET, você pode usar o seguinte código:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => scrib.show(data))
.catch(error => scrib.show('Error:', error));
Este código busca um post específico do servidor e exibe os dados. O método .then() é usado para lidar com a resposta, e .catch() para tratar qualquer erro que possa ocorrer.
Método Fetch com Requisição POST
Para enviar dados para o servidor, utilize uma requisição POST:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // tipo de método GET, POST, PUT, POST, DELETE
headers: {
'Content-Type': 'application/json' // cabeçalhos como referrer, bearer, content-type, cabeçalhos personalizados, etc.
},
// corpo da requisição POST que estamos enviando para a api
body: JSON.stringify({
title: 'Javascript is awesome',
body: 'Did you know you could write html and javascript combined in scribbler',
userId: 1
})
})
.then(response => response.json())
.then(data => scrib.show(data))
.catch(error => scrib.show('Error:', error));
Neste exemplo, um novo post é criado com um título, corpo e ID de usuário específicos. O cabeçalho Content-Type é definido como application/json para indicar que os dados estão sendo enviados no formato JSON.
Tratamento de Erros com o Método Fetch
É crucial tratar erros ao fazer requisições API. Veja como:
fetch('https://jsonplaceho.typicode.com/posts') // endpoint da api incorreto
.then(response => response.json())
.then(data => scrib.show(data))
.catch(error => scrib.show('Error:', error)); // executará este bloco de código e lançará um erro
Este código tenta buscar dados de um endpoint incorreto, o que resultará em um erro capturado pelo bloco .catch().
Lidando com API com Bloco Try Catch Finally
Uma abordagem mais robusta para o tratamento de erros é usar um bloco try...catch...finally:
async function getData() {
try {
let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
if (!response.ok) throw new Error('Network response was not ok'); // retorna booleano para respostas válidas/inválidas
let data = await response.json();
scrib.show(data)
} catch (error) {
scrib.show('Fetch error:', error); // tratará o erro se o fetch falhar
} finally {
scrib.show(Fetch request is done); // será executado não importa se uma resposta é válida ou inválida ou se o fetch falha
}
}
getData()
Neste exemplo, o bloco try tenta fazer a requisição. Se houver um erro, o bloco catch o captura. O bloco finally é sempre executado, independentemente de haver ou não um erro. Além disso, você pode conferir como maximizar a duração da bateria do seu Android com algumas dicas.
Axios
Axios é uma biblioteca JavaScript que simplifica o API handling com JavaScript e oferece um melhor tratamento de erros.
Axios com Requisição GET
Para fazer uma requisição GET com Axios, use o seguinte código:
import axios from "axios"
// todos os métodos http podem ser encadeados com axios
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => scrib.show(response.data))
.catch(error => scrib.show('Error:', error));
Axios simplifica a obtenção de dados e o tratamento de erros, tornando o código mais limpo e fácil de entender.
Axios com Requisição POST
Para enviar dados com Axios, utilize uma requisição POST:
import axios from "axios"
// o corpo json é passado separadamente como segundo argumento e o restante das opções como terceiro argumento
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'Javascript is awesome',
body: 'Did you know you could write html and javascript combined in scribbler',
userId: 1
}, {
headers: { 'Content-Type': 'application/json' }
})
.then(response => scrib.show(response.data)) // converte automaticamente a resposta para o formato json
.catch(error => scrib.show('Error:', error));
Axios facilita o envio de dados, separando o corpo da requisição das opções de cabeçalho.
Tratamento de Erros com Axios
Axios oferece um tratamento de erros mais detalhado:
import axios from "axios"
axios.get('https://jsonpl.typicode.com/posts') // url incorreta
.then(response => scrib.show(response.data))
.catch(error => {
// possui múltiplas respostas de erro para diferentes cenários
if (error.response) {
scrib.show('Server responded with:', error.response.status);
} else if (error.request) {
scrib.show('No response received');
} else {
scrib.show('Error setting up request:', error.message);
}
});
Este código demonstra como Axios pode fornecer informações detalhadas sobre o erro, como o status da resposta do servidor ou a ausência de resposta.
Lidando com API com Bloco Try Catch Finally
Assim como com Fetch, você pode usar um bloco try...catch...finally com Axios:
import axios from "axios";
const fetchData = async () => {
try {
const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
console.log("Data fetched successfully:", response.data);
return response.data;
} catch (error) {
console.error("Error fetching data:", error.response?.data || error.message);
return null;
} finally {
console.log("Fetch is done")
}
};
fetchData();
Este exemplo mostra como capturar e tratar erros de forma eficaz ao usar Axios, garantindo que seu aplicativo lide bem com falhas na requisição.
React (Usando useEffect e useState)
Em React, useEffect e useState são frequentemente usados para buscar dados de APIs. Veja como:
import { useEffect,useState } from 'react';
function Posts() {
// Criando estados para dados e mensagens de erro
const [posts, setPosts] = useState([]);
const [error, setError] = useState(null);
// Realizando a busca de dados no useEffect, será executado apenas uma vez no carregamento da página
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => {
if (!response.ok) {
throw new Error('Failed to fetch');
}
return response.json();
})
.then(data => setPosts(data))
.catch(error => setError(error.message));
}, []);
if (error) return <p>Error: {error}</p>;
return (
<div>
<h2>Posts</h2>
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export default Posts;
Este código busca posts de uma API e os exibe em uma lista. O useEffect garante que a requisição seja feita apenas uma vez, quando o componente é montado.
Tanstack Query Library
A biblioteca Tanstack Query oferece uma maneira eficiente de gerenciar o estado ao buscar dados em React:
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';
// busca os dados e retorna
const fetchPosts = async () => {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
return data;
};
function Posts() {
// tanstack possui estados de dados, erro e carregamento integrados
const { data: posts, error, isLoading } = useQuery({ queryKey: ['posts'], queryFn: fetchPosts });
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
export default Posts;
Com Tanstack Query, você pode gerenciar facilmente os estados de carregamento, erro e dados, simplificando o código e melhorando a experiência do usuário.
Compreender e aplicar essas técnicas de API handling com JavaScript é essencial para qualquer desenvolvedor que deseja criar aplicações web modernas e eficientes. Dominar o Fetch, Axios, e bibliotecas como React Query, permite construir interfaces dinâmicas e responsivas, capazes de interagir com servidores de forma eficaz. Não deixe de conferir também cinco filmes subestimados na Netflix para assistir em março de 2025.
Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.
Via dev.to