08.11.2023 в 17:20

Как вызвать API в JavaScript – с примерами

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

В этом уроке я шаг за шагом покажу вам процесс выполнения вызовов API в JavaScript. К концу этой статьи вы получите четкое представление о том, как взаимодействовать с API в ваших проектах JavaScript.

Что такое API?

Прежде чем мы углубимся в технические детали вызова API в JavaScript, давайте начнем с основ. API, или интерфейс прикладного программирования, похож на мост, который позволяет двум различным программным системам взаимодействовать друг с другом. Он определяет набор правил и протоколов для запроса и обмена данными.

API-интерфейсы можно использовать для получения информации из внешних источников, отправки данных во внешние службы или выполнения различных других действий. Они широко используются в веб-разработке для доступа к данным из различных онлайн-сервисов, таких как платформы социальных сетей, данные о погоде, финансовая информация и многое другое.

Как выбрать API

Первый шаг при вызове API — выбор того, который соответствует вашим потребностям. Доступно бесчисленное множество API, предоставляющих данные по широкому кругу тем.

Некоторые из популярных типов API включают в себя:

API-интерфейсы RESTful: они широко используются для простого извлечения данных и манипулирования ими. Они используют стандартные методы HTTP, такие как GET, POST, PUT и DELETE.
Сторонние API: Многие онлайн-сервисы предлагают API, которые позволяют вам получать доступ к их данным, например API Twitter для твитов или API Карт Google для данных о местоположении.
API-интерфейсы погоды: Если вам нужны данные о погоде, хорошим выбором станут такие API, как OpenWeatherMap или WeatherAPI.
Финансовые API: Чтобы получить финансовые данные, например цены на акции, вы можете использовать такие API, как Alpha Vantage или Yahoo Finance.

В этом руководстве мы будем использовать вымышленный RESTful API в качестве примера, чтобы упростить задачу. Вы можете заменить его API по вашему выбору.

Как использовать Fetch API для запросов GET

Для выполнения запросов к API в JavaScript вы можете использовать fetch API, встроенный в современные браузеры. Это API на основе обещаний, который позволяет легко отправлять HTTP-запросы и асинхронно обрабатывать ответы.

Вот как сделать запрос GET, используя fetch:

// Define the API URL
const apiUrl = 'https://api.example.com/data';

// Make a GET request
fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

В приведенном выше коде:

Мы определили URL-адрес API, который хотим вызвать.
Мы использовали эту fetch функцию для выполнения запроса GET к URL-адресу API. Функция fetch возвращает обещание.
Метод .then() обрабатывает асинхронный ответ от сервера.
Свойство response.ok проверяется, чтобы убедиться в корректности ответа.
Мы анализируем данные JSON, используя response.json() метод.
Наконец, мы записываем данные в консоль или обрабатываем любые ошибки, которые могут возникнуть.

Как обрабатывать ответы

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

Вот модифицированный пример, который отображает данные API в элементе HTML:

const apiUrl = 'https://api.example.com/data';
const outputElement = document.getElementById('output');

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    // Display data in an HTML element
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

В этом примере мы используем outputElement переменную для выбора элемента HTML, в котором мы хотим отобразить данные. Свойство textContent используется для обновления содержимого этого элемента данными JSON.

Обработка ошибок в вызовах API

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

В наших предыдущих примерах мы использовали fetch обработку ошибок на основе обещаний для перехвата и обработки ошибок.

Помимо блокировки catch, вы также можете проверить код состояния HTTP, используя response.status для определения характера ошибки. Вот как вы можете это сделать:

const apiUrl = 'https://api.example.com/data';

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error('Data not found');
      } else if (response.status === 500) {
        throw new Error('Server error');
      } else {
        throw new Error('Network response was not ok');
      }
    }
    return response.json();
  })
  .then(data => {
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

В этом примере мы проверяем определенные коды состояния HTTP (например, 404 и 500) и предоставляем более описательные сообщения об ошибках. Вы можете настроить обработку ошибок в соответствии с потребностями вашего приложения.

Как делать POST-запросы

До сих пор мы сосредоточились на выполнении запросов GET, которые используются для получения данных из API. Но вам также может потребоваться отправить данные в API, что вы можете сделать с помощью запросов POST.

Вот как сделать простой запрос POST, используя fetch:

const apiUrl = 'https://api.example.com/data';
const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
};

const requestOptions = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
};

fetch(apiUrl, requestOptions)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error

('Error:', error);
  });

В этом примере:

Мы определили URL-адрес API и данные, которые хотим отправить в виде объекта.
Мы создали requestOptions объект, который определяет метод (POST), тип контента (application/json) и данные для отправки в формате JSON.
Мы передали requestOptions объект функции fetch.

Остальная часть кода остается такой же, как в наших предыдущих примерах, с обработкой ошибок и обработкой данных.

Как работать с ключами API

Многие API требуют аутентификации с помощью ключей API, чтобы гарантировать, что только авторизованные пользователи смогут получить доступ к своим данным. При работе с API, для которых требуются ключи API, вам необходимо включать ключ в свои запросы.

Вот пример того, как включить ключ API в запрос:

const apiKey = 'your_api_key_here';
const apiUrl = 'https://api.example.com/data';

const requestOptions = {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${apiKey}`,
  },
};

fetch(apiUrl, requestOptions)
  .then(response => {
    if !response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    outputElement.textContent = JSON.stringify(data, null, 2);
  })
  .catch(error => {
    console.error('Error:', error);
  });

В этом примере мы определяем переменную apiKey и включаем ее в headers объект requestOptions с префиксом «Bearer». Обязательно замените 'your_api_key_here' действительным ключом API.

Асинхронный JavaScript

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

Для обработки асинхронных операций мы используем промисы и .then() метод, указывающий, что должно произойти после завершения операции. Это позволяет основному потоку вашего приложения JavaScript продолжать выполнение других задач, ожидая ответа API.

Вот краткий обзор того, как работает асинхронный JavaScript:

Когда вы вызываете fetch, он инициирует асинхронную операцию и немедленно возвращает промис.

Вы используете этот .then() метод для присоединения функций, которые должны выполняться, когда промис выполняется успешно (с ответом) или не удается (с ошибкой).

Любой код за пределами .then() блоков может продолжать работать, пока выполняется вызов API.

Такое асинхронное поведение помогает гарантировать, что ваше приложение будет отвечать на запросы и не зависнет в ожидании данных.

Реальные примеры вызовов API

Теперь, когда мы рассмотрели основы выполнения вызовов API в JavaScript, давайте рассмотрим пару реальных примеров, чтобы увидеть, как эти знания можно применить на практике.

Пример 1: Получение данных о погоде

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

Вот как вы можете сделать запрос GET для получения данных о погоде и отображения их на веб-странице:

const apiKey = 'your_openweathermap_api_key';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${apiKey}`;

const outputElement = document.getElementById('weather-output');

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    const temperature = data.main.temp;
    const description = data.weather[0].description;
    const location = data.name;
    outputElement.innerHTML = `<p>Temperature in ${location}: ${temperature}°C</p>
                               <p>Weather: ${description}</p>`;
  })
  .catch(error => {
    console.error('Error:', error);
  });

В этом примере мы делаем запрос GET к API OpenWeatherMap, передаем ключ API в качестве параметра в URL-адресе и отображаем описание температуры и погоды на веб-странице.

Пример 2. Отправка формы на сервер

Предположим, на вашем веб-сайте есть простая контактная форма, и вы хотите отправить данные формы на сервер для обработки. Вот как вы можете сделать запрос POST для отправки данных формы на сервер:

HTML:

<form id="contact-form">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>
<div id="response-message"></div>

JavaScript:

const apiUrl = 'https://api.example.com/submit';

const contactForm = document.getElementById('contact-form');
const responseMessage = document.getElementById('response-message');

contactForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const formData = new FormData(contactForm);

  const requestOptions = {
    method: 'POST',
    body: formData,
  };

  fetch(apiUrl, requestOptions)
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.text();
    })
    .then(data => {
      responseMessage.textContent = data;
    })
    .catch(error => {
      console.error('Error:', error);
    });
});

В этом примере мы прослушиваем событие отправки формы, предотвращаем отправку формы по умолчанию и используем его FormData для сериализации данных формы. Затем мы делаем POST-запрос к серверу, отправляем данные формы и отображаем ответ сервера.

Заключение

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

В этом подробном руководстве мы рассмотрели основные концепции и методы, включая выполнение запросов GET и POST, обработку ответов и ошибок, а также работу с ключами API. Вы также увидели два практических примера, демонстрирующих, как получить данные о погоде и отправить данные формы на сервер.

Продолжая работать с API в своих проектах, вы столкнетесь с различными API с их уникальными требованиями и документацией. Помните, что API могут иметь ограничения по скорости, политике использования и ограничениям, поэтому всегда просматривайте документацию API, чтобы убедиться, что вы используете его правильно и ответственно.

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

Источник:

How to Call an API in JavaScript – with Examples

#JavaScript

Войти на сайт