В JavaScript есть замечательные модули и методы, позволяющие создавать HTTP-запросы. Их можно использовать для отправки или получения данных с ресурса со стороны сервера. В этой статье мы рассмотрим несколько популярных способов добавления HTTP-запросов в JavaScript.
AJAX
AJAX – традиционный способ создания асинхронных HTTP-запросов. Данные можно отправлять при помощи метода HTTP POST. Получать информацию можно с использованием метода HTTP GET. Давайте взглянем на этот способ и попробуем сделать запрос GET. Я буду использовать JSONPlaceholder – бесплатный онлайн REST API для разработчиков. Он возвращает случайные данные в формате JSON.
Чтобы сделать HTTP вызов в AJAX, нужно инициализировать новый метод XMLHttpRequest(), описать конечную точку URL и метод HTTP (в данном случае – GET). Наконец, мы применим метод open(), чтобы связать метод HTTP и конечную точку URL. Далее мы вызовем метод send(), чтобы отправить запрос.
Мы записываем HTTP ответ в консоль с использованием свойства XMLHTTPRequest.onreadystatechange. Оно содержит обработчик событий, который будет вызван при запуске события readystatechange.
Если вы просмотрите консоль своего браузера, она будет возвращать массив данных в формате JSON. Но как же нам узнать, когда запрос будет обработан? Другими словами, как же работать с ответами в случае с AJAX?
У свойства onreadystatechange есть 2 метода: readyState и status. Они позволяют нам проверять состояние запроса.
Если значение readyState равно 4, то это значит, что запрос закончен. У свойства readyState есть 5 ответов.
Помимо прямой отправки запроса в AJAX для JavaScript, существуют более мощные способы создавать HTTP-запрос (например, $.ajax) – jQuery, допустим. Сейчас обсудим их.
Методы jQuery
В jQuery есть много методов, позволяющие легко обходиться с HTTP-запросами. Чтобы использовать данные методы, вам понадобится включить в свой проект библиотеку jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$.ajax
Для JavaScript AJAX jQuery – один из самых простых способов обращения к HTTP.
Метод $.ajax имеет много параметров. Некоторые из них являются обязательными, а другие – нет. Этот метод содержит 2 опции обратного вызова: success и error. В них осуществляется работа, когда ответ получен.
$.get
Метод $.get используется для осуществления запросов GET. В нем 2 параметра: конечная точка и функция обратного вызова.
$.post
Метод $.post – еще один способ отправки данных на сервер. Он принимает 3 параметра: url, данные, которые вы хотите отправить, и функцию обратного вызова.
$.getJSON
Метод $.getJSON получает только данные в формате JSON. Он принимает 2 параметра: url и функцию обратного вызова.
В jQuery есть все эти методы, позволяющие отправлять запросы к удаленному серверу и получать от него ответ. Однако, по сути, все эти методы можно уложить в один: для JavaScript – $.ajax (jQuery), как показано ниже:
Fetch
fetch – новый мощный веб-API, который позволяет отправлять асинхронные запросы. Вообще, fetch – это один из лучших (и мой любимый) способов создания HTTP-запросов. Он возвращает Promise («обещание») – замечательную функцию в ES6. Promises позволяют работать с асинхронными запросами по-умному. Взглянем на то, как fetch работает:
Функция fetch принимает всего 1 обязательный параметр: конечную точку URL. В ней также есть и дополнительные параметры, которые продемонстрированы в примере ниже:
Как вы можете заметить, fetch обладает большим количеством преимуществ с точки зрения отправки HTTP-запросов. Кроме того, в fetch есть другие модули и плагины, которые позволяют получать и отправлять запросы к серверной стороне и от нее: например, axios.
Axios
Axios – это открытая библиотека для создания HTTP-запросов. В ней есть много отличных возможностей. Давайте рассмотрим, как она работает.
Для начала вам нужно будет включить Axios. Есть 2 способа включения Axios в свой проект.
Во-первых, можно использовать npm:
npm install axios --save
Затем вам нужно импортировать библиотеку:
import axios from 'axios'
Во-вторых, можно включить Axios при помощи CDN:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Создание запросов с Axios
С Axios можно использовать GET и POST как для того, чтобы получать данные с сервера, так и для того, чтобы отправлять их на него.
GET:
Axios включает в себя 1 обязательный параметр. Он также может принимать второй дополнительный параметр. Он использует данные в качестве простого запроса.
POST:
Axios возвращает Promise («обещание»). Если вы знакомы с обещаниями, то наверняка знаете, что одно обещание может работать с несколькими запросами. То же самое можно проделать с Axios – он тоже может «заниматься» несколькими запросами одновременно.
Axios поддерживает много других методов и опций.
Angular HTTPClient
У Angular есть собственный HTTP модуль, который работает с приложениями на Angular. Он использует библиотеку RxJS для работы с асинхронными запросами. В нем есть много вариантов для осуществления HTTP-запросов.
Отправляем вызов к серверу при помощи Angular HTTPClient
Чтобы сделать запрос с использованием Angular HTTPClient, нам нужно будет запустить свой код в приложении Angular. Из-за этого я и создал такое приложение.
Для начала нужно импортировать HTTPClientModule в app.module.ts.
Затем нам надо создать сервис, который будет обрабатывать запросы. Такой сервис можно легко сгенерировать при помощи Angular CLI.
Далее нужно импортировать HTTPClient в сервис fetchdataService.ts и ввести его в конструктор.
Кроме того, необходимо импортировать fetchdataService в app.component.ts.
//import
import { FetchdataService } from './fetchdata.service';
Наконец, вызываем сервис и запускаем его.
app.component.ts:
Демонстрационный пример можно просмотреть на Stackblitz.
Заключение
Мы только что рассмотрели наиболее распространенные способы создания HTTP-запросов используя JavaScript.