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
В $.post
метода е друг начин за публикуване на данни към сървъра. Необходими са три параметъра: url
данните, които искате да публикувате, и функция за обратно повикване.

$ .getJSON
В $.getJSON
метода извлича само данни, които са в JSON формат. Отнема два параметъра: url
и функцията за обратно извикване.

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

донеси
fetch
е нов мощен уеб API, който ви позволява да правите асинхронни заявки. Всъщност това fetch
е един от най-добрите и любимият ми начин да направя HTTP заявка. Той връща „Обещание“, което е една от страхотните характеристики на ES6.Ако не сте запознати с ES6, можете да прочетете за него в тази статия. Обещанията ни позволяват да обработваме асинхронната заявка по-интелигентно. Нека да разгледаме как fetch
работи технически.

Най fetch
функция отнема един задължителен параметър: на endpoint
URL адреса. Той има и други незадължителни параметри, както в примера по-долу:

Както можете да видите, fetch
има много предимства за отправяне на HTTP заявки. Можете да научите повече за това тук. Освен това, в рамките на извличането има и други модули и плъгини, които ни позволяват да изпращаме и получаваме заявка до и от страна на сървъра, като axios.
Аксиос
Axios е библиотека с отворен код за отправяне на HTTP заявки и предлага много страхотни функции. Нека да разгледаме как работи.
Употреба:
Първо, ще трябва да включите Axios. Има два начина да включите Axios във вашия проект.
Първо, можете да използвате npm:
npm install axios --save
След това ще трябва да го импортирате
import axios from 'axios'
Второ, можете да включите axios с помощта на CDN.
Изпращане на заявка с axios:
С Axios можете да използвате GET
и POST
за извличане и публикуване на данни от сървъра.
ВЗЕМЕТЕ:

axios
взема един задължителен параметър и може да вземе и втори незадължителен параметър. Това приема някои данни като проста заявка.
ПОЩА:

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