В этой статье вы узнаете, как извлекать данные из API с помощью функции fetch() в Javascript

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

Но зачем вам такой навык?

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

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

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

В этой статье мы рассмотрим, как можно использовать Javascript для извлечения данных из REST API.

Обзор сегодняшнего учебника

Сегодня мы рассмотрим REST (Representational State Transfer) API. Это архитектурный стиль, который обычно используется для создания веб-сервисов, доступ к которым можно получить через HTTP-запросы.

Эти запросы обычно возвращают данные в формате JSON (нотация объектов JavaScript), которые затем можно проанализировать и использовать в приложении.

Помимо REST API, вы также можете найти другие API, каждый со своим набором правил и протоколов.

Например, несколько примеров включают API-интерфейсы SOAP (простой протокол доступа к объектам), которые используют XML (расширяемый язык разметки) для обмена данными, и они обычно требуют больше накладных расходов, чем API-интерфейсы REST.

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

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

Существует также множество API-интерфейсов для конкретных платформ, таких как API Google Maps, API Twitter и API Facebook, которые обеспечивают доступ к функциям, зависящим от платформы.

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

Итак, сегодня мы просто рассмотрим REST и функцию fetch(), которая отправляет HTTP-запрос к конечной точке API и возвращает обещание, которое разрешается в объект ответа.

REST — это наиболее распространенный архитектурный стиль, который вы найдете, и отличная отправная точка для начинающих.

Шаг 1. Найдите конечную точку API

Первый шаг — найти конечную точку REST API, которую вы хотите использовать.

В этом примере мы будем использовать API Pokemon с конечной точкой https://pokeapi.co/api/v2/pokemon/.

Эта конечная точка возвращает список всех покемонов в формате JSON вместе с их именами и URL-адресами на их отдельных страницах.

Вы должны иметь возможность просматривать данные JSON в своем браузере и получать приведенный ниже ответ, который вы заметите. /?offset=20&limit=20возвращается вместе с данными, это важно, и мы рассмотрим это в шаг 5

{"count":1281,"next":"https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20","previous":null,"results":[{"name":"bulbasaur","url":"https://pokeapi.co/api/v2/pokemon/1/"},{"name":"ivysaur","url":"https://pokeapi.co/api/v2/pokemon/2/"},{"name":"venusaur","url":"https://pokeapi.co/api/v2/pokemon/3/"},{"name":"charmander","url":"https://pokeapi.co/api/v2/pokemon/4/"},{"name":"charmeleon","url":"https://pokeapi.co/api/v2/pokemon/5/"},{"name":"charizard","url":"https://pokeapi.co/api/v2/pokemon/6/"},{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon/7/"},{"name":"wartortle","url":"https://pokeapi.co/api/v2/pokemon/8/"},{"name":"blastoise","url":"https://pokeapi.co/api/v2/pokemon/9/"},{"name":"caterpie","url":"https://pokeapi.co/api/v2/pokemon/10/"},{"name":"metapod","url":"https://pokeapi.co/api/v2/pokemon/11/"},{"name":"butterfree","url":"https://pokeapi.co/api/v2/pokemon/12/"},{"name":"weedle","url":"https://pokeapi.co/api/v2/pokemon/13/"},{"name":"kakuna","url":"https://pokeapi.co/api/v2/pokemon/14/"},{"name":"beedrill","url":"https://pokeapi.co/api/v2/pokemon/15/"},{"name":"pidgey","url":"https://pokeapi.co/api/v2/pokemon/16/"},{"name":"pidgeotto","url":"https://pokeapi.co/api/v2/pokemon/17/"},{"name":"pidgeot","url":"https://pokeapi.co/api/v2/pokemon/18/"},{"name":"rattata","url":"https://pokeapi.co/api/v2/pokemon/19/"},{"name":"raticate","url":"https://pokeapi.co/api/v2/pokemon/20/"}]}

Шаг 2. Сделайте запрос API

Чтобы сделать запрос к API Pokemon с помощью функции fetch(), вам просто нужно вызвать его с URL-адресом конечной точки API:

fetch('https://pokeapi.co/api/v2/pokemon/')
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle any errors
  });

Этот код отправляет запрос GET в конечную точку Pokemon API и возвращает обещание, которое разрешается в объект ответа.

Затем вы можете использовать метод .then() для обработки ответа и метод .catch() для обработки любых ошибок, которые могут возникнуть.

Шаг 3: Анализ данных JSON

Объект ответа, возвращаемый функцией fetch(), содержит данные JSON, возвращаемые API.

Чтобы получить доступ к этим данным, вам нужно разобрать их с помощью метода json(), который также возвращает Promise:

fetch('https://pokeapi.co/api/v2/pokemon/')
  .then(response => response.json())
  .then(data => {
    // Handle the parsed JSON data
  })
  .catch(error => {
    // Handle any errors
  });

Сначала вызывается метод json() объекта ответа для анализа данных JSON, а затем используется другой метод .then() для обработки проанализированных данных. Опять же, вы можете использовать метод .catch() для обработки любых ошибок, которые могут возникнуть.

Шаг 4: Используйте данные

После того, как вы проанализировали данные JSON, вы можете использовать их в своем приложении JavaScript по мере необходимости.

Например, вы можете прокрутить список покемонов и записать их имена в консоль, создав свой собственный покедекс на javascript:

fetch('https://pokeapi.co/api/v2/pokemon/')
  .then(response => response.json())
  .then(data => {
    data.results.forEach(pokemon => {
      console.log(pokemon.name);
    });
  })
  .catch(error => {
    console.error(error);
  });

Это перебирает массив results в проанализированных данных JSON и записывает имя каждого покемона в консоль (теперь это много покемонов).

Шаг 5. Создайте покедекс

Итак, давайте применим наш код на практике, вы, возможно, помните из шага 1, что исходные данные останавливаются после 20 записей.

Это связано с тем, что PokeAPI возвращает результаты с разбивкой на страницы с ограничением по умолчанию в 20 записей на странице.

Это обычная практика для многих API, и вы часто сталкиваетесь с этим в реальном мире.

Чтобы получить более 20 записей, вам нужно указать количество записей, которые вы хотите получить, используя параметр limit, а также вы можете указать, какую страницу получить, используя параметр offset.

const limit = 151;
const url = `https://pokeapi.co/api/v2/pokemon?limit=${limit}`;

Вот пример конечного решения, вы также можете поиграть с этим, посетив этот codepen — https://codepen.io/bferdi/pen/zYJeMjZ

<!DOCTYPE html>
<html>
  <head>
    <title>Kanto pokeList Example</title>
  </head>
  <body>
    <h1>Kanto</h1>
    <ul id="pokemonList"></ul>

    <script>
      const limit = 151;
      const url = `https://pokeapi.co/api/v2/pokemon?limit=${limit}`;

      fetch(url)
        .then(response => response.json())
        .then(data => {
          const pokemonList = document.getElementById("pokemonList");

          data.results.forEach(pokemon => {
            const li = document.createElement("li");
            li.innerText = pokemon.name;
            pokemonList.appendChild(li);
          });
        })
        .catch(error => {
          console.error(error);
        });
    </script>
  </body>
</html>

Заключение

Так вот молодец!

В этом руководстве показано, как извлекать данные из REST API в JavaScript с помощью функции fetch().

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

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.