Tu sú najpopulárnejšie spôsoby, ako vytvoriť požiadavku HTTP v JavaScripte

JavaScript má vynikajúce moduly a metódy na vytváranie požiadaviek HTTP, ktoré možno použiť na odosielanie alebo prijímanie údajov zo zdroja na strane servera. V tomto článku sa pozrieme na niekoľko populárnych spôsobov, ako vytvárať požiadavky HTTP v JavaScripte.

Ajax

Ajax je tradičný spôsob, ako vytvoriť asynchrónnu požiadavku HTTP. Dáta je možné odosielať pomocou metódy HTTP POST a prijímať pomocou metódy HTTP GET. Poďme sa na to pozrieť a GETpožiadať. Budem používať JSONPlaceholder, bezplatné online REST API pre vývojárov, ktoré vracia náhodné údaje vo formáte JSON.

Ak chcete uskutočniť hovor HTTP v Ajaxe, musíte inicializovať novú XMLHttpRequest()metódu, zadajte koncový bod URL a metódu HTTP (v tomto prípade GET). Nakoniec túto open()metódu použijeme na spojenie metódy HTTP a koncového bodu adresy URL a zavoláme send()metódu na vypálenie požiadavky.

Odozvu protokolu HTTP zapíšeme do konzoly pomocou XMLHTTPRequest.onreadystatechangevlastnosti, ktorá obsahuje obslužnú rutinu udalosti, ktorá sa má volať pri spustení readystatechangedudalosti.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

Ak zobrazíte konzolu prehľadávača, vráti sa vám pole údajov vo formáte JSON. Ako by sme však vedeli, či je žiadosť splnená? Inými slovami, ako môžeme zvládnuť odpovede s Ajaxom?

onreadystatechangeNehnuteľnosť má dve metódy, readyStatea statusktoré nám umožňujú kontrolovať stav našej žiadosti.

Ak readyStatesa rovná 4, znamená to, že požiadavka je splnená. Toto readyStateubytovacie zariadenie má 5 odpovedí. Viac informácií sa dozviete tu.

Okrem priameho volania Ajaxu pomocou JavaScriptu existujú aj ďalšie výkonnejšie metódy volania HTTP, napríklad $.Ajaxmetóda jQuery. O tých teraz hovorím.

jQuery metódy

jQuery má veľa metód na ľahké vybavenie požiadaviek HTTP. Aby ste mohli použiť tieto metódy, musíte do svojho projektu zahrnúť knižnicu jQuery.

$ .ajax

jQuery Ajax je jednou z najjednoduchších metód na uskutočnenie hovoru HTTP.

Metóda $ .ajax vyžaduje mnoho parametrov, z ktorých niektoré sú povinné a iné voliteľné. Obsahuje dve možnosti spätného volania successa errorna spracovanie prijatej odpovede.

$ .get metóda

Na vykonávanie požiadaviek GET sa používa metóda $ .get. Má dva parametre: koncový bod a funkcia spätného volania.

$ .post

Táto $.postmetóda je ďalším spôsobom, ako odoslať údaje na server. Trvá to tri parametre: urldáta, ktoré chcete odoslať, a funkcia spätného volania.

$ .getJSON

$.getJSONMetóda načíta iba údaje, ktoré sú vo formáte JSON. Má dva parametre: funkciu urla spätné volanie.

jQuery má všetky tieto metódy na vyžiadanie alebo odoslanie údajov na vzdialený server. Všetky tieto metódy však môžete dať do jednej: $.ajaxmetódu, ako je vidieť v príklade nižšie:

aportovať

fetchje nové výkonné webové rozhranie API, ktoré umožňuje vykonávať asynchrónne požiadavky. V skutočnosti fetchje to jeden z najlepších a môj najobľúbenejší spôsob, ako vytvoriť požiadavku HTTP. Vracia „Prísľub“, ktorý je jednou z veľkých vlastností ES6.Ak nie ste oboznámení s ES6, môžete si o ňom prečítať v tomto článku. Sľuby nám umožňujú vybaviť asynchrónnu požiadavku inteligentnejším spôsobom. Poďme sa pozrieť na to, ako fetchtechnicky funguje.

fetchFunkcia má jeden povinný parameter: do endpointURL. Má tiež ďalšie voliteľné parametre, ako v príklade nižšie:

Ako vidíte, fetchmá veľa výhod pri vytváraní požiadaviek HTTP. Viac informácií sa dozviete tu. Okrem toho v rámci načítania existujú ďalšie moduly a doplnky, ktoré nám umožňujú odosielať a prijímať žiadosti na a zo strany servera, napríklad axios.

Axios

Axios je knižnica otvoreného zdroja na vytváranie požiadaviek HTTP a poskytuje mnoho skvelých funkcií. Poďme sa pozrieť na to, ako to funguje.

Použitie:

Najprv by ste mali zahrnúť Axios. Existujú dva spôsoby, ako zahrnúť Axios do vášho projektu.

Najprv môžete použiť npm:

npm install axios --save

Potom by ste to museli importovať

import axios from 'axios'

Po druhé, axios môžete zahrnúť pomocou siete CDN.

Zadanie požiadavky v systéme axios:

S Axios môžete používať GETa POSTna získavanie a zverejňovanie údajov zo servera.

ZÍSKAJTE:

axiosvezme jeden požadovaný parameter a môže zobrať aj druhý voliteľný parameter. Niektoré údaje sa berú ako jednoduchý dopyt.

POST:

Axios vracia „Prísľub“. Ak poznáte sľuby, pravdepodobne viete, že sľub môže vykonať viac žiadostí. S axios môžete robiť to isté a spúšťať naraz viac požiadaviek.

Axios podporuje mnoho ďalších metód a možností. Môžete ich preskúmať tu.

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:

Ukážkový príklad si môžete pozrieť na stránkach Stackblitz.

Balenie

Práve sme sa venovali najpopulárnejším spôsobom, ako vytvoriť požiadavku na volanie HTTP v JavaScripte.

Ďakujem za Tvoj čas. Ak sa vám páči, klepnite na 50, kliknite na tlačidlo Sledovať a oslovte ma na Twitteri.

Mimochodom, nedávno som spolupracoval so silnou skupinou softvérových inžinierov pre jednu z mojich mobilných aplikácií. Organizácia bola skvelá a produkt bol dodaný veľmi rýchlo, oveľa rýchlejšie ako iné firmy a nezávislí pracovníci, s ktorými som spolupracoval, a myslím si, že ich môžem čestne odporučiť pre ďalšie projekty. Ak sa chcete ozvať, napíšte mi e-mail - [email protected] .