Entender o API handling com JavaScript é essencial para qualquer desenvolvedor frontend. Afinal, essa prática permite que aplicações interajam com servidores para buscar ou enviar dados. Neste guia, vamos explorar como realizar requisições HTTP usando Fetch e Axios, além de discutir o tratamento de erros e a integração com React. Prepare-se para dominar a comunicação entre sua aplicação e o mundo externo!
O que é uma API?
- Uma API (Interface de Programação de Aplicações) é um conjunto de definições e protocolos que permitem a comunicação entre diferentes componentes de software.
- As APIs são desenvolvidas utilizando diversas tecnologias, tais como:
- 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. Em JavaScript e React, essas requisições são comumente realizadas utilizando as APIs Fetch e Axios, ou por meio de bibliotecas como React Query ou TanStack Query.
Métodos HTTP
As APIs utilizam diferentes métodos HTTP, cada um com um propósito específico:
GET– Utilizado para obter dados do servidor.POST– Utilizado para enviar novos dados ao servidor.PUT– Utilizado para atualizar dados existentes, substituindo todo o recurso.PATCH– Utilizado para atualizar parcialmente um recurso existente.DELETE– Utilizado para remover dados do servidor.
Fazendo Requisições API em JavaScript
Fetch Method
A API Fetch é nativa do JavaScript e amplamente utilizada para interagir com APIs. Ela aceita dois argumentos: o endpoint da API e um objeto de opções para passar cabeçalhos, corpo da requisição, método, entre outros.
Para quem busca mais informações sobre programação, é possível encontrar um Curso de Certificação Adobe CC com 88% de Desconto.
Fetch com Requisição GET
Para realizar uma requisição GET com Fetch, utilize 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));
Fetch com Requisição POST
Para enviar dados com uma requisição POST, configure o objeto de opções:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // tipo de método GET, POST, PUT, POST, DELETE
headers: {
'Content-Type': 'application/json' // headers como referrer, bearer, content-type, custom headers, 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));
Tratamento de Erros com Fetch
É crucial tratar os erros ao fazer requisições. Veja como fazer isso com Fetch:
fetch('https://jsonplaceho.typicode.com/posts') // endpoint 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á o erro
Utilizando Try-Catch-Finally
Outra forma de lidar com erros é utilizando o 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); // executará independentemente de a resposta ser válida ou inválida, ou se o fetch falhar
}
}
getData()
Você pode rodar o código acima neste embed:
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 realizar uma requisição GET com Axios, utilize 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 com Requisição POST
Para enviar dados com uma requisição POST, configure o objeto de opções:
import axios from "axios"
// json body é 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));
Tratamento de Erros com Axios
Axios oferece um tratamento de erros mais detalhado, permitindo identificar diferentes cenários de falha:
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);
}
});
Utilizando Try-Catch-Finally com Axios
Assim como com Fetch, você pode usar o bloco try-catch-finally para um tratamento de erros mais estruturado:
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();
React (utilizando useEffect e useState)
Em React, é comum utilizar os hooks useEffect e useState para gerenciar o estado e realizar requisições API:
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;
Tanstack Query Library
A biblioteca Tanstack Query facilita o gerenciamento de estados e requisições, oferecendo hooks e recursos otimizados:
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
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;
Considerações Finais
O API handling com JavaScript e React envolve o uso de Fetch ou Axios para realizar chamadas API, o tratamento de diferentes métodos HTTP (GET, POST, PUT, DELETE), a implementação de um tratamento de erros adequado, o gerenciamento de cabeçalhos para autenticação, o uso de useEffect para chamadas API em React e o aproveitamento do React Query para um gerenciamento de estado eficiente.
Este conteúdo foi auxiliado por Inteligência Artificiado, mas escrito e revisado por um humano.
Via dev.to