Ево најпопуларнијих начина за постављање ХТТП захтева у ЈаваСцрипт-у
ЈаваСцрипт има сјајне модуле и методе за израду ХТТП захтева који се могу користити за слање или примање података са ресурса на страни сервера. У овом чланку ћемо погледати неколико популарних начина за израду ХТТП захтева у ЈаваСцрипт-у.
Ајак
Ајак је традиционални начин за упућивање асинхроног ХТТП захтева. Подаци се могу слати методом ХТТП ПОСТ и примати методом ХТТП ГЕТ. Хајде да погледамо и поднесемо GET
захтев. Користићу ЈСОНПлацехолдер, бесплатни РЕСТ АПИ на мрежи за програмере који враћа случајне податке у ЈСОН формату.
Да бисте упутили ХТТП позив у Ајаку, потребно је да покренете нови XMLHttpRequest()
метод, одредите УРЛ крајњу тачку и ХТТП метод (у овом случају ГЕТ). На крају, open()
методу користимо за повезивање ХТТП методе и крајње тачке УРЛ-а и позивамо send()
методу да покрене захтев.
ХТТП одговор евидентирамо на конзоли тако што користимо 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) }
Ако прегледате конзолу прегледача, она ће вратити низ података у ЈСОН формату. Али како бисмо могли знати да ли је захтев испуњен? Другим речима, како можемо да се носимо са одговорима помоћу Ајака?
onreadystatechange
Простор има два метода, readyState
и status
који нам омогућавају да проверите стање наш захтев.

Ако readyState
је једнако 4, значи да је захтев извршен. readyState
Проперти има 5 одговора. Сазнајте више о томе овде.
Осим директног упућивања Ајак позива помоћу ЈаваСцрипт-а, постоје и друге моћније методе упућивања ХТТП позива, попут оне $.Ajax
која је јКуери метода. Сад ћу о томе разговарати.
јКуери методе
јКуери има много метода за лако руковање ХТТП захтевима. Да бисте користили ове методе, мораћете да укључите библиотеку јКуери у свој пројекат.
$ .ајак
јКуери Ајак је једна од најједноставнијих метода за упућивање ХТТП позива.

Метода $ .ајак узима многе параметре, од којих су неки обавезни, а други опционални. Садржи две опције повратног позива success
и error
за руковање примљеним одговором.
$ .гет метода
Метода $ .гет се користи за извршавање ГЕТ захтева. Потребна су два параметра: крајња тачка и функција повратног позива.

$ .пост
$.post
Метод је још један начин да поставите податке на сервер. Потребна су три параметра: url
подаци које желите да објавите и функција повратног позива.

$ .гетЈСОН
$.getJSON
Начин преузима само податке који се у ЈСОН формату. Потребна су два параметра: url
и функција повратног позива.

јКуери има све ове методе за тражење или објављивање података на удаљеном серверу. Али заправо можете све ове методе ставити у један: $.ajax
метод, као што се види у доњем примеру:

дохватити
fetch
је нови моћни веб АПИ који вам омогућава да подносите асинхроне захтеве. У ствари, то fetch
је један од најбољих и најдражих начина за постављање ХТТП захтева. Враћа „Обећање“ што је једна од сјајних карактеристика ЕС6.Ако нисте упознати са ЕС6, можете прочитати о њему у овом чланку. Обећања нам омогућавају да паметнији начин радимо са асинхроним захтевом. Погледајмо како fetch
технички ради.

fetch
Функција узима једну потребну параметар: на endpoint
УРЛ. Такође има и друге опционе параметре као у примеру доле:

Као што видите, fetch
има много предности за прављење ХТТП захтева. Више о томе можете сазнати овде. Поред тога, унутар преузимања постоје и други модули и додаци који нам омогућавају да шаљемо и примамо захтев на и са серверске стране, као што је акиос.
Акиос
Акиос је библиотека отвореног кода за слање ХТТП захтева и пружа многе сјајне функције. Погледајмо како то функционише.
Употреба:
Прво, требали бисте да укључите Акиос. Постоје два начина да Акиос укључите у свој пројекат.
Прво, можете да користите нпм:
npm install axios --save
Тада ћете морати да га увезете
import axios from 'axios'
Друго, можете да укључите аксио преко ЦДН-а.
Подношење захтева помоћу аксиоса:
Са Акиос-ом можете да користите GET
и POST
за преузимање и објављивање података са сервера.
ДОБИТИ:

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:

Пример демо можете погледати на Стацкблитз-у.
Окончање
Управо смо покрили најпопуларније начине за постављање ХТТП захтева за позив у ЈаваСцрипт-у.
Хвала на времену. Ако вам се свиђа, пљескајте до 50, кликните на фоллов и обратите ми се на Твиттеру.
Иначе, недавно сам радио са јаком групом софтверских инжењера за једну од својих мобилних апликација. Организација је била одлична, а производ је испоручен врло брзо, много брже од осталих фирми и хонорараца са којима сам радио, и мислим да их искрено могу препоручити за друге тамошње пројекте. Пошаљите ми имејл ако желите да ступите у контакт - саид@девсдата.цом .