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

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

Аякс

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запуску події.

const Http = new XMLHttpRequest(); const url="//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 у свій проект.

$ .ajax

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

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

$ .get метод

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

$ .пошта

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

$ .getJSON

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

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

отримати

fetch- це новий потужний веб-API, який дозволяє робити асинхронні запити. Насправді, fetchце один з найкращих і мій улюблений спосіб зробити запит HTTP. Він повертає "обіцянку", яка є однією з чудових особливостей ES6.Якщо ви не знайомі з ES6, ви можете прочитати про це в цій статті. Обіцянки дозволяють нам обробляти асинхронний запит розумнішим чином. Давайте подивимось, як fetchтехнічно працює.

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

Як бачите, fetchмає багато переваг для надсилання HTTP-запитів. Ви можете дізнатись більше про це тут. Крім того, в межах вибірки є інші модулі та плагіни, які дозволяють нам надсилати та отримувати запити на сторону сервера та з неї, наприклад axios.

Аксіос

Axios - це бібліотека з відкритим кодом для надсилання HTTP-запитів і надає багато чудових функцій. Давайте подивимось, як це працює.

Використання:

По-перше, вам потрібно буде включити Axios. Є два способи включити Axios у свій проект.

По-перше, ви можете використовувати npm:

npm install axios --save

Тоді вам потрібно буде імпортувати його

import axios from 'axios'

По-друге, ви можете включити аксіо за допомогою CDN.

Оформлення запиту за допомогою аксіо:

За допомогою Axios ви можете використовувати GETі POSTдля отримання та розміщення даних із сервера.

ОТРИМАТИ:

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

ПОСТ:

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

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

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

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

Finally, call the service and run it.

app.component.ts:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].