12.07.2024 в 17:51

Как отправлять HTTP-запросы с помощью JavaScript

В настоящее время взаимодействие между веб-приложениями осуществляется по протоколу HTTP. Например, предположим, что у вас есть приложение интернет-магазина и вы хотите создать новый продукт. Вам необходимо заполнить всю необходимую информацию и, возможно, нажать кнопку с надписью «Создать».

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

Когда эти запросы и ответы передаются туда и обратно, они должны соответствовать определенному формату, чтобы обе стороны могли понимать друг друга. HTTP был создан для этой цели. Это стандартный сетевой протокол, который позволяет веб-приложениям понимать и взаимодействовать друг с другом.

Каковы методы HTTP-запроса?

Существует несколько методов, которые вы можете использовать для отправки HTTP-запроса, и каждый из них служит разным целям, как показано ниже:

Метод GET

Метод GET используется для запроса данных и ресурсов с сервера. Когда вы отправляете GET запрос, параметры запроса встраиваются в URL-адрес в виде пар name/value, например:

http://example.com/index.html?name1=value1&name2=value2

Обратите внимание, что вопросительный знак (?) обозначает начало списка параметров. Каждый параметр образует пару ключ/значение (name=value), а амперсанд (&) используется для разделения двух разных параметров.

Метод POST

Этот POST метод используется для отправки данных на сервер при добавлении нового ресурса или обновлении существующего ресурса. Параметры хранятся в теле HTTP-запроса.

POST /index.html HTTP/1.1
Host: example.com
name1=value1&name2=value2

Метод DELETE

Этот метод удаляет ресурс с сервера.

Метод HEAD

Метод HEAD работает так же как и GET, за исключением того, что HTTP-ответ, отправленный с сервера, будет содержать только заголовок, но не тело. Это означает, что если сервер ответил «ОК» на запрос, он даст вам ответ 200 OK, но не запрошенный вами ресурс. Вы можете получить ресурс только с помощью метода GET.

Это очень полезно, когда вы проверяете, работает ли сервер. Иногда передача ресурса может занять много времени, и в целях тестирования вам нужен только ответ 200 OK, чтобы знать, что все работает правильно.

Метод PUT

Метод PUT используется для обновления существующих ресурсов и аналогичен POST методу с одним небольшим отличием.

Когда вы используете PUT уже существующий ресурс, старый ресурс будет перезаписан. И выполнение нескольких одинаковых PUT запросов будет иметь тот же эффект, что и выполнение его один раз.

Если вы используете POST с идентичными ресурсами, этот ресурс будет дублироваться каждый раз при выполнении запроса.

Что такое API-интерфейс Fetch?

В течение долгого времени в сообществе JavaScript не было стандартного способа отправки HTTP-запросов. Некоторые люди использовали XMLHttpRequest, например, AJAX, а другие предпочитали внешние библиотеки, такие как Axios или jQuery.

Fetch API был представлен в 2015 году как современный, упрощенный и стандартный способ создания HTTP-запросов с использованием JavaScript. Он поддерживается изначально, поэтому нет необходимости устанавливать какие-либо сторонние библиотеки.

Как отправить запрос GET с помощью JavaScript

Fetch API основан на промисах, а это означает, что он предлагает чистый и лаконичный синтаксис для написания асинхронных операций. Например, вот как вы можете отправить GET запрос с помощью Fetch.

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    // Если ответ не 2xx, выдать ошибку
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }

    // Если ответ — 200 OK, вернуть ответ в формате JSON.
    return response.json();
  })
  .then((data) => console.log(data)) // Вы можете продолжать что-то делать с ответом.
  .catch((error) => console.error("Fetch error:", error)); // В случае ошибки она будет зафиксирована и занесена в журнал.

Вы также можете включить в запрос пользовательские параметры, такие как пользовательские заголовки, токены авторизации и т.д.

fetch("https://jsonplaceholder.typicode.com/users", {
  headers: {
    "Content-Type": "application/json",
    "Authorization": "your-token-here",
  },
  credentials: "same-origin",
})
  .then(. . .);

Как отправить POST запрос с помощью JavaScript

При отправке POST запроса все становится немного сложнее, поскольку вам нужно отправить данные на сервер вместе с телом запроса. Это может усложниться в зависимости от типа отправляемых данных и вашего конкретного варианта использования.

Например, следующий код отправляет данные JSON на серверную часть:

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

Здесь есть несколько вещей, на которые вам следует обратить внимание. Прежде всего, необходимо явно указать метод запроса. Если вы оставите это значение, будет использоваться метод GET по умолчанию.

Кроме того, тело запроса принимает только строковые данные, поэтому вам необходимо использовать метод stringify() для преобразования JSON в строку, прежде чем присваивать его телу запроса.

Именно поэтому важно включать заголовок Content-Type, который позволяет тому, кто находится на принимающей стороне, знать, как анализировать тело запроса.

Однако на практике все обычно сложнее. Например, при работе с веб-формами вместо JSON вы, скорее всего, используете x-www-form-urlencoded кодировку формы, и в этом случае запрос можно отправить так.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector("form");
  const usernameInput = document.getElementById("username");
  const emailInput = document.getElementById("email");

  const formData = new URLSearchParams();

  usernameInput.addEventListener("input", function () {
    formData.set("username", usernameInput.value);
  });

  emailInput.addEventListener("input", function () {
    formData.set("email", emailInput.value);
  });

  form.addEventListener("submit", async function (event) {
    event.preventDefault(); // Запретить действие отправки формы по умолчанию

    await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      body: formData.toString(),
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
  });
});

Если вам нужно загрузить файлы на серверную часть, вам понадобится multipart/form-data кодировка формы.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("myForm");
  const usernameInput = document.getElementById("username");
  const emailInput = document.getElementById("email");
  const pictureInput = document.getElementById("picture");

  const formData = new FormData();

  usernameInput.addEventListener("input", function () {
    formData.set("username", usernameInput.value);
  });

  emailInput.addEventListener("input", function () {
    formData.set("email", emailInput.value);
  });

  pictureInput.addEventListener("change", function () {
    formData.set("picture", pictureInput.files[0]);
  });

  form.addEventListener("submit", async function (event) {
    event.preventDefault(); // Запретить отправку формы по умолчанию

    await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      body: formData,
    });
  });
});

Обратите внимание, что при использовании FormData() для создания тела запроса Content-Type будет заблокирован в multipart/form-data. В этом случае нет необходимости задавать собственный заголовок Content-Type.

Как отправить запрос PUT с помощью JavaScript

Запрос PUT работает аналогично POST, но вы должны не забыть установить method на PUT.

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    id: "123"
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

На самом деле вам придется предоставить id или любой другой ключ, который позволит вам найти запись, которую нужно обновить, в серверной части.

Как отправить запрос DELETE с помощью JavaScript

Запрос DELETE работает аналогично PUT, но не забудьте установить method на DELETE.

fetch("https://jsonplaceholder.typicode.com/users/123", {
  method: "DELETE",
});

Аналогично, не забудьте указать id, чтобы серверное приложение знало, какую запись следует удалить.

Как отправить запрос с помощью XMLHttpRequest (AJAX)

Кроме того в fetch(), также можно сделать HTTP-запрос, используя XMLHttpRequest. В следующем примере показано, как отправить GET запрос к конечной точке https://jsonplaceholder.typicode.com.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error("Error:", xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error("Request failed");
};
xhr.send();

Синтаксис немного более сложен, поскольку XMLHttpRequest для работы с асинхронными операциями использует функции обратного вызова, а это означает, что легко попасть в так называемый ад обратного вызова, где у вас есть слои функций обратного вызова, что усложняет читать и поддерживать вашу кодовую базу.

Однако у XMLHttpRequest есть некоторые преимущества. Из-за того, что XMLHttpRequest намного старше по сравнению с fetch(), он более широко поддерживается. Вам следует рассмотреть возможность использования XMLHttpRequest, когда ваше веб-приложение должно быть совместимо со старыми браузерами.

Как отправить запрос с использованием внешних библиотек

Помимо встроенных методов, вы также можете отправлять HTTP-запросы с помощью сторонних библиотек. Например, вот как вы можете отправить GET запрос с помощью jQuery:

$.get("https://api.example.com/data", function (data) {
  console.log(data);
}).fail(function (error) {
  console.error("Error:", error);
});

jQuery — одна из самых популярных библиотек JavaScript. Она направлена на исправление той части JavaScript, которую сложно использовать, и в этом он преуспел.

В последние годы jQuery потерял некоторую популярность, поскольку с годами ванильный JavaScript улучшился, а проблемы, которые раньше беспокоили людей, были исправлены. Это больше не лучший выбор для создания приложений JavaScript, особенно для новых разработчиков.

В качестве альтернативы вы можете использовать Axios, который представляет собой HTTP-клиент на основе промисов, такой же, как и fetch(), и он был фаворитом людей в течение очень долгого времени, прежде чем fetch() появился.

axios
  .get("https://api.example.com/data")
  .then((response) => console.log(response.data))
  .catch((error) => console.error("Axios error:", error));

Axios и fetch() имеют очень похожий синтаксис, поскольку оба они основаны на промисах. Основное различие между ними заключается в том, что в fetch()они встроены, тогда как Axios требует установки внешней библиотеки. Однако Axios гораздо более функционален, поскольку имеет перехватчики запросов/ответов, автоматическую обработку JSON и встроенные таймауты.

Заключение

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

Fetch API — это современный и стандартный способ создания HTTP-запросов с использованием JavaScript. Он имеет относительно простой синтаксис, что упрощает поддержку вашего проекта.

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

jQuery — это внешний пакет, который может делать множество вещей, включая отправку HTTP-запросов. Хотя значение jQuery в последние годы ослабевает, он все еще используется во многих старых проектах, и вы можете столкнуться с ним в своей работе в качестве разработчика JavaScript.

Axios — сторонняя библиотека, используемая для отправки HTTP-запросов. Она имеет синтаксис, очень похожий на Fetch API, но имеет гораздо более продвинутые функции. Вам решать, нужны ли вам эти функции. Если нет, то обычно рекомендуется использовать fetch() вместо него.

Источник:

How to Send HTTP Requests Using JavaScript

#JavaScript #Начинающим

Войти на сайт