Урок 44: Работа с API
API (Application Programming Interface) позволяет приложениям взаимодействовать друг с другом. Веб-API позволяют веб-приложениям обмениваться данными с серверами или другими веб-приложениями. В этом уроке мы рассмотрим подключение к сторонним API и обработку данных от API.
Подключение к сторонним API
Для подключения к сторонним API в JavaScript используется объект fetch, который позволяет делать HTTP-запросы. Рассмотрим пример подключения к API и получения данных:
// Подключение к API и получение данных
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Ошибка:', error);
});
// Данные получены и выведены в консоль
В этом примере мы используем fetch для выполнения GET-запроса к API. Ответ преобразуется в формат JSON и выводится в консоль. Если возникает ошибка, она обрабатывается в блоке catch.
Обработка данных от API
После получения данных от API их нужно обработать и отобразить на веб-странице. Рассмотрим пример обработки и отображения данных:
// Получение и отображение данных
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
const container = document.getElementById('data-container');
data.forEach(item => {
const div = document.createElement('div');
div.textContent = `ID: ${item.id}, Name: ${item.name}`;
container.appendChild(div);
});
})
.catch(error => {
console.error('Ошибка:', error);
});
// Данные отображены в контейнере
В этом примере мы получаем данные от API и создаем элементы div для каждого элемента данных. Эти элементы добавляются в контейнер с ID data-container.
Упражнения
Упражнение 1: Получение и отображение данных о погоде
Используйте API для получения данных о текущей погоде в вашем городе. Отобразите температуру, влажность и описание погоды на веб-странице.
Решение:
// Получение данных о погоде
fetch('https://api.openweathermap.org/data/2.5/weather?q=London&appid=YOUR_API_KEY&units=metric')
.then(response => response.json())
.then(data => {
const container = document.getElementById('weather-container');
const temp = document.createElement('div');
const humidity = document.createElement('div');
const description = document.createElement('div');
temp.textContent = `Temperature: ${data.main.temp}°C`;
humidity.textContent = `Humidity: ${data.main.humidity}%`;
description.textContent = `Weather: ${data.weather[0].description}`;
container.appendChild(temp);
container.appendChild(humidity);
container.appendChild(description);
})
.catch(error => {
console.error('Ошибка:', error);
});
// Температура: 15°C
// Влажность: 82%
// Погода: облачно с прояснениями
Объяснение: Мы использовали API OpenWeatherMap для получения данных о погоде и отображения их на веб-странице. Обратите внимание, что необходимо заменить YOUR_API_KEY на ваш собственный API-ключ.
Упражнение 2: Получение и отображение списка пользователей
Используйте API для получения списка пользователей и отображения их имен и email на веб-странице.
Решение:
// Получение списка пользователей
fetch('https://jsonplaceholder.typicode.com/users')
.then(response => response.json())
.then(data => {
const container = document.getElementById('users-container');
data.forEach(user => {
const div = document.createElement('div');
div.textContent = `Name: ${user.name}, Email: ${user.email}`;
container.appendChild(div);
});
})
.catch(error => {
console.error('Ошибка:', error);
});
// Name: Leanne Graham, Email: Sincere@april.biz
// Name: Ervin Howell, Email: Shanna@melissa.tv
// ...
Объяснение: Мы использовали API JSONPlaceholder для получения списка пользователей и отображения их имен и email на веб-странице. Этот пример демонстрирует базовую работу с API для получения и отображения данных.