Как получить из API и загрузить этот контент в DOM.
Когда мы говорим о методе выборки, что первое приходит на ум? Это ваш любимый щенок хватает свою любимую игрушку? Ну, то же самое можно сказать и о том, когда веб-браузеру говорят пойти fetch(). Я объясню метод global fetch() и то, как я использовал его для создания веб-приложения для просмотра различной информации от студии производства аниме Studio Ghibli.
Что именно делает глобальный метод fetch()? Метод fetch() отправляет запрос HTTP, GET с запрашиваемого сервера. Когда эта информация получена, вы используете метод .then(), чтобы указать, что делать дальше.
В моем приложении Studio Ghibli я использовал бесплатный API Studio Ghibli API (v1.0.1). Я люблю фильмы Studio Ghibli и решил, что это будет интересный способ научиться извлекать и манипулировать DOM и получать удовольствие! Как только fetch() возвращает обещание, мы используем метод .then() для вызова ответа и возвращаем этот ответ в объект .json с помощью метода .json().
Метод .then() снова используется со стрелочной функцией внутри. Я предпочитаю, чтобы имя для объектов .json, возвращаемых из обещания, было data. Затем мы перебираем данные, используя запись через точку и цикл forEach. Я назвал параметр в этой функции movie.
Мой html-файл на данный момент очень прост! Место, где я хочу разместить данные json, — это просто ‹div› и ‹ul› с идентификатором «movie-list». Вот где происходит волшебство добавления информации в DOM!
Следующим шагом является написание кода для добавления DOM к моим данным json, возвращенным из запроса на выборку. Именно здесь поддержание простого и легко читаемого кода является отличной привычкой. Цикл forEach перебирает каждый объект и его ключи. Затем вы сами выбираете, какую информацию вы хотите абстрагировать и добавить в DOM. В этом случае для навигации по всем фильмам я выбрал movie.id и movie.title и добавил их в DOM, захватив узел ‹ul id="movie-list› с помощью селектора getElementByID и добавив innerHTML каждого .
Я был в восторге, когда увидел эту маленькую функцию, использующую fetch() для всех названий фильмов в DOM и на странице моего веб-приложения!
Если вы хотите увидеть все мое веб-приложение в действии, клонируйте мой репозиторий GitHub и следуйте README.
