01:09
Урок 44: Работа с API

Курс по программированию на JavaScript

Урок 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 для получения и отображения данных.

Категория: JavaScript | Просмотров: 9 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: