Учимся управлять DOM с помощью базовых выборок

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

  • Что-то (мяч, клюшка, запрос данных и т. Д.) выбрасывается в выбранном направлении,
  • что что-то затем извлекается из космоса (парк, URL…),
  • слегка измененный (весь в слюне?),
  • а затем вернулся к вам (с вилянием хвостом) для вашего следующего выбранного действия.

Эти запросы на выборку являются асинхронными, что означает, что ваш код вернет обещание для данных и продолжит выполнение других задач, ожидая возврата фактических данных и выполнения запроса. (Представьте, что вы бросаете эту палку своему щенку, он / она убегает, чтобы забрать ее, и, ожидая, вы достаете свой телефон, чтобы записать видео, на котором ваш щенок бежит к вам с большой, счастливой, слюнявой улыбкой.)

Сегодня я собираюсь провести вас через простое руководство по основным запросам на выборку с использованием… барабанной дроби пожалуйста… ГИББОНОВ !! (Вы, наверное, думали, что это прекрасная возможность снова поговорить о собаках, но ХА! Вас обманули.)

В учебных целях представим, что у нас есть API, расположенный по адресу «http://allthegibbons.com» (не настоящий веб-сайт), который содержит вложенную информацию обо всех гиббонах в конкретном заповеднике. У нас есть доступ к массиву всех наших гиббонов (gibbonsArray), и мы создадим элемент списка HTML для каждого гиббона (gibbonLi).

Создание запроса "GET"

Допустим, вы хотите отобразить домашнюю страницу со всеми гиббонами, которые в настоящее время находятся в нашем убежище. Чтобы получить подробную информацию обо всех гиббонах, вам нужно будет сделать HTTP-запрос «GET». (Вы «получаете информацию, но не меняете ее.) В этом случае вы должны:

  1. fetch информация из URL.
  2. Возьмите этот ответ (r).
  3. Превратите этот ответ в то, с чем мы можем работать (r.json()). В этом случае мы переформатируем этот ответ в JSON или JavaScript Object Notation.
  4. Возьмите возвращенный data и передайте его следующему действию. В этом случае мы передадим данные в наш пустой gibbonsArray и передадим их в отдельную функцию обратного вызова для визуализации всех гиббонов на странице (renderAllGibbons(gibbonsArray)).

Отправка запроса POST

Допустим, наше святилище только что получило нового гиббона! Его зовут Ной, и он любит царапины на спине.

Чтобы добавить Ноя на наш веб-сайт убежища гиббонов, нам нужно будет отправить HTTP-запрос POST. (Вы создаете новый объект и «публикуете» эту новую информацию в базе данных.) Для этого запроса нам нужно будет указать дополнительную информацию, чтобы убедиться, что все данные обрабатываются правильно. Вот наши шаги:

  1. fetch URL, на который вы собираетесь добавить гиббон.
  2. Объявите, какой тип method вы реализуете. (В этом случае мы используем метод «POST».) Нам не нужно было объявлять метод «GET» в последний раз, поскольку этот метод предполагается, когда он не объявлен иначе.
  3. Объявите, какой тип данных вы будете отправлять и принимать обратно (при необходимости) в вашем headers. В этом примере нам нужно будет использовать ‘application/json’.
  4. Объявите, какую информацию вы будете включать в body этих новых данных гиббона в парах ключ / значение.
  5. Возьмите эти данные тела и превратите их в строку JSON с JSON.stringify, поскольку сервер будет читать данные только в строковом формате.
  6. Чтобы сохранить этот новый гиббон ​​в DOM, возьмите ответ, преобразуйте его в JSON и передайте преобразованные данные (gibbon) в новую функцию обратного вызова, как мы это делали в прошлый раз с нашим методом «GET». Эта функция обратного вызова должна добавить наш новейший гиббон, Noi, в наш список всех гиббонов, чтобы данные сохранялись.

Выполнение запроса "PUT" / "PATCH"

Допустим, вы хотите обновить информацию об одном из гиббонов. Возможно, освоившись в убежище, вы узнали, что Ной не просто любит царапины на спине. Еще он любит держаться за руки! Какая прелесть.

Чтобы обновить данные Ноя, нам нужно сделать HTTP-запрос PUT или PATCH к серверу. Запрос PUT удалит и заменит всю информацию Ноя новой копией, а запрос PATCH просто обновит необходимую часть, оставив существование Ноя в действии. Для нашей демонстрации (и безопасности Ноя) мы собираемся сделать запрос «PATCH». Он будет очень похож на запрос POST со следующими отличиями:

  1. URL-адрес, который мы получаем, должен содержать идентификатор гиббона, который мы хотим обновить. Чтобы сделать этот запрос динамическим, который можно будет повторно использовать для будущих гиббонов, мы можем интерполировать идентификатор гиббона с помощью литерала шаблона. Убедитесь, что ваш URL-адрес заключен в обратные кавычки, а не в кавычки, и вставьте этот заполнитель в конце: ${gibbon.id}.
  2. Установите свой метод на «PATCH».
  3. Не нужно добавлять этого гиббона в свой список гиббонов - он уже существует!

Создание запроса "УДАЛИТЬ"

Допустим, вы случайно создали один и тот же гиббон ​​дважды, и поэтому вам нужно удалить лишний гиббон ​​(копию!) Из своего убежища. (Ясно, что в противном случае мы никогда не удалили бы гиббон.) Действия, которые вы предпримете для выполнения этой задачи, очень похожи на те, что мы делали ранее для «PATCH».

  1. После того, как вы установили URL-адрес получения на целевой идентификатор гиббона, установите method на «УДАЛИТЬ».
  2. Нет необходимости в заголовках или теле, поскольку мы не создаем и не обновляем этот экземпляр гиббона.
  3. После того, как ответ будет возвращен и преобразован в JSON, удалите его из базы данных.

И вот оно! Теперь у вас есть некоторые из основных инструментов JavaScript для выполнения некоторых простых функций CRUD на вашем веб-сайте или в приложении.

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

P.S. Спасите гиббонов! Здесь и здесь :)