Вызовы API — ключевая часть современной веб-разработки. JavaScript предлагает несколько способов решения этой задачи, каждый из которых имеет свои преимущества и недостатки. Эта статья познакомит вас с четырьмя основными методами выполнения вызовов API в JavaScript, которые вы можете использовать в своих проектах.

XMLHttpRequest (XHR)

XMLHttpRequest (XHR) — это традиционный способ вызова API, поддерживаемый во всех версиях браузера. Этот метод надежен и широко используется, хотя его синтаксис иногда бывает сложнее читать и поддерживать.

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();

Получить API

Fetch API — это более современный и простой способ выполнения вызовов API, основанный на обещаниях. Он поддерживает асинхронные операции и его легко расширить с помощью async и 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

Использование async и ожидания.

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();

Аксиос

Axios — популярная библиотека для HTTP-запросов, предоставляющая простой и согласованный интерфейс для выполнения вызовов API. Сначала его необходимо установить с помощью npm или Yarn.
npm установить аксиос
или
пряжа добавить аксиомы

Тогда вы можете использовать Axios для вызовов 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
    });

Использование async и ожидания:

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 — это метод выполнения вызовов API с использованием библиотеки jQuery. Хотя сегодня jQuery используется реже, он все еще встречается в старых проектах.

Исходное фото:
РАКОЗИ, Грег. Книги по веб-дизайну. Онлайн. В: Unsplash. 2016. Доступно по адресу: https://unsplash.com/photos/html-css-book-vw3Ahg4x1tY. [цит. 16 июля 2024 г.