JavaScript: Как использовать API «Звездных войн» для начинающих

Да пребудет с вами 4-е число! В этой статье, в честь Дня Звездных Войн, я изучил и поэтапно описал процесс использования Star Wars API для отображения информации на ванильном JavaScript-сайте!

Введение

До сих пор мне удавалось откладывать изучение работы с API во время моего самостоятельного путешествия по кодингу. Поскольку на этой неделе отмечается День Звездных Войн, «4 мая», я решил, что это отличное время, чтобы научиться работать с ними, начав с использования API Star Wars!

Что такое API

Википедия объясняет: «Интерфейс прикладного программирования (API) — это связь между компьютерами или между компьютерными программами».

API «Звездных войн

Star Wars API содержит данные из первых семи фильмов «Звездные войны», включая планеты, космические корабли, транспортные средства, людей, фильмы и виды.

Star Wars API — это открытый API, то есть общедоступный интерфейс прикладного программирования, и для его использования не требуется аутентификация.

Поскольку Star Wars API является открытым API, нам не нужен маркер доступа, что упрощает процесс подключения.

Как использовать API Star Wars

Мы будем обращаться к Star Wars API с помощью метода JavaScript fetch(), который возвращает обещание, выполняемое после получения ответа.

Ответ представляет собой объект, который мы затем преобразуем в JSON с помощью метода json().

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

Подключение к API Star Wars

JSON (JavaScript Object Notation) — это стандартный формат данных, который Star Wars API предоставляет по умолчанию.

По определению Википедии, «JSON — это открытый стандартный формат файлов и формат обмена данными, который использует человекочитаемый текст для хранения и передачи объектов данных, состоящих из пар атрибут-значение и массивов».

Я написал асинхронные функции javascript для получения данных JSON из API Star Wars.

Для более детального изучения работы с файлами JSON здесь представлена полезная информация, предоставленная Mozilla.

Асинхронные функции

Mozilla определяет: «Асинхронная функция — это функция, объявленная с ключевым словом async, внутри которой разрешено использовать ключевое слово await. Ключевые слова async и await позволяют писать асинхронное поведение, основанное на обещаниях, в более чистом стиле, избегая необходимости явно настраивать цепочки обещаний».

Следующий код — это асинхронная функция, которую я написал в качестве простой демонстрации.

Шаги:

• fetch() для получения данных
• json() для преобразования данных
• console.log() для просмотра данных

async function fetchPlanets() { 
  const results = await fetch("https://swapi.dev/api/planets/?page=1");
  const data = await results.json();
    console.log(data);
} 
fetchPlanets();

Если вы скопируете этот код и вставите его в редактор кода, например, CodePen, вы увидите результаты из API Star Wars в «console.log».

Эта функция получает данные с первой страницы «Планеты». Когда они получены, результаты сохраняются в переменной «data», а затем выводятся на консоль для просмотра.

Установка данных в переменные

Развивая первый пример, давайте установим переменные на данные count, next и previous на первой странице «Планеты» API Star Wars и выведем результаты на консоль.

async function fetchPlanets() { 
  let results = await fetch("https://swapi.dev/api/planets/?page=1");
  const data = await results.json();
    console.log(data);
  let count = data.count;
  let next = data.next;
  let previous = data.previous;
    console.log(count);
    console.log(next);
    console.log(previous);
} 
fetchPlanets();

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

Следует отметить несколько моментов:

• Сначала данные должны быть преобразованы в JSON, чтобы установить их в переменные.
• В этом примере переменные объявлены внутри функции, что означает, что переменные не являются глобальными. Чтобы пояснить, если вы объявите переменные в консольном журнале вне функции «fetchPlanets», вы получите ошибку «не определено».

Получение данных «Планеты»

Функция «fetchPlanets» извлекает данные с первой страницы «Планеты». Каждая из страниц «Планеты» содержит 10 планет.

Эти 10 планет находятся в массиве результатов. Чтобы просмотреть информацию о первой планете, добавим в функцию «fetchPlanets» следующий код: console.log(data.results[0]).

async function fetchPlanets() { 
  let results = await fetch("https://swapi.dev/api/planets/?page=1");
  const data = await results.json();
    console.log(data);
  let count = data.count;
  let next = data.next;
  let previous = data.previous;
    console.log(count);
    console.log(next);
    console.log(previous);

    console.log(data.results[0]);
} 
fetchPlanets();

Внутри функции «fetchPlanets» мы можем создать переменную «name» и вывести результат на консоль следующим образом:

let name = data.results[0].name;
console.log(name);

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

Доступ ко всем планетам на каждой странице

Каждая страница «Планеты» содержит 10 записей планет соответственно. Для доступа к ним мы будем использовать метод JavaScript forEach().

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

