As chamadas de API são uma parte fundamental do desenvolvimento web moderno. JavaScript oferece diversas maneiras de realizar essa tarefa, cada uma com suas vantagens e desvantagens. Este artigo apresentará quatro métodos principais para fazer chamadas de API em JavaScript que você pode usar em seus projetos.

Solicitação XMLHttp (XHR)

XMLHttpRequest (XHR) é uma forma tradicional de chamar APIs, compatível com todas as versões de navegadores. Este método é confiável e amplamente utilizado, embora sua sintaxe às vezes possa ser mais difícil de ler e manter.

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(JSON.parse(xhr.responseText)); // Parse and log the response data
        } else {
            console.error('Error:', xhr.statusText); // Log any errors
        }
    }
};
xhr.send();

Buscar API

Fetch API é uma maneira mais moderna e simples de fazer chamadas de API, com base em promessas. Ele suporta operações assíncronas e é fácil de estender usando async e await.

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => console.log(data)) // Log the response data
    .catch(error => console.error('Error:', error)); // Log any errors

Usando assíncrono e aguardando.

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        const data = await response.json();
        console.log(data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

Eixos

Axios é uma biblioteca popular para solicitações HTTP que fornece uma interface simples e consistente para fazer chamadas de API. Ele precisa ser instalado primeiro usando npm ou yarn.
npm instala eixos
ou
fio adicionar axios

Então você pode usar o Axios para fazer chamadas de API:

const axios = require('axios');

axios.get("https://api.example.com/data")
    .then(response => {
        console.log(response.data); // Log the response data
    })
    .catch(error => {
        console.error('Error:', error); // Log any errors
    });

Usando assíncrono e aguardando:

async function fetchData() {
    try {
        const response = await axios.get("https://api.example.com/data");
        console.log(response.data); // Log the response data
    } catch (error) {
        console.error('Error:', error); // Log any errors
    }
}
fetchData();

jQuery AJAX

jQuery AJAX é um método para fazer chamadas de API usando a biblioteca jQuery. Embora o jQuery seja menos usado atualmente, ele ainda aparece em projetos mais antigos.

Foto fonte:
RAKOZY, Greg. Livros de design de sites. On-line. Em: Unsplash. 2016. Disponível em: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [cit. 16/07/2024].