Работа с API может оказаться непростой задачей, если вы позволите ей это сделать. Используя проект, который я завершил, я помогу описать и проанализировать методы, связанные с созданием ваших собственных проектов с использованием API. Давайте погрузимся!
Приведенную выше функцию я использовал для создания нескольких запросов на выборку для Pokémon API. Первый устанавливает пустой массив, в котором мы будем хранить наши данные. Внутри цикла for (я использовал 50 в качестве счетчика, потому что хотел 50 карточек) есть константа, объявленная с URL-адресом, который динамически вводит число на основе итерации, на которой находится цикл for. В PokéAPI есть ссылка, соответствующая каждому покемону, поэтому каждый раз, когда он зацикливается, создается уникальная ссылка, а затем извлекаются данные из API. В строке 200 мы видим, что пустой массив вызывается методом push. Внутри метода push мы отправляем полученный URL-адрес (описанный выше) .then(), беря необработанные данные и преобразовывая их в .json()..
Используя метод Promise.all(), мы можем взять наш массив промисов и одновременно запустить следующий код. При работе с любым fetch() важно помнить, что он не синхронный. Это означает, что для наших 50 запросов на выборку они не будут выполняться по порядку или даже в одно и то же время каждый раз. Работая с несколькими API, вы, скорее всего, получите более широкий диапазон времени для выполнения каждого промиса. Promise.all() исправляет это, позволяя нам дождаться разрешения всех промисов в нашем массиве, прежде чем запускать следующий код.
Используя метод .then(), поставляемый с API выборки, мы можем запустить что-то вроде мини-функции. Со строк 204 по 209 мы сопоставляем каждое из разрешенных промисов и сохраняем нужные данные в отдельные объекты.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
**(Обратите внимание, что пары ключ-значение Type: и Abilities также используют метод сопоставления для извлечения каждого соответствующего элемента из данных и сохранения его в виде списка, разделенного запятыми, если применимо)**
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
В строке 210 мы используем метод «остальные», чтобы поместить все наши данные в новый массив. pokeArray = [...pokemon]; Строки 211 и 212 относятся к моему случаю использования данных, которые я сохранил. Каждый запускает последующую функцию для дальнейшей обработки данных, полученных из API.
Последняя строка, на которую стоит обратить внимание, это строка 214. Каждый раз, когда вы создаете fetch(), вы захотите использовать метод .catch() для обработки любых ошибок. Любой браузер будет иметь свой собственный обработчик ошибок по умолчанию, но последнее, что вам нужно, когда вы кодируете свой проект, — это получить общее сообщение об ошибке без какой-либо специфики. Хотя в этом примере это, по сути, то, что я сделал. Он «поймет» ошибку и создаст журнал консоли: "Fetch failed: {some error message/type}.
Я надеюсь, что это поможет вам в вашем путешествии по программированию и, как всегда, удачного кодирования =)
