Найпопулярніші способи зробити запит HTTP у JavaScript

Оригінальна публікація: Here are the most popular ways to make an HTTP request in JavaScript

У JavaScript є чудові модулі та методи для створення запитів HTTP, які можна використовувати для надсилання чи отримання даних зі сторони сервера. У цій публікації ми розглянемо кілька популярних способів створення запитів HTTP у JavaScript.

Ajax

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='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();

Http.onreadystatechange = (e) => {
  console.log(Http.responseText)
}

Якщо ви переглянете консоль браузера, то побачите, що вона поверне масив даних у форматі JSON. Але як ми можемо знати, чи запит виконано? Іншими словами, як ми можемо обробляти відповіді за допомогою Ajax?

Властивість onreadystatechange має два методи: 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

jQuery Ajax є одним із найпростіших методів здійснення виклику HTTP.

Метод $.ajax приймає багато параметрів, деякі з яких є обов’язковими, а інші необов’язковими. Він містить два варіанти функції зворотного виклику: success та error, щоб обробити отриману відповідь.

Метод $.get

Метод $.get використовується для виконання запитів GET. Він приймає два параметри: кінцеву точку та функцію зворотного виклику.

Метод $.post

Метод $.post — це інший спосіб надсилання даних на сервер. Він приймає три параметри: url, дані, які ви хочете надіслати, і функцію зворотного виклику.

$.getJSON

Метод $.getJSON отримує дані лише у форматі JSON. Він приймає два параметри: url та функцію зворотного виклику.

jQuery має ці методи для запиту або надсилання даних на віддалений сервер. Але насправді їх можна поєднати в один метод $.ajax, як показано у прикладі нижче:

Функція fetch

Функція fetch — це новий потужний web API, який дозволяє робити асинхронні запити. Насправді, fetch є одним із найкращих і моїх улюблених способів зробити запит HTTP. Він повертає проміс, що є однією з чудових функцій ES6. Якщо ви не знайомі з ES6, ви можете прочитати про нього в цій публікації. Проміси дозволяють нам розумніше обробляти асинхронний запит. Давайте подивимося, як працює fetch.

Функція fetch приймає один обов’язковий параметр: URL endpoint. Також вона може мати інші додаткові параметри, як у прикладі нижче:

Як ви можете бачити, 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 для отримання та надсилання даних із сервера.

GET:

axios приймає один обов’язковий параметр і може приймати другий необов’язковий параметр. Деякі дані сприймаються як простий запит.

POST:

Axios повертає проміс. Якщо ви знайомі з промісами, ви, мабуть, знаєте, що проміси можуть виконувати кілька запитів. Ви можете робити те саме з axios і виконувати кілька запитів одночасно.

Axios підтримує багато інших методів і опцій. Ви можете дослідити їх тут.

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

Дякую за ваш час. Якщо вам сподобалась публікація, очікую оплесків та підписників у твіттері.