Ево најпопуларнијих начина за постављање ХТТП захтева у ЈаваСцрипт-у

ЈаваСцрипт има сјајне модуле и методе за израду ХТТП захтева који се могу користити за слање или примање података са ресурса на страни сервера. У овом чланку ћемо погледати неколико популарних начина за израду ХТТП захтева у ЈаваСцрипт-у.

Ајак

Ајак је традиционални начин за упућивање асинхроног ХТТП захтева. Подаци се могу слати методом ХТТП ПОСТ и примати методом ХТТП ГЕТ. Хајде да погледамо и поднесемо 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, кликните на фоллов и обратите ми се на Твиттеру.

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