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

В 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, которое содержит обработчик событий, вызываемый при срабатывании события readystatechanged.

Если вы посмотрите на консоль браузера, она вернет массив данных в формате JSON. Но как мы узнаем, выполнен ли запрос? Другими словами, как нам обработать ответ с помощью Ajax? У onreadystatechange есть два метода, readyState и status, которые позволяют нам проверить статус запроса.

Если readyState равно 4, запрос выполнен. Помимо использования JavaScript для прямых вызовов Ajax, существуют другие более мощные методы вызовов HTTP, такие как метод $.AjaxjQuery.

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

$.ajax

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

Метод $.ajax принимает много параметров, некоторые из них являются обязательными, а некоторые необязательными. Он содержит два параметра обратного вызова, успех и ошибку, для обработки полученного ответа.

Метод $.получить

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

$.post

Метод $.post — это еще один способ отправки данных на сервер. Он принимает три параметра: запрошенный URL-адрес, данные, которые вы хотите отправить, и функцию обратного вызова.

$.getJson

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

jQuery имеет все эти методы для запроса или отправки данных на удаленный сервер. Но на самом деле вы можете объединить все эти методы в один: метод $.ajax, как в следующем примере:

Fetch

fetch — это новый мощный веб-API, который позволяет выполнять асинхронные запросы. Фактически, эта выборка является одним из лучших и любимых способов выполнения HTTP-запросов. Он возвращает «обещание», что является большой особенностью ES6. Если вы не знакомы с ES6, вы можете прочитать о ES6. Промисы позволяют нам более разумно обрабатывать асинхронные запросы. Давайте посмотрим, как работает технология выборки.

Для функции выборки требуется один обязательный параметр: endpointURL. Он также имеет другие необязательные параметры, как показано в следующем примере:

Как видите, у fetch есть много преимуществ для выполнения HTTP-запросов. Кроме того, есть другие модули и плагины, которые позволяют нам отправлять и получать запросы на сервер и с него, такие как Axios.

Axios

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

Применение: Во-первых, вам нужно включить Axios. Есть два способа включить Axios в ваш проект. Во-первых, вы можете использовать npm:npm install axios --save

Затем вам нужно импортировать егоimport axios from 'axios'

Сделайте запрос с помощью axios: С помощью Axios вы можете получать и отправлять данные с сервера с помощью GET и POST.

axios принимает один обязательный параметр, а также может принимать второй необязательный параметр. Это принимает некоторые данные как простой запрос.

СООБЩЕНИЕ:

Axios возвращает «Обещание». Если вы знакомы с промисами, вы, вероятно, знаете, что промисы могут выполнять несколько запросов. Вы можете использовать axios, чтобы делать то же самое и запускать несколько запросов одновременно.

Axios поддерживает множество других методов и опций. Вы можете познакомиться с ними на их официальном сайте