let planets = data.results;

Затем, чтобы просмотреть названия каждой из планет, мы напишем цикл for each следующим образом:

    planets.forEach(item => {
      console.log(item.name);
    });

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

Примечание: Чтобы сохранить этот проект простым, я не использую поля, содержащие URL и вложенные элементы, такие как «жители».

Вот готовый пример функции «fetchPlanets». Вы можете скопировать этот код в редактор кода, например CodePen, а затем отметить и снять отметки в журналах консоли, чтобы увидеть результаты.

async function fetchPlanets() { 
  let results = await fetch("https://swapi.dev/api/planets/?page=1");
  const data = await results.json();
    console.log(data);
  let count = data.count;
  let next = data.next;
  let previous = data.previous;
    console.log(count);
    console.log(next);
    console.log(previous);

    console.log(data.results[0]);
  let name = data.results[0].name;
    console.log(name);

  let planets = data.results;
  planets.forEach(item => {
    console.log(item.name);
  });  
} 
fetchPlanets();

Мой готовый проект API Star Wars

Ссылка на проект: https://star-wars-api-version-01.netlify.app/

Работа с данными из Star Wars API

После просмотра нескольких руководств, перечисленных в разделе «Ресурсы, которые я использовал», я решил использовать часть информации, предоставленной из разделов «Звездолеты», «Люди» и «Планеты».

Затем я использовал циклы «forEach()» для трех категорий, которые извлекали выбранную мной информацию, а затем создал «HTML div-карты» для отображения информации.

const ctnPlanets = document.getElementById("ctn-main");
const planetsPrevious = document.getElementById("planets-previous");
const planetsNext = document.getElementById("planets-next");

// Variables Planets
let URL_Planets = "https://swapi.dev/api/planets/?page=1";
let nextPlanets;
let previousPlanets;

planetsPrevious.addEventListener("click", pagePreviousPlanets);
planetsNext.addEventListener("click", pageNextPlanets);

// Functions Planets
async function fetchPlanets() {
  document.querySelector('.overlay').classList.add('active');
  let results = await fetch(URL_Planets);
  const data = await results.json();
  nextPlanets = data.next;
  previousPlanets = data.previous;
  let planets = data.results;
  let outPut = ' ';
  document.querySelector('.overlay').classList.remove('active');
  planets.forEach(item => {
    outPut += `<div class="card card-planet">
                  <h2>${item.name}</h2>
                  <h5>Climate: ${item.climate}</h5>
                  <h5>Terrain: ${item.terrain}</h5>
                  <h5>Population: ${item.population}</h5>
               </div>`
  })
  ctnPlanets.innerHTML = outPut;
}

Примечание: При использовании цикла for each изначально я получал только последнюю запись данных. Это происходило потому, что цикл «for each loop» перезаписывал предыдущие данные. Я решил эту проблему, изменив переменную «outPut» на «plus equals». Использование «plus equals» сохраняет последнее установленное значение и добавляет к нему новые значения, как и ожидалось.

Затем я написал функцию для циклического просмотра страниц планет; API Star Wars предоставляет десять записей на страницу (я написал аналогичный код для предыдущей страницы).

function pageNextPlanets() {
  if(nextPlanets) {
    URL_Planets = new URL(nextPlanets);
  }
  fetchPlanets()
    .then(response => { 
    console.log(`Success: Planets`);
  })
    .catch(error => { 
    console.log(`error!`)
    console.error(error) 
  });
}

Функция «pageNextPlanets» проверяет, существует ли URL для следующей страницы. Если есть, то URL следующей страницы устанавливается в переменную URL_Planets для использования в функции «fetchPlanets».

Я добавил метод catch() к функции «pageNextPlanets», чтобы регистрировать ошибки, если они возникнут.

Ресурсы, которые я использовал

Чтобы научиться работать с API, в частности с API «Звездных войн», я просмотрел следующие учебные материалы на YouTube:

• 1.1: fetch() — Работа с данными и API в JavaScript
• Async/Await с API Starwars с помощью Vanilla Javascript и Bootstrap
• Развлекаемся с API Star Wars

Ваш первый шаг в большой мир

Все права защищены компаниями Disney и Lucasfilm.

Заключение

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

Если вы впервые научились получать данные из API Star Wars, преобразовывать их в JSON и отображать в выбранном вами виде, это большое достижение, которым вы должны гордиться!

Вы сделали свой первый шаг в большой мир, работая с API!

Давайте общаться! Я активен на LinkedIn и Twitter.

Теперь вы воодушевлены желанием научиться работать с API «Звездных войн»? Вы уже работали с API в своих проектах? Пожалуйста, поделитесь статьей и прокомментируйте ее!