Itt találhatók a legnépszerűbb módszerek a HTTP-kérelmek elküldésére a JavaScript-ben

A JavaScript nagyszerű modulokkal és módszerekkel rendelkezik HTTP-kérelmek készítésére, amelyek felhasználhatók adatok küldésére vagy fogadására egy szerveroldali erőforrásból. Ebben a cikkben néhány népszerű módszert fogunk megvizsgálni, hogyan lehet HTTP-kéréseket készíteni a JavaScript-ben.

Ajax

Az Ajax az aszinkron HTTP kérések hagyományos módja. Az adatokat a HTTP POST módszerrel lehet elküldeni, és a HTTP GET módszerrel fogadni. Vessünk egy pillantást, és GETkérjünk. A JSONPlaceholder, egy ingyenes online REST API-t fogom használni a fejlesztők számára, amely véletlenszerű adatokat szolgáltat JSON formátumban.

Ha HTTP-hívást szeretne indítani az Ajax szolgáltatásban, inicializálnia kell egy új XMLHttpRequest()módszert, meg kell adnia az URL-végpontot és a HTTP-módszert (ebben az esetben GET). Végül a open()metódussal összekapcsoljuk a HTTP metódust és az URL végpontot, és felhívjuk a send()metódust a kérés elindítására.

A HTTP-választ a konzolra naplózza az XMLHTTPRequest.onreadystatechangeesemény indításakor meghívandó eseménykezelőt tartalmazó tulajdonság használatával readystatechanged.

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

Ha megtekinti a böngésző konzolt, akkor az JSON formátumú tömb adatot ad vissza. De honnan tudhatnánk, hogy megtörténik-e a kérés? Más szavakkal, hogyan tudjuk kezelni a válaszokat az Ajax-szal?

Az onreadystatechangeingatlan két módszer, readyStateés statusamelyek lehetővé teszik számunkra, hogy ellenőrizze az állapotát kérésünket.

Ha readyStateegyenlő 4-vel, az azt jelenti, hogy a kérés megtörtént. A readyStateszálláshelyre 5 válasz érkezett. Tudjon meg többet itt.

Az Ajax-hívás JavaScripten történő közvetlen kezdeményezésén kívül vannak más hatékonyabb módszerek is a HTTP-hívások kezdeményezésére, mint például $.Ajaxa jQuery módszer. Most megbeszélem ezeket.

jQuery módszerek

A jQuery számos módszerrel képes kezelni a HTTP-kéréseket. Ezeknek a módszereknek a használatához be kell építenie a jQuery könyvtárat a projektjébe.

$ .ajax

A jQuery Ajax az egyik legegyszerűbb módszer a HTTP-hívás kezdeményezésére.

A $ .ajax metódus sok paramétert igényel, amelyek közül néhány kötelező, mások opcionálisak. Két visszahívási lehetőséget successés errora kapott válasz kezelését tartalmazza .

$ .get módszer

A $ .get metódust használják a GET kérések végrehajtására. Két paraméterre van szükség: a végpontra és egy visszahívási funkcióra.

$ .post

A $.postmódszer egy másik módja az adatok feladásának a kiszolgálóra. Három paraméterre van szükség: a url, a közzétenni kívánt adatokra és egy visszahívási funkcióra.

$ .getJSON

A $.getJSONmódszer csak JSON formátumú adatokat szed be. Két paraméterre van szükség: a urlés egy visszahívási funkcióra.

A jQuery rendelkezik mindezekkel a módszerekkel adatok kérésére vagy távoli kiszolgálóra történő elküldésére. De valójában ezeket a módszereket egybe rakhatja: a $.ajaxmódszert, amint az az alábbi példában látható:

elhozni

fetchegy új, hatékony webes API, amely lehetővé teszi aszinkron kérelmek benyújtását. Valójában fetchaz egyik legjobb és kedvenc módszer a HTTP-kérelem benyújtására. Visszaad egy „Ígéretet”, amely az ES6 egyik nagyszerű tulajdonsága.Ha még nem ismeri az ES6-ot, elolvashatja erről a cikkben. Az ígéretek lehetővé teszik számunkra az aszinkron kérés intelligensebb kezelését. Vessünk egy pillantást a fetchműszakilag működő működésre.

A fetchfüggvény egy szükséges paramétert vesz fel: az endpointURL-t. Más opcionális paraméterekkel is rendelkezik, mint az alábbi példában:

Mint láthatja, fetchsok előnye van a HTTP-kérelmek benyújtásában. Itt többet megtudhat róla. Ezenkívül a Fetch-en belül vannak más modulok és bővítmények, amelyek lehetővé teszik számunkra, hogy kéréseket küldjünk és fogadjunk a szerver felől és a szerver felől, például axiókat.

Axios

Az Axios egy nyílt forráskódú könyvtár HTTP-kérések készítéséhez, és számos nagyszerű szolgáltatást nyújt. Vessünk egy pillantást a működésére.

Használat:

Először is fel kell vennie az Axios-t. Kétféleképpen vonhatja be az Axios-t a projektbe.

Először is használhatja az npm-et:

npm install axios --save

Akkor importálnia kell

import axios from 'axios'

Másodszor, felveheti az axiókat egy CDN segítségével.

Kérés benyújtása axiózussal:

Az Axios segítségével a GETés használatával POSTadatokat lehet lekérni és közzétenni a szerverről.

KAP:

axioselvesz egy szükséges paramétert, és felvehet egy második választható paramétert is. Ez néhány adatot egyszerű lekérdezésként vesz fel.

POST:

Az Axios egy „Ígéretet” ad vissza. Ha ismeri az ígéreteket, akkor valószínűleg tudja, hogy egy ígéret több kérést is teljesíthet. Ugyanezt megteheti axiószal, és egyszerre több kérést is futtathat.

Az Axios sok más módszert és lehetőséget támogat. Itt fedezheti fel őket.

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