falbar Самые популярные способы создания HTTP-запросов в JavaScript

Самые популярные способы создания HTTP-запросов в JavaScript

30 декабря 2018 Перевод 1785 0

В 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.

const-http-new-xmlhttprequest

Если вы просмотрите консоль своего браузера, она будет возвращать массив данных в формате JSON. Но как же нам узнать, когда запрос будет обработан? Другими словами, как же работать с ответами в случае с AJAX?

У свойства onreadystatechange есть 2 метода: readyState и status. Они позволяют нам проверять состояние запроса.

const-http-new-xmlhttprequest-2

Если значение 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.

http-zaprosov-v-javascript-ajax

Метод $.ajax имеет много параметров. Некоторые из них являются обязательными, а другие – нет. Этот метод содержит 2 опции обратного вызова: success и error. В них осуществляется работа, когда ответ получен.

$.get

Метод $.get используется для осуществления запросов GET. В нем 2 параметра: конечная точка и функция обратного вызова.

http-zaprosov-v-javascript-get

$.post

Метод $.post – еще один способ отправки данных на сервер. Он принимает 3 параметра: url, данные, которые вы хотите отправить, и функцию обратного вызова.

http-zaprosov-v-javascript-post

$.getJSON

Метод $.getJSON получает только данные в формате JSON. Он принимает 2 параметра: url и функцию обратного вызова.

http-zaprosov-v-javascript-getjson

В jQuery есть все эти методы, позволяющие отправлять запросы к удаленному серверу и получать от него ответ. Однако, по сути, все эти методы можно уложить в один: для JavaScript – $.ajax (jQuery), как показано ниже:

http-zaprosov-v-javascript-methods-into-one

Fetch

fetch – новый мощный веб-API, который позволяет отправлять асинхронные запросы. Вообще, fetch – это один из лучших (и мой любимый) способов создания HTTP-запросов. Он возвращает Promise («обещание») – замечательную функцию в ES6. Promises позволяют работать с асинхронными запросами по-умному. Взглянем на то, как fetch работает:

http-zaprosov-v-javascript-fetch-1

Функция fetch принимает всего 1 обязательный параметр: конечную точку URL. В ней также есть и дополнительные параметры, которые продемонстрированы в примере ниже:

http-zaprosov-v-javascript-fetch-2

Как вы можете заметить, 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:

http-zaprosov-v-javascript-axios-1

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

POST:

http-zaprosov-v-javascript-axios-2

Axios возвращает Promise («обещание»). Если вы знакомы с обещаниями, то наверняка знаете, что одно обещание может работать с несколькими запросами. То же самое можно проделать с Axios – он тоже может «заниматься» несколькими запросами одновременно.

http-zaprosov-v-javascript-axios-3

Axios поддерживает много других методов и опций.

Angular HTTPClient

У Angular есть собственный HTTP модуль, который работает с приложениями на Angular. Он использует библиотеку RxJS для работы с асинхронными запросами. В нем есть много вариантов для осуществления HTTP-запросов.

Отправляем вызов к серверу при помощи Angular HTTPClient

Чтобы сделать запрос с использованием Angular HTTPClient, нам нужно будет запустить свой код в приложении Angular. Из-за этого я и создал такое приложение.

Для начала нужно импортировать HTTPClientModule в app.module.ts.

http-zaprosov-v-javascript-angular-1

Затем нам надо создать сервис, который будет обрабатывать запросы. Такой сервис можно легко сгенерировать при помощи Angular CLI.

Далее нужно импортировать HTTPClient в сервис fetchdataService.ts и ввести его в конструктор.

http-zaprosov-v-javascript-angular-2

Кроме того, необходимо импортировать fetchdataService в app.component.ts.

//import 
import { FetchdataService } from './fetchdata.service';

Наконец, вызываем сервис и запускаем его.

app.component.ts:

http-zaprosov-v-javascript-angular-3

Демонстрационный пример можно просмотреть на Stackblitz.

Заключение

Мы только что рассмотрели наиболее распространенные способы создания HTTP-запросов используя JavaScript.

Реклама
Комментариев еще не оставлено
no_avatar