Как новичок в программировании, метод fetch() в JavaScript открыл мне глаза на возможности того, что можно реализовать на веб-сайтах с использованием различных баз данных и серверов для получения информации. Вы также можете обновить свою собственную базу данных, используя HTTP CRUD-операции. (Создать, прочитать, обновить, удалить)

В этом посте мы сосредоточимся на операции READ или, в терминах JavaScript, запросе GET. Мы начнем с поиска общедоступного API, из которого мы можем получать данные. В этом примере мы будем использовать boredAPI, который генерирует случайные действия. Вы можете найти список бесплатных общедоступных API, погуглив Открытые общедоступные API. Некоторым API требуются ключи, но мы будем использовать тот, который не требует ключа, чтобы упростить задачу.

Первая часть запроса GET начинается с:

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

  • Вы передаете URL-адрес в виде строки в функцию fetch().

fetch() возвращает нечто, называемое Promise, и объект JSON. (Это похоже на объект JavaScript, облегчающий чтение программистам, но это не совсем объект JavaScript пока.

  • Вызовите метод first .then(), чтобы преобразовать объект JSON в пригодный для использования объект JavaScript.

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

  • Вызовите второй .then(), чтобы использовать преобразованные данные JavaScript и передать их в наш код.

В этом примере мы выполним console.log наши данные, чтобы увидеть, как они выглядят, что упростит понимание того, как включить их в наш код.

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

Примечание: некоторые API возвращают массив объектов, которые вы можете перебирать, используя любой из методов итератора массива, таких как forEach() и map().

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

Возвращаясь к тому, где мы сделали console.log для данных, мы создадим функцию, в которую мы можем передать наши данные.

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

  • Затем я создал функцию renderActivity, чтобы манипулировать моей DOM для отображения данных на моей веб-странице.

  • Как видите, я установил переменные в соответствии со значениями, которые я получил из объекта данных, который ранее был возвращен из моей fetch(). Поскольку данные теперь являются объектом JavaScript, я могу получить эти значения, используя запись через точку. Например, если вы посмотрите в console.log ранее, вы увидите цену и участников активности в объекте. Я получил их, передав данные в качестве аргумента в функцию и установив переменные для получения этих значений (price = data.price и участников = data.participants).

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

  • В этом случае я использовал глобальные переменные, которые я установил ранее, чтобы получить свои элементы DOM и установить innerText для отображения данных соответствующим образом. Это также можно сделать с помощью textContent.
  • Вы можете видеть, что я установил текст элементов DOM равным значениям, полученным из объекта JavaScript.

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

Это лишь базовый результат того, что вы можете сделать с помощью метода fetch(). Как новый ученик, это то, что я могу объяснить в настоящее время относительно метода GET. Есть бесконечные возможности того, чего вы можете достичь с помощью fetch(), и я рад продолжать учиться и применять свои знания для достижения более продвинутых результатов. Надеюсь, это помогло вам начать понимать, как работает fetch(). Это только начало, и я готов продолжать этот поиск знаний в области кодирования. Спасибо за прочтение!