При создании веб-приложений разработчикам часто необходимо взаимодействовать с серверами для выполнения различных действий, таких как выборка данных, создание новых ресурсов или обновление существующих. JavaScript предоставляет несколько методов взаимодействия с серверами, включая запросы GET, POST и PATCH.

Получить

Запросы GET используются для получения данных с сервера. Когда делается запрос GET, сервер отправляет ответ, содержащий запрошенные данные. Эти данные могут быть в различных форматах, таких как JSON, HTML или обычный текст. Запросы GET можно легко выполнить с помощью fetch API или XMLHttpRequest (XHR). Примечание для сайта: метод XMLHttpRequest может запрашивать данные из конечной точки/URL API веб-сервера без полного обновления страницы.

fetch("http://localhost:3000/toys")
  .then((response) => response.json())
  .then((json) => console.log(json));
  .catch(error => console.error(error));

В этом примере мы используем метод fetch для выполнения запроса GET к URL-адресу http://localhost:3000/toys. Этот URL-адрес является конечной точкой API, к которому мы обращаемся, и он указывает данные, которые мы хотим получить с сервера.

Как только запрос сделан, метод then используется для обработки ответа. Метод reponse.json вызывается для объекта ответа для извлечения данных JSON из ответа. Этот метод возвращает обещание, которое разрешается с помощью проанализированных данных JSON.

Второй метод then используется для обработки проанализированных данных. В этом примере мы просто записываем данные в консоль, но вы можете использовать данные для других целей, например, для их отображения на веб-странице.

Наконец, метод catch используется для обработки любых ошибок, которые могут возникнуть во время запроса или ответа. При возникновении ошибки сообщение об ошибке выводится на консоль.

Опубликовать

Запросы POST используются для создания новых ресурсов на сервере. При выполнении POST-запроса данные отправляются на сервер в теле запроса. Эти данные могут быть в различных форматах, таких как JSON или FormData. Затем сервер создает новый ресурс на основе предоставленных данных и отправляет ответ, содержащий сведения о вновь созданном ресурсе. Запросы POST также можно легко выполнять с помощью fetch API или XHR.

const requestOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'johndoe', password: 'secretpassword' })
};

fetch('https://api.example.com/login', requestOptions)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

В этом примере мы используем метод fetch для выполнения POST-запроса к URL-адресу https://api.example.com/login. Этот URL-адрес является конечной точкой API, к которому мы обращаемся, и он указывает действие, которое мы хотим выполнить на сервере, а именно войти в систему с именем пользователя и паролем.

Чтобы сделать запрос POST, нам нужно указать параметры запроса, которые включают метод запроса, заголовки и тело. В этом примере мы используем литерал объекта для определения следующих параметров:

  • method: указывает используемый HTTP-метод, в данном случае POST.
  • headers: указывает заголовки для включения в запрос, включая заголовок Content-Type, установленный на application/json. Это указывает на то, что тело запроса находится в формате JSON.
  • body: указывает данные для включения в тело запроса, в данном случае это имя пользователя и пароль. Метод JSON.stringify используется для преобразования данных в строку JSON.

Исправить

Запросы PATCH используются для обновления существующих ресурсов на сервере. При выполнении запроса PATCH данные отправляются на сервер в теле запроса с указанием изменений, которые необходимо внести в ресурс. Затем сервер обновляет ресурс и отправляет ответ, содержащий сведения об обновленном ресурсе. Как и запросы GET и POST, запросы PATCH также можно легко выполнить с помощью fetch API или XHR.

const requestOptions = {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John Doe Jr.' })
};

fetch('https://api.example.com/users/123', requestOptions)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

В этом примере мы используем метод fetch для отправки запроса PATCH на URL-адрес https://api.example.com/users/123. Этот URL-адрес указывает пользователя с идентификатором 123, которого мы хотим обновить на сервере.

Чтобы сделать запрос PATCH, нам нужно указать параметры запроса, которые включают метод запроса, заголовки и тело. В этом примере мы используем литерал объекта для определения следующих параметров:

  • method: указывает используемый метод HTTP, в данном случае это PATCH.
  • headers: указывает заголовки для включения в запрос, включая заголовок Content-Type, установленный на application/json. Это указывает на то, что тело запроса находится в формате JSON.
  • body: указывает данные для включения в тело запроса, в данном случае это обновленное имя пользователя. Метод JSON.stringify используется для преобразования данных в строку JSON.

Таким образом, запросы GET используются для извлечения данных, запросы POST используются для создания новых ресурсов, а запросы PATCH используются для обновления существующих ресурсов. Эти три типа запросов необходимы для создания веб-приложений, которые взаимодействуют с серверами и позволяют пользователям выполнять различные действия.

Источники:







https://javascript.info/fetch