Кому не нравятся покемоны? Ну никто !! 😍
Это было одно из моих любимых шоу, которое я смотрела в детстве.

Итак, давайте создадим колоду покемонов, используя HTML, CSS и JavaScript.

Поскольку я объяснил некоторые из известных методов запросов AJAX в моем предыдущем блоге, для получения данных о наших покемонах мы будем использовать Fetch API.
Если вы не знаете, что такое Fetch, или, возможно, вы забыли о нем это, ну, вы можете прочитать мой последний блог, чтобы получить общее представление о нем или освежить свои знания о нем. 👇
(4-сторонние запросы Ajax)

Что мы будем создавать и чему учиться?

Мы собираемся создать колоду покемонов, содержащую в общей сложности 50 покемонов с их именем, идентификатором и изображением.
Благодаря этому мы узнаем следующее:
1. Получение данных из API
2. Обещания в JavaScript
3. Написание HTML внутри JavaScript

Наш финальный проект будет выглядеть так:

Итак, приступим!

Мы создадим новую папку и поместим в нее файлы index.html, style.css и app.js.
В нашем index.html мы собираемся создать неупорядоченный список с идентификатором pokedex
Итак, наш html файл будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pokedex</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Pokedex</h1>
<ul id="pokedex"></ul>
<script src="app.js"></script>
</body>
</html>

Поскольку файл CSS довольно длинный, и мое основное внимание здесь уделяется не стилю, а JS, поэтому я не буду вставлять его здесь, но вы можете получить к нему доступ из моего репозитория github или попробуйте стилизовать его самостоятельно (я знаю, что вы можете сделать это 😉).

1. Получение данных из API

API, который я использую для получения данных о покемонах, - («https://pokeapi.co/api/v2/pokemon Фак/).

Итак, наш app.js будет выглядеть так:

const getPokemon = () => {
  const url = 'https://pokeapi.co/api/v2/pokemon/1';
  fetch(url)
   .then(res => res.json())
   .then(data => console.log(data))
}
getPokemon();

Как видите, я добавил цифру «1» в конце своего URL-адреса, это идентификатор этого покемона. Здесь хранится более 500 покемонов, и мы не собираемся получать каждый из них. Для этого проекта мы извлечем данные только о начальных 50.
Итак, приведенный выше код вернет объект со многими свойствами:

Здесь важными для нас свойствами являются id, name и image. Но подождите ... нет свойства image !! 🤨
Что ж, изображение хранится в спрайтах со свойством front_default.

Итак, мы можем получить данные о конкретном покемоне, используя его идентификатор в конце URL-адреса.

Итак, как получить данные о 50 покемонах? Мы можем использовать цикл for и перебирать каждого покемона, а затем console.log() его, чтобы увидеть, что происходит.

Наш код будет выглядеть так:

const getPokemon = () => {
  for(let i = 1; i <= 50; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    fetch(url)
    .then(res => res.json())
    .then(data => console.log(data))
  }
}
getPokemon();

Здесь мы перебираем начальные 50 покемонов.
В JavaScript есть что-то под названием Шаблонные литералы, с помощью которых мы можем деструктировать наш URL и использовать наш i внутри него.

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

const getPokemon = () => {
  for(let i = 1; i <= 50; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    fetch(url)
    .then(res => res.json())
    .then(data => {
      const pokemon = {};
      pokemon['id'] = data.id;
      pokemon['name'] = data.name;
      pokemon['image'] = data.sprites['front_default'];
      
      console.log(pokemon);
    })
  }
}
getPokemon();

В результате получится:

Итак, теперь мы можем извлечь нужные нам свойства.
Допустим, вместо доступа к 50 покемонам, что, если бы мы получили доступ к 500 покемонам?
Это займет довольно много времени, а мы не будем мы можем делать что угодно, пока цикл for не завершится. Это плохо, поэтому мы используем так называемые обещания.

2. Обещания в JavaScript

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

Это был мой простой способ объяснить обещание.
Подробное описание обещания можно найти в официальных документах MDN.

Мы собираемся использовать Promise.all(), который в основном будет возвращать обещание, которое разрешается после того, как все переданные обещания будут разрешены (т.е. успешно получены).

Мы начнем с пустого массива Promises за пределами цикла for.
Внутри цикла for мы отправим обещание, которое возвращается при использовании fetch (). Таким образом мы поместим все наши 50 обещаний внутрь этого массива.

Теперь мы воспользуемся методом Promise.all(), передав массив обещаний в качестве аргумента, сделаем .then() и переместим созданный нами объект покемона.
Итак, код будет выглядеть так:

const getPokemon = () => {
  const promises = [];
  
  for(let i = 1; i <= 50; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    promises.push(fetch(url)
    .then(res => res.json()));
  }
  
  Promise.all(promises).then(result => {
      const pokemon = result.map((data) => ({
        id: data.id,
        name: data.name,
        image: data.sprites['front_default'],
      }));
      
      console.log(pokemon);
    })
}
getPokemon();

Здесь мы создаем объект покемона с помощью встроенной функции JavaScript map (), которая будет отображать все элементы в массиве.
После регистрации в консоли мы получим что-то вроде это:

Ура! Наш объект создан, и мы закончили выборку данных. 🥳

3. Написание HTML внутри JavaScript.

Наш последний шаг - отображение этих данных на экране.
Помните, что в нашем HTML-файле мы создали неупорядоченный список. Мы собираемся отобразить все эти данные в этом списке.

Сначала нам нужно выбрать этот список, и для этого мы будем использовать document.getElementById ().

Теперь я собираюсь создать еще одну функцию под названием displayPokemon (), которая будет принимать объект pokemon в качестве аргумента, а затем мы создадим строку внутри этой функции и отрендерим весь наш html внутри нее.
Мы собираемся снова использовать наш map() и визуализировать <li>...</li>
Окончательный код выглядит так:

const pokedex = document.getElementById('pokedex');
const getPokemon = () => {
  const promises = [];
  
  for(let i = 1; i <= 50; i++) {
    const url = `https://pokeapi.co/api/v2/pokemon/${i}`;
    promises.push(fetch(url)
    .then((res) => res.json()));
  }
  
  Promise.all(promises).then(result => {
      const pokemon = result.map((data) => ({
        id: data.id,
        name: data.name,
        image: data.sprites['front_default'],
      }));
    displayPokemon(pokemon);
    })
};
const displayPokemon = (pokemon) => {
  const pokemonString = pokemon.map(singlePokemon => `
    <li>
      <img src="${singlePokemon.image}" />
      <h3>${singlePokemon.id}. ${singlePokemon.name}</h3>
    </li>`
  ).join("");
  
  pokedex.innerHTML = pokemonString;
};
getPokemon();

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

Поскольку функция карты возвращает массив, мы использовали .join(""), чтобы преобразовать его в одну строку.

Мы используем innerHTML, чтобы изменить содержимое списка на созданную строку.

Наконец, нам нужно вызвать displayPokemon() внутри нашего Promise.all()

И готово !! 🥳

Если вам нравится этот блог, оставьте несколько аплодисментов👏.

Заключительная ссылка на проект Codepen: https://codepen.io/vivek-mittal/pen/ExVMWOp

Удачного кодирования!