Получение в Javascript

Fetch - полезный инструмент, который позволяет нам взаимодействовать и управлять базой данных с помощью Javascript. В этом блоге мы объясним выполнение действий CRUD с помощью fetch. CRUD означает создание, чтение, обновление и удаление. Итак, мы можем использовать выборку для создания объектов в базе данных, чтения этих объектов, обновления этих объектов и удаления этих объектов.

fetch(“urlOfDatabase", {
method: ‘HTTP verb’,
headers: {‘Content-Type’: ‘dataType’, 'Accept': 'dataType'},
body: JSON.stringify(dataToSendBack) })

.then(response => response.json())

.then((data) => {dataWeSent})

(Код, выделенный жирным шрифтом, обозначает синтаксис, а код, выделенный жирным шрифтом, - заполнители.)

Сначала мы извлекаем данные из базы данных.

fetch() принимает два аргумента; URL-адрес и объект. URL-адрес связывает приложение с базой данных, которую мы хотим использовать. Объект содержит заголовки, тело и метод (есть и другие атрибуты, которые могут быть назначены, но для простой выборки; достаточно метода, заголовков и тела). В случае действия чтения аргумент объекта не требуется и для Необходимо удалить только атрибут метода действия.

Метод

method: будет использовать глагол HTTP. Глаголы HTTP - это методы, предназначенные для выполнения запросов к серверу. Пять HTTP-глаголов, которые мы будем использовать для выполнения выборки: публиковать, получать, помещать, исправлять и удалять.

HTTP-глаголы, которые мы используем для каждого действия CRUD:

В случае создания мы будем использовать method: ‘POST’.

В случае чтения мы будем использовать method: ‘GET'.

В случае обновления мы будем использовать method: ‘PUT' иmethod: ‘PATCH'.

Для удаления мы использовали бы method: ‘DELETE'.

Обновление использует другой HTTP-глагол в зависимости от того, что мы обновляем. Если мы обновляем весь элемент в базе данных, мы используем PUT. Если мы обновляем только часть элемента, мы используем PATCH.

Заголовки

headers позволяет серверу знать, какой тип информации мы отправляем, а также какой тип информации мы принимаем обратно. В этом случае мы отправляем строки json, поэтому мы используем ‘Content-Type’: ‘application/json’. Мы ожидаем, что ответ также будет в формате json, поэтому мы используем 'Accept': 'application/json'.

Тело

body будет содержать данные, которые мы создали и хотим отправить в базу данных. Поскольку мы используем данные json для связи с базой данных, нам нужно будет преобразовать все наши данные в строку перед отправкой body: JSON.stringify(dataToSendBack). Данные для отправки обратно будут содержать данные, которые мы хотели бы создать, поместить или исправить.

Затем мы хотим превратить ответ, который мы получаем из базы данных, в нашу выборку, чтобы он был объектами json. Чтобы преобразовать ответ в объекты json, мы используем код .then(response => response.json()).

Как только у нас будет наш json-объект, мы захотим добавить его на страницу. Итак, мы бы позвонили .then((data) => {dataWeSent}). data - это данные, которые мы получаем после преобразования ответа в json. dataWeSent - это то место, где мы могли бы применить нашу логику к тому, как мы хотим представить эти данные.

Пример действия create с использованием выборки;

fetch(“http://localhost:3000/foxes", {
method: “POST”,
headers: {“Content-Type”: “application/json”,
“Accept”: “application/json”},
body: JSON.stringify( {name: nameOfTheFox, img_url: imageOfTheFox} ) })
.then(res => res.json())
.then((foxObject) => {foxesUL.innerHTML += `<li data-id=${foxObject.id} >${foxObject.name}</li>`})

Обратите внимание, что мы использовали HTTP-глагол “POST” для действия create. Мы также должны были снабдить базу данных заголовком и телом.

Пример действия чтения с использованием выборки;

fetch(“http://localhost:3000/to_do_items")
.then(res => res.json())
.then(arrOfItems => {arrOfItems.forEach((item) => {makeJSONIntoLI(item)})

Обратите внимание, что здесь нет команды HTTP, потому что по умолчанию fetch выполняет “GET”. Также нет второго аргумента после URL-адреса, потому что мы не отправляем данные в базу данных, поэтому нам не нужно предоставлять базе данных какой-либо заголовок или тело.

Пример действия обновления с использованием выборки;

fetch(`http://localhost:3000/to_do_items/${ id }`, {
method: “PATCH”,
headers: headers: {“Content-Type”: “application/json”,
“Accept”: “application/json”},
body: JSON.stringify({done: done})})
.then(res => res.json())
.then(data => {dataRendered})

Обратите внимание, что мы использовали HTTP-глагол “PATCH”. Нам также пришлось снабдить базу данных заголовком и телом. Если бы мы внесли более крупные изменения в объект, нам пришлось бы использовать HTTP-команду “PUT”.

Пример действия удаления с использованием выборки;

fetch(`http://localhost:3000/to_do_items/${ id }`, {method: “DELETE”})

Обратите внимание, что мы использовали HTTP-глагол “DELETE”. Нам также не нужно было предоставлять базе данных какой-либо заголовок или тело, потому что мы не ожидаем, что какие-либо данные будут отправлены обратно, поскольку мы только удаляем данные из базы данных.