Использование в JavaScript
Работа над моим проектом портфеля JavaScript для Flatiron School дала мне возможность познакомиться с запросами. Мы должны были использовать Fetch для отправки запросов на нашу Backend Rails. В итоге Фетч оказался полностью ответственной за манипулирование нашим API, нам больше не нужно было отправлять формы и ждать появления новых страниц, JavaScript позаботился обо всем этом для нас. Мы смогли использовать запросы на выборку для получения, публикации, удаления, исправления и обновления нашей базы данных. Это сэкономило время, не полагаясь на необходимость писать представления для всех наших моделей и иметь возможность манипулировать информацией, хранящейся в лучшем виде.
Различные запросы
Когда мы писали наш код, я обнаружил, что полагаюсь на несколько различных ресурсов, чтобы собрать мои запросы. Поскольку это была большая часть проекта JavaScript, я решил написать краткое изложение различных доступных запросов и того, как их использовать.
Fetch – Basic Get запрос
Наш базовый запрос на получение выбора будет выглядеть примерно так (я использовал Fetch, чтобы получить своих пользователей из моей базы данных):
fetch("http://localhost:3000")
Первое, что происходит, это то, что Fetch примет URL, который вы передаете ему, и забрать Обещание объект. Поэтому, когда мы отправляем наш запрос, мы получаем Обещание , что мы должны затем взять этот ответ и превратить его в Json для нашего использования.
fetch("http://localhost:3000")
.then(resp => resp.json())
Как только у нас есть это Json Мы можем Тогда манипулировать этим дальше.
fetch("http://localhost:3000")
.then(resp => resp.json())
.then(users => users.pop())
В примере выше я взял Обещание Я получил, превратил это в Json Тогда у меня был массив Json объекты. Для моего проекта мне нужен был только последний пользователь, который подписал, поэтому я использую users.pop (), чтобы удалить и вернуть последний элемент Json массив, который я получил. Вещество следует отметить, что, хотя я использую .pop (), на самом деле это не влияет на мою базу данных. Это только удаление последнего элемента из * Json ** Объект, который создается из обещания, возвращаемого нашим запросом.**
fetch("http://localhost:3000/users")
.then(resp => resp.json())
.then(users => users.pop())
.then(user => renderUser(user))
};
Теперь, когда дело доходит до рендеринга на моей странице. Я должен обработать ответ дальше. В этом примере я взял Json объект, который я получил в качестве возвращаемого значения от вызова .pop () в предыдущем примере и называется renderUser () на нем. Это необходимо, потому что в противном случае у нас останется только Json что мы ничего не сделали. Метод, который я использую, займет это Json и поместите его таким образом, чтобы его можно было использовать на экране.
Фетч – Пост
Поскольку мы хотим, чтобы все в наших проектах работало на одной странице без перенаправлений, вместо того, чтобы иметь Rails Обработайте наши формы, мы можем использовать JavaScript. Когда мы используем JavaScript для обработки Пост Запрос в наших формах, есть несколько ключевых вещей, которые нужно помнить.
Слушатель событий
Поскольку мы меняем то, что обычно будет делать наша форма, мы добавим слушателя событий к нашему из -за предотвращения действия по умолчанию формы.
const userForm = document.querySelector("body > header > div > div > div.menu > div.user-form > form")
userForm.addEventListener('submit', ...)
В моем примере я определил свою переменную пользователя и добавил. AddeventListener (‘отправить’, …), чтобы прослушать событие отправки.
userForm.addEventListener('submit', event => {
event.preventDefault()
postUser(event.target)
})
Когда это «слышит» событие отправки, он сделает две вещи. Главное, что, как правило, будет одинаковым по всему плату, – это вызов .preventDefault (), что предотвратит выполнение формы по умолчанию. Следующее, что я делаю, это передавать событие. Пост Метод, удачно названного Postuser (), я определил в другом месте.
Пост -метод
function postUser(user_data) {
}
Я определил Postuser (), чтобы справиться с моей формой Пост запрос. Я передаю данные своих форм, и с помощью этих данных я отправляю свои пользовательские данные в свой бэкэнд, используя запрос на выброс.
function postUser(user_data) {
fetch('http://localhost:3000/users', {
method: 'POST',
}
Первое, что я хочу сделать, это набрать мой Fetch (). Я передаю свой URL и дал JavaScript знать, что это запрос сообщения.
function postUser(user_data) {
fetch('http://localhost:3000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json"
},
body: JSON.stringify({
"name": user_data.name.value,
"user_handle": user_data.handle.value
})
})
}
Затем я вставил заголовки, сообщая своему заявлению, что я буду иметь дело с Json И в теле: я использую json.stringify (), чтобы превратить свой объект JS в Json . Два атрибута, которые есть у моих пользователей, – это «имя» и «user_handle», а внутри моего json.stringify () я беру данные своей формы (user_data) и вытаскиваю значения из соответствующих полей, чтобы назначить их пользователю (user_data.name .value & user_data.handle.value)
function postUser(user_data) {
fetch('http://localhost:3000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json"
},
body: JSON.stringify({
"name": user_data.name.value,
"user_handle": user_data.handle.value
})
})
.then(res => res.json())
}
Следующим шагом будет принятие полученного ответа и превратить его обратно в Json объект манипулировать …
function postUser(user_data) {
fetch('http://localhost:3000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json"
},
body: JSON.stringify({
"name": user_data.name.value,
"user_handle": user_data.handle.value
})
})
.then(res => res.json())
.then((obj_user) => {
renderUser(obj_user)
})
}
С этим Json Затем я использую его, чтобы отобрать моего пользователя с помощью renderuser (), который я определил в другом месте.
function postUser(user_data) {
fetch('http://localhost:3000/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: "application/json"
},
body: JSON.stringify({
"name": user_data.name.value,
"user_handle": user_data.handle.value
})
})
.then(res => res.json())
.then((obj_user) => {
let new_user = renderUser(obj_user)
const welcome = document.querySelector("body > header > div > div > div:nth-child(3) > div")
})
.catch((err) => {
alert(err.message)
})
}
Наконец, я добавил .catch (), чтобы обработать любые ошибки, которые возникают в предыдущих шагах.
Выбрать удаление
Я добавил кнопку, чтобы удалить «ручки» из моего приложения. Теперь, так как мы хотим оставить все на одной странице (без перенаправлений), я использовал запрос на получение выбора для Удалить «Ручки» из моей базы данных.
Слушатель событий
Первым шагом, который я сделал, было добавить слушателя в кнопку «Удалить», которую я создал.
handlesContainer.addEventListener('click', (e) => {
if(e.target.innerText === "Delete Handle") {
deleteHandle(e.target.id)
} else if {...}
}
);
У меня был слушатель событий, прислушиваясь к событиям на моем HandleScontainer, я обработал несколько событий щелчка в этом слушателе, но я буду сосредоточиться только на одном обработке моего УДАЛИТЬ . Я позволил своему слушателю, слушал событие «щелкнуть» по всему контейнеру, чтобы оно могло справиться с удалением любых ручек, доступных внутри, я установил идентификатор каждой из кнопок на идентификатор ручек, поэтому, когда мы называем DeleteHandle () Мы проходим в e.target.id, чтобы иметь возможность удалить правильную ручку.
Функция получения
function deleteHandle(handleId) {
fetch(`http://localhost:3000/handles/${handleId}`, {
method: 'DELETE'
})
}
Я определил свой метод DeleteHandle () для принятия идентификатора, мы интерполируем это число в URL -адрес запроса fetch () для обработки точной ручки, которую мы хотим. Мы вводим «Удалить», чтобы позволить нашему fetch () знать, какой метод: мы используем.
function deleteHandle(handleId) {
fetch(`http://localhost:3000/handles/${handleId}`, {
method: 'delete'
}).then(response =>
response.json()
.then(json => {
return json;
})
}
После того, как мы удалим нашу ручку, мы принимаем ответ, который получаем, и возвращаем ее обратно в Json Анкет
function deleteHandle(handleId) {
fetch(`http://localhost:3000/handles/${handleId}`, {
method: 'delete'
}).then(response =>
response.json()
.then(json => {
return json;
})
.then(clearHandles())
.then(fetchHandles())
);
}
После этого я принимаю Call ClearHandles (), чтобы снова очистить данные о старой ручке и FetchHandles (), чтобы получить список и обновленный список.
Проверьте Tweetgrab at https://github.com/rukshanuddin/rails-js-project
Оригинал: “https://dev.to/rukshanuddin/go-fetch-35la”