Учимся управлять DOM с помощью базовых выборок
Если вы обнаружите, что создаете типичный веб-сайт или приложение, скорее всего, вы захотите реализовать некоторые базовые функции CRUD (Создать чтение, обновление, удаление) для своего пользователя, включая несколько HTTP-запросов для всех необходимых данных. . При работе в JavaScript (и в большинстве браузеров) эти запросы могут быть выполнены с помощью небольшого элемента под названием fetch
. Получение запросов API немного похоже на одноименную игру, в которую вы играете со своим щенком:
- Что-то (мяч, клюшка, запрос данных и т. Д.) выбрасывается в выбранном направлении,
- что что-то затем извлекается из космоса (парк, URL…),
- слегка измененный (весь в слюне?),
- а затем вернулся к вам (с вилянием хвостом) для вашего следующего выбранного действия.
Эти запросы на выборку являются асинхронными, что означает, что ваш код вернет обещание для данных и продолжит выполнение других задач, ожидая возврата фактических данных и выполнения запроса. (Представьте, что вы бросаете эту палку своему щенку, он / она убегает, чтобы забрать ее, и, ожидая, вы достаете свой телефон, чтобы записать видео, на котором ваш щенок бежит к вам с большой, счастливой, слюнявой улыбкой.)
Сегодня я собираюсь провести вас через простое руководство по основным запросам на выборку с использованием… барабанной дроби пожалуйста… ГИББОНОВ !! (Вы, наверное, думали, что это прекрасная возможность снова поговорить о собаках, но ХА! Вас обманули.)
В учебных целях представим, что у нас есть API, расположенный по адресу «http://allthegibbons.com» (не настоящий веб-сайт), который содержит вложенную информацию обо всех гиббонах в конкретном заповеднике. У нас есть доступ к массиву всех наших гиббонов (gibbonsArray
), и мы создадим элемент списка HTML для каждого гиббона (gibbonLi
).
Создание запроса "GET"
Допустим, вы хотите отобразить домашнюю страницу со всеми гиббонами, которые в настоящее время находятся в нашем убежище. Чтобы получить подробную информацию обо всех гиббонах, вам нужно будет сделать HTTP-запрос «GET». (Вы «получаете информацию, но не меняете ее.) В этом случае вы должны:
fetch
информация из URL.- Возьмите этот ответ (
r
). - Превратите этот ответ в то, с чем мы можем работать (
r.json()
). В этом случае мы переформатируем этот ответ в JSON или JavaScript Object Notation. - Возьмите возвращенный
data
и передайте его следующему действию. В этом случае мы передадим данные в наш пустойgibbonsArray
и передадим их в отдельную функцию обратного вызова для визуализации всех гиббонов на странице (renderAllGibbons(gibbonsArray)
).
Отправка запроса POST
Допустим, наше святилище только что получило нового гиббона! Его зовут Ной, и он любит царапины на спине.
Чтобы добавить Ноя на наш веб-сайт убежища гиббонов, нам нужно будет отправить HTTP-запрос POST. (Вы создаете новый объект и «публикуете» эту новую информацию в базе данных.) Для этого запроса нам нужно будет указать дополнительную информацию, чтобы убедиться, что все данные обрабатываются правильно. Вот наши шаги:
fetch
URL, на который вы собираетесь добавить гиббон.- Объявите, какой тип
method
вы реализуете. (В этом случае мы используем метод «POST».) Нам не нужно было объявлять метод «GET» в последний раз, поскольку этот метод предполагается, когда он не объявлен иначе. - Объявите, какой тип данных вы будете отправлять и принимать обратно (при необходимости) в вашем
headers
. В этом примере нам нужно будет использовать‘application/json’
. - Объявите, какую информацию вы будете включать в
body
этих новых данных гиббона в парах ключ / значение. - Возьмите эти данные тела и превратите их в строку JSON с
JSON.stringify
, поскольку сервер будет читать данные только в строковом формате. - Чтобы сохранить этот новый гиббон в DOM, возьмите ответ, преобразуйте его в JSON и передайте преобразованные данные (
gibbon
) в новую функцию обратного вызова, как мы это делали в прошлый раз с нашим методом «GET». Эта функция обратного вызова должна добавить наш новейший гиббон, Noi, в наш список всех гиббонов, чтобы данные сохранялись.
Выполнение запроса "PUT" / "PATCH"
Допустим, вы хотите обновить информацию об одном из гиббонов. Возможно, освоившись в убежище, вы узнали, что Ной не просто любит царапины на спине. Еще он любит держаться за руки! Какая прелесть.
Чтобы обновить данные Ноя, нам нужно сделать HTTP-запрос PUT или PATCH к серверу. Запрос PUT удалит и заменит всю информацию Ноя новой копией, а запрос PATCH просто обновит необходимую часть, оставив существование Ноя в действии. Для нашей демонстрации (и безопасности Ноя) мы собираемся сделать запрос «PATCH». Он будет очень похож на запрос POST со следующими отличиями:
- URL-адрес, который мы получаем, должен содержать идентификатор гиббона, который мы хотим обновить. Чтобы сделать этот запрос динамическим, который можно будет повторно использовать для будущих гиббонов, мы можем интерполировать идентификатор гиббона с помощью литерала шаблона. Убедитесь, что ваш URL-адрес заключен в обратные кавычки, а не в кавычки, и вставьте этот заполнитель в конце:
${gibbon.id}
. - Установите свой метод на «PATCH».
- Не нужно добавлять этого гиббона в свой список гиббонов - он уже существует!
Создание запроса "УДАЛИТЬ"
Допустим, вы случайно создали один и тот же гиббон дважды, и поэтому вам нужно удалить лишний гиббон (копию!) Из своего убежища. (Ясно, что в противном случае мы никогда не удалили бы гиббон.) Действия, которые вы предпримете для выполнения этой задачи, очень похожи на те, что мы делали ранее для «PATCH».
- После того, как вы установили URL-адрес получения на целевой идентификатор гиббона, установите
method
на «УДАЛИТЬ». - Нет необходимости в заголовках или теле, поскольку мы не создаем и не обновляем этот экземпляр гиббона.
- После того, как ответ будет возвращен и преобразован в JSON, удалите его из базы данных.
И вот оно! Теперь у вас есть некоторые из основных инструментов JavaScript для выполнения некоторых простых функций CRUD на вашем веб-сайте или в приложении.
Удачного кодирования!