Улучшите свою игру в веб-разработку: научитесь писать HTTP-запросы на JavaScript

Статья Совершенствуйте свою игру в веб-разработке: научитесь писать HTTP-запросы на JavaScript была впервые опубликована во вторник, 3 января 2023 г., в Блоге технических разработчиков. Для получения новейшего актуального контента, только что из печи, посетите https://techdevblog.io и подпишитесь на нашу рассылку!

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

HTTP-запросы в браузере

В браузере есть два основных способа выполнения HTTP-запросов: с помощью объекта XMLHttpRequest или с помощью fetch API.

XMLHttpRequest

Объект XMLHttpRequest существует уже давно и поддерживается всеми современными браузерами. Он позволяет отправлять HTTP-запросы на сервер и получать ответ. Вот пример того, как использовать XMLHttpRequest для отправки запроса GET на сервер для получения некоторых данных:

const xhr = new XMLHttpRequest();

xhr.open('GET', '/data');
xhr.send();

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};

В этом примере мы сначала создаем новый объект XMLHttpRequest, а затем вызываем метод open, чтобы указать тип запроса (GET) и URL-адрес для отправки запроса. Затем вызывается метод send для отправки запроса.

Наконец, мы настроили обработчик событий onload, который будет вызываться при завершении запроса. В обработчике мы проверяем свойство status объекта XMLHttpRequest, чтобы убедиться, что запрос был успешным (статус 200 указывает на успех), а затем записываем данные ответа в консоль.

Вы также можете использовать XMLHttpRequest для отправки POST-запросов и других типов HTTP-запросов. Вот пример того, как отправить запрос POST:

const xhr = new XMLHttpRequest();

xhr.open('POST', '/data');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John', age: 30 }));

xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  }
};

В этом примере мы сначала создаем новый объект XMLHttpRequest, а затем вызываем метод open, чтобы указать тип запроса (POST) и URL-адрес для отправки запроса. Затем мы устанавливаем для заголовка запроса Content-Type значение application/json, чтобы указать, что мы отправляем данные JSON в теле запроса. Наконец, мы вызываем метод send и передаем ему строковую версию объекта, содержащего данные, которые мы хотим отправить.

Получить API

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

