TypeScript:
Enviando uma requisição HTTP
How to:
Para enviar uma requisição HTTP em TypeScript, você pode usar a API fetch nativa ou bibliotecas como Axios. Vamos ver um exemplo simples com fetch e outro com Axios:
// Exemplo com Fetch API
fetch('https://api.exemplo.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Fetch error:', error));
// Exemplo com Axios
import axios from 'axios';
axios.get('https://api.exemplo.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Axios error:', error));O fetch retorna uma promessa que, quando resolvida, te dá acesso aos dados da requisição. O Axios simplifica um pouco o processo, tratando automaticamente a conversão para JSON.
Deep Dive
O envio de requisições HTTP é um dos pilares da comunicação na web, surgindo com a própria internet. Antes de fetch e Axios, o objeto XMLHttpRequest era comumente usado, mas seu uso caiu em desuso por causa da sintaxe mais complexa e menos intuitiva.
Outras bibliotecas, como o jQuery, também ofereceram suas soluções para realizar requisições, mas com o avanço das APIs nativas de JavaScript e do suporte dos navegadores, muitos desenvolvedores migraram para soluções mais modernas e leves.
Quanto aos detalhes de implementação, é importante entender conceitos como CORS (Cross-Origin Resource Sharing), que é uma política de segurança da web. Ela restringe como recursos podem ser carregados de diferentes origens, o que é crucial quando se lida com APIs de terceiros.