POST - запрос и как с ним работать.
Зачем?
Я, как и большинство новичков, в одном из первых своих проектах пытался отправлять данные из форм в базу или в текстовый документ, сделать типа регистрацию. (как же я был далек от этого)
Для этого мне пришлось залезать в темный мир backend'a, поднимать web-сервер и его настраивать.
В этот раз поговорим только о frontend составляющей данного вопроса т.к по роду своей деятельности часто сталкивался с программистами своих клиентов, которые поддерживали работу сайта(клиента), но долгое время не могли отправлять данные нам на сервер в правильном формате.
Что такое POST-запрос?
Чтобы это понять, нужно сначала узнать, что у нас в целом есть запросы и что это стандарты HTTP-протокола.
Вы как пользователь, чаще всего наблюдаете GET запросы.
Строка в браузере, которая ссылается на какой-то товар в маркете это и есть GET запрос.
Он передается в открытом виде, никогда не должен иметь конфиденциальные данные пользователей.
Там зашифрованы категории, id товара и прочее параметры.
POST запрос передается не явно, строка браузера не меняется. Это позволяет передавать уже личные данные пользователей. (с точки зрения Информационной безопасности и т.п много нюансов, не про нее сейчас)
Как сделать отправку POST-запроса?
try {
let response = await fetch(url, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
});
console.log(response)
} catch (error) {
console.error('Ошибка:', error);
}
Разберем код:
url - это строка содержащая в себе адрес сервера
Пример: https://zen.yandex.ru/
method: 'POST' - способ передачи, как вы помните, может быть GET и другие.
headers - это заголовки, пока не знаю как они влияют на передачу данных, грубо говорят, мы сообщаем серверу тип данных который должен от нас прийти.
body - это объект, хранит данные, которые мы хотим передать
Пример: {name: "Mustafa"}
JSON.stringify - нужен для того что бы превратить объект в строку, перед тем как передавать его на сервер
response - это ответ сервера, в зависимости от настроек, он может принять или не принять данные, которые вы ему шлете.
Важно:
Вы не сможете абы куда слать данные, нужно чтобы серверная часть была настроена правильно и могла принимать данные того формата в котором вы отправляете.
Так же вы столкнетесь с проблемой cors policy - которая блокирует кросс доменные запросы, без правильной настройки сервера.
PS
Задавайте вопросы в комментариях, уверен не всех получится с первого раза - я тоже довольно много времени на это убил.
Где почитать подробнее:
- https://developer.mozilla.org/ - fetch