fetch('/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

В этом примере мы вызываем функцию fetch и передаем ей URL-адрес, на который мы хотим отправить запрос. Функция fetch возвращает обещание, которое разрешается с ответом сервера.

Мы связываем вызов метода then с обещанием, возвращенным fetch, и в функции обратного вызова мы вызываем метод json для объекта ответа, чтобы проанализировать ответ как JSON. Мы связываем еще один вызов метода then с промисом, возвращенным методом json, и в этой функции обратного вызова мы записываем данные в консоль.

Если в какой-то момент произойдет ошибка, она будет обнаружена методом catch, который выведет ошибку на консоль.

Вы также можете использовать fetch API для отправки POST-запросов и других типов HTTP-запросов. Вот пример того, как отправить запрос POST:

fetch('/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

В этом примере мы вызываем функцию fetch и передаем ей URL-адрес, на который мы хотим отправить запрос, а также объект параметров. В объекте параметров мы указываем method как «POST», headers как объект, содержащий заголовок запроса Content-Type, установленный в «application/json», и body как строковую версию объекта, содержащего данные, которые мы хотим отправить.

HTTP-запросы в Node.js

В Node.js есть несколько способов выполнения HTTP-запросов.

Модуль Node.js `http`

Одним из самых популярных является модуль http, встроенный в Node.js. Вот пример того, как использовать модуль http для отправки запроса GET на сервер для получения некоторых данных:

const http = require('http');

http.get('/data', res => {
  res.setEncoding('utf8');
  let data = '';
  res.on('data', chunk => {
    data += chunk;
  });
  res.on('end', () => {
    console.log(data);
  });
});

В этом примере нам требуется модуль http, а затем вызывается метод get, передавая ему URL-адрес, на который мы хотим отправить запрос, и функцию обратного вызова, которая будет вызываться при получении ответа.

В функции обратного вызова мы устанавливаем кодировку ответа «utf8» и создаем переменную для хранения данных ответа. Затем мы настраиваем прослушиватель событий для события «данные», которое генерируется при получении порции данных. В обработчике события мы добавляем порцию данных к переменной data.

Наконец, мы настраиваем прослушиватель событий для события «конец», которое генерируется, когда все данные получены. В обработчике событий мы записываем переменную data в консоль.

Вы также можете использовать модуль http для отправки POST-запросов и других типов HTTP-запросов. Вот пример того, как отправить запрос POST:

const http = require('http');
const data = JSON.stringify({ name: 'John', age: 30 });

const options = {
  hostname: 'localhost',
  port: 8080,
  path: '/data',
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Content-Length': data.length
  }
};

const req = http.request(options, res => {
  res.setEncoding('utf8');
  let data = '';
  res.on('data', chunk => {
    data += chunk;
  });
  res.on('end', () => {
    console.log(data);
  });
});

req.write(data);
req.end();

В этом примере мы сначала требуем модуль http и создаем переменную для хранения данных, которые мы хотим отправить в запросе. Затем мы создаем объект параметров с необходимой информацией для запроса, включая имя хоста, порт, путь, метод и заголовки.

Затем мы вызываем метод request для объекта http, передавая ему объект параметров и функцию обратного вызова, которая будет вызываться при получении ответа. В функции обратного вызова мы устанавливаем кодировку ответа «utf8» и создаем переменную для хранения данных ответа, как в примере с запросом GET.

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

HTTP-запросы с библиотеками

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

Аксиос

Одной из популярных библиотек для выполнения HTTP-запросов в Node.js является axios. axios — это HTTP-клиент на основе Promise, который работает в браузере и в Node.js. Вот пример того, как использовать axios для отправки запроса GET на сервер для получения некоторых данных:

const axios = require('axios');

axios.get('/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

В этом примере нам требуется библиотека axios, а затем вызывается метод get, передавая ему URL-адрес, на который мы хотим отправить запрос. Метод get возвращает обещание, которое разрешается с ответом сервера.

Мы связываем вызов метода then с промисом, возвращенным axios.get, и в функции обратного вызова мы записываем свойство data объекта ответа в консоль. Если в какой-то момент произойдет ошибка, она будет обнаружена методом catch, который запишет ошибку в консоль.

Вы также можете использовать axios для отправки POST-запросов и других типов HTTP-запросов. Вот пример того, как отправить запрос POST:

const axios = require('axios');

axios.post('/data', { name: 'John', age: 30 })
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

В этом примере нам требуется библиотека axios, а затем вызывается метод post, передавая ему URL-адрес, на который мы хотим отправить запрос, и объект, содержащий данные, которые мы хотим отправить. Метод post возвращает обещание, которое разрешается с ответом сервера.

Мы связываем вызов метода then с промисом, возвращенным axios.post, и в функции обратного вызова мы записываем свойство data объекта ответа в консоль. Если в какой-то момент произойдет ошибка, она будет обнаружена методом catch, который выведет ошибку на консоль.

jQuery

Другой популярной библиотекой для выполнения HTTP-запросов в браузере является jQuery, которая предоставляет ряд служебных функций для выполнения Ajax-запросов. Вот пример того, как использовать jQuery для отправки запроса GET на сервер для получения некоторых данных:

$.get('/data', data => {
  console.log(data);
});

В этом примере мы вызываем функцию get, предоставленную jquery, и передаем ей URL-адрес, на который мы хотим отправить запрос, и функцию обратного вызова, которая будет вызываться при получении ответа. В функции обратного вызова мы записываем данные в консоль.

Вы также можете использовать jquery для отправки POST-запросов и других типов HTTP-запросов. Вот пример того, как отправить запрос POST:

$.post('/data', { name: 'John', age: 30 }, data => {
  console.log(data);
});

В этом примере мы вызываем функцию post, предоставленную jquery, и передаем ей URL-адрес, на который мы хотим отправить запрос, объект, содержащий данные, которые мы хотим отправить, и функцию обратного вызова, которая будет вызываться при получении ответа. В функции обратного вызова мы записываем данные в консоль.

Заключение

В этой статье мы рассмотрели, как писать HTTP-запросы на JavaScript как в браузере, так и в Node.js, как с использованием библиотек, так и без них. Мы также рассмотрели несколько различных вариантов создания HTTP-запросов, включая объект XMLHttpRequest, API fetch, модуль http и такие библиотеки, как axios и jquery.

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