
Содержание статьи
JavaScript имеет отличные модули и методы создания HTTP-запросов, которые можно использовать для отправки или получения данных с серверного ресурса. В этой статье мы рассмотрим несколько популярных способов создания HTTP-запросов JavaScript.
Аякс
Ajax – это традиционный способ создания асинхронного HTTP-запроса. Данные можно отправлять с помощью HTTP POST и получать с помощью HTTP GET. Давайте посмотрим и сделаем а GET
запрос. Я буду использовать JSONPlaceholder, бесплатный онлайн API REST для разработчиков, который возвращает случайные данные в формате JSON.
Чтобы совершить HTTP-вызов в Ajax, вам нужно инициализировать новый XMLHttpRequest()
метод, укажите конечную точку URL и метод HTTP (в этом случае GET). Наконец, мы используем open()
метод, чтобы связать метод HTTP и конечную точку URL вместе и вызвать метод send()
способ запуска запроса
Мы регистрируем ответ HTTP на консоли с помощью XMLHTTPRequest.onreadystatechange
свойство, содержащее обработчик события, который будет вызван, когда readystatechanged
событие уволено.

const Http = new XMLHttpRequest();
const url="
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}
Если вы просматриваете консоль браузера, она вернет массив данных в формате JSON. Но как мы узнаем, выполнен ли запрос? Другими словами, как мы можем обрабатывать ответы с помощью Ajax?
The onreadystatechange
свойство имеет два метода, readyState
и status
которые позволяют нам проверить состояние нашего запроса.

Если readyState
равно 4, это означает, что запрос выполнен. The 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
jQuery Ajax является одним из самых простых методов осуществления HTTP-вызова.

Метод $.ajax принимает множество параметров, некоторые из которых являются обязательными, а другие – необязательными. Он содержит два варианта обратного звонка. success
и error
для обработки полученного ответа
метод $.get
Метод $.get используется для выполнения запросов GET. Он принимает два параметра: конечную точку и функцию обратного вызова.

$.post
The $.post
метод является еще одним способом отправки данных на сервер. Для этого требуются три параметра: url
данные, которые необходимо опубликовать, и функцию обратного вызова.

$.getJSON
The $.getJSON
метод получает только данные в формате JSON. Для этого требуются два параметра: url
и функция обратного вызова

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

получить
fetch
это новый мощный веб-API, позволяющий делать асинхронные запросы. На самом деле, fetch
это один из самых лучших и моих любимых способов сделать HTTP-запрос. Он возвращает Promise, что является одной из замечательных функций ES6. Если вы не знакомы с ES6, вы можете прочесть о нем в этой статье. Обещания позволяют нам обрабатывать асинхронный запрос более разумным образом. Давайте посмотрим, как fetch
технически работает.

The fetch
функция принимает один необходимый параметр: the endpoint
URL. Он также имеет другие дополнительные параметры, как в примере ниже:

Как вы можете видеть, fetch
имеет много преимуществ для создания HTTP-запросов. Вы можете узнать больше об этом здесь. Кроме того, в fetch есть другие модули и плагины, позволяющие нам отправлять и получать запросы на сервер и от него, например axios.
Axios
Axios – это библиотека с открытым исходным кодом для создания HTTP-запросов и предоставляет много замечательных функций. Давайте посмотрим, как это работает.
Использование:
Во-первых, вам нужно включить Axios. Есть два способа включить 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
для получения и размещения данных с сервера.
ПОЛУЧИТЬ:

axios
принимает один необходимый параметр и может принимать второй необязательный параметр. Это принимает некоторые данные в качестве простого запроса.
ПУБЛИКАЦИЯ:

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

Axios поддерживает многие другие методы и опции. Вы можете изучить их здесь.
Угловой HttpClient
Angular имеет свой модуль HTTP, который работает с приложениями Angular. Он использует библиотеку RxJS для обработки асинхронных запросов и дает множество опций для выполнения запросов HTTP.
Вызов на сервер с помощью Angular HttpClient
Чтобы запросить Angular HttpClient, мы должны запустить наш код внутри программы Angular. Потому я создал один. Если вы не знакомы с Angular, посмотрите мою статью, узнайте, как создать свою первую программу Angular за 20 минут.
Первое, что нам нужно сделать, это импортировать HttpClientModule
в app.module.ts

Затем мы должны создать службу для обработки запросов. Вы можете легко создать сервис с помощью Angular CLI.
ng g service FetchdataService
Затем нам нужно импортировать HttpClient fetchdataService.ts
сервис и вставьте его внутрь конструктора.

И в app.component.ts
импорт fetchdataService
//import
import { FetchdataService } from './fetchdata.service';
Наконец, позвоните в службу и запустите ее.
app.component.ts:

Вы можете просмотреть демонстрационный пример Stackblitz.
Подведению
Мы только что рассмотрели самые популярные способы запроса вызова HTTP в JavaScript.
Спасибо за ваше время. Если вам это нравится, щелкните 50, нажмите «Подписаться» и свяжитесь со мной в Twitter.
Кстати, недавно я работал с сильной группой инженеров-программистов над одним из моих мобильных приложений. Организация была превосходной, и продукт был доставлен очень быстро, гораздо быстрее, чем другие фирмы и фрилансеры, с которыми я работал, и я думаю, что я могу честно рекомендовать их для других проектов. Отправьте мне электронное письмо, если хотите связаться. said@devsdata.com.