Способы отправки HTTP-запросов в JavaScript

Варианты осуществления HTTP-запросов: от нативного до использования сторонних библиотек | The most popular ways to make an HTTP request in JavaScript — Способы отправки HTTP-запросов в JavaScript

Главная СтатьиСпособы отправки HTTP-запросов в JavaScript

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

XMLHttpRequest

XMLHttpRequest - это собственный API в Javascript, который инкапсулирует логику отправки HTTP-запросов без необходимости обновления загруженной веб-страницы (Ajax другими словами). Данные можно отправлять с помощью метода POST и получать с помощью метода GET.

Для начала рассмотрим метод GET, а данные возьмем из https://jsonplaceholder.typicode.com/users - бесплатного API для разработчиков.

Чтобы сделать HTTP-вызов в Ajax, нужно инициализировать новый метод XMLHttpRequest(), указать конечную точку URL (эндпоинт) и метод HTTP (в нашем случае GET). Далее используем метод open(), чтобы связать метод HTTP и эндпоинт, и метод send() для отправки запроса.

Выведем HTTP-ответ в консоль с помощью свойства XMLHttpRequest.onreadystatechange, которое содержит обработчик событий, вызываемый при запуске события readystatechanged.

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/users';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText);  // => получим массив данных в формате JSON
}

Индикатором успешного запроса будет статус со значением 200. Значение статуса любого запроса мы можем увидеть во вкладке Network инструментов разработчика браузера. Однако также можно добавить проверку на статус, чтобы точно понимать, что запрос выполнился.

Свойство onreadystatechange имеет два метода, readyState и status, которые позволяют нам проверить состояние нашего запроса.

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/users';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  if (this.readyState == 4 && this.status == 200) {
    console.log(Http.responseText);
  }
}

Если readyState равно 4, это означает, что запрос выполнен. Подробней про значения здесь.

Рассмотрим теперь запрос POST, служащий для добавления изменений в данные на сервере. Для этого необходимо дополнительно указать данные, которые необходимо отправить и добавить новый метод setRequestHeader:

const user = {
  "name": "Ivan Ivanov",
  "username": "ivan2002",
  "email": "ivan2002@mail.com",
};

const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/users';
Http.open("POST", url);
Http.setRequestHeader("Content-Type", "application/json");
Http.send(JSON.stringify(user));

Ниже добавим другие обработчики событий для отслеживания хода выполнения запроса:

// ход загрузки данных
Http.upload.onprogress = function(e) {
  console.log(e.loaded);  // загруженные данные
  console.log(e.total);  // всего данных
}

// окончание загрузки данных
Http.upload.onload = function(e) {
  console.log("Данные загружены");
}

// полная отправка запроса
Http.onload = function() {
  console.log(Http.status);
}

// ошибка при отправке запроса
Http.onerror = function() {
  console.log("Ошибка запроса");
}

Методы jQuery

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.get

Этот метод используется для выполнения GET-запросов. Он принимает два параметра: эндпоинт и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users';
$.get(url, function (data, status) {
  console.log(data);
});

$.post

Метод для POST-запросов, принимает три параметра: эндпоинт, данные для отправки и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users';
const user = {
  "name": "Ivan Ivanov",
  "username": "ivan2002",
  "email": "ivan2002@mail.com",
};

$.post(url, user, function (data, status) {
  console.log(data);
});

$.getJSON

Метод извлекает только данные в формате JSON. Принимает два параметра: эндпоинт и функцию обратного вызова.

const url='https://jsonplaceholder.typicode.com/users';
$.getJSON(url, function (data, status) {
  console.log(data);
});

$.ajax

jQuery Ajax - один из самых простых способов выполнения HTTP-запроса.

const url='https://jsonplaceholder.typicode.com/users';
$.ajax({
  url: url,
  type: "GET",
  success: function (result) {
    console.log(result);
  },
  error: function (error) {
    console.log(error);
  }
});

С помощью метода $.ajax можно выполнять и остальные запросы, главное - не забывать их указывать в поле type и добавлять дополнительные поля (data, dataType).

Fetch

Fetch - это новый мощный веб-API, который позволяет выполнять асинхронные запросы. Он возвращает промис, который появился в стандарте ES6, что позволяет более разумно обрабатывать асинхронный запрос. Пример простой работы Fetch:

const url='https://jsonplaceholder.typicode.com/users';
fetch(url)
    .then(data => data.json())
    .then(response => console.log(response));

Fetch принимает обязательный параметр - эндпоинт. Однако туда также можно передать и другие параметры:

const url='https://jsonplaceholder.typicode.com/users';
const user = {
  "name": "Ivan Ivanov",
  "username": "ivan2002",
  "email": "ivan2002@mail.com",
};
const otherParam = {
  headers: {
    "content-type": "application/json; charset=UTF-8",
  },
  body: JSON.stringify(user),
  method: "POST",
};

fetch(url, otherParam)
    .then(data => data.json())
    .then(response => console.log(response))
    .catch(error => console.log(error));

Как видим, Fetch значительно снижает сложность и многословность кода за счет использования более простого синтаксиса и промисов.

Axios

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

Чтобы интегрировать библиотеку Axios к себе в проект, мы можем либо установить ее через менеджер пакетов (npm, yarn) и потом сделать импорт, либо, как и в случае с jQuery, просто подключить в коде HTML:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

При выполнении GET-запросов с помощью Axios мы можем использовать специальный метод axios.get().

const url='https://jsonplaceholder.typicode.com/users';
axios.get(url)
    .then(response => console.log(response.data))
    .catch(error => console.log(error))

Для POST-запроса используем другой метод:

const url='https://jsonplaceholder.typicode.com/users';
const user = {
  "name": "Ivan Ivanov",
  "username": "ivan2002",
  "email": "ivan2002@mail.com",
};

axios.post(url, user)
    .then(response => console.log(response.data))
    .catch(error => console.log(error));

Axios сокращает объем работы, которую мы должны выполнять с нашей стороны, чтобы выполнять HTTP-запросы, даже по сравнению с Fetch. Как и Fetch, Axios перехватывает ошибки HTTP в своем методе catch, устраняя необходимость специальной проверки перед обработкой ответа.

Поскольку Axios возвращает промис, можно выполнять одновременно несколько запросов:

function getUser(){
  const url='https://jsonplaceholder.typicode.com/users';
  return axios.get(url);
}
function getPost(){
  const url='https://jsonplaceholder.typicode.com/posts';
  return axios.get(url);
}
axios.all([getUser(), getPost()])
    .then(([users, posts]) => {
      console.log(users.data);
      console.log(posts.data);
    })
    .catch(error => console.log(error))

SuperAgent

SuperAgent - один из первых сторонних пакетов, представленных в JavaScript для выполнения HTTP-запросов. Подобно Axios, он использует XMLHttpRequest API в своей реализации и поставляется с полным набором функций, полезных в ряде задач обработки запросов.

Подключается пакет либо через менеджер, либо в HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/3.4.1/superagent.min.js"></script>

При отправке HTTP-запросов с помощью SuperAgent мы можем полагаться на его специальные методы для инициирования запроса определенного типа. Например, мы можем использовать метод superagent.get() для отправки GET-запросов:

const url='https://jsonplaceholder.typicode.com/users';
superagent.get(url)
    .then(response => console.log(response.body))
    .catch(error => console.log(error))

POST-запрос:

const url='https://jsonplaceholder.typicode.com/users';
const user = {
  "name": "Ivan Ivanov",
  "username": "ivan2002",
  "email": "ivan2002@mail.com",
};

superagent.post(url)
    .send(user)
    .then(response => console.log(response.body))
    .catch(error => console.log(error))

Ky

Ky - это относительно новый пакет Javascript, который можно использовать для выполнения асинхронных HTTP-запросов. Он построен на основе Fetch API, но с более простым синтаксисом и дополнительными функциями.

Пример использования для GET-запроса:

const url='https://jsonplaceholder.typicode.com/users';
async function getData () {
  try {
    const data = await ky.get(url).json();
    console.log(data);
  } catch (error) {
    console.log(error)
  }
}

Пример использования для POST-запроса:

const url='https://jsonplaceholder.typicode.com/users';
const user = {
  "name": "Ivan Ivanov",
  "username": "ivan2002",
  "email": "ivan2002@mail.com",
};

async function postData () {
  try {
    const response = await ky.post(url, {json: user});
    console.log(response);
  } catch (error) {
    console.log(error)
  }
}

Источник: