Tu so najpopularnejši načini za vstavljanje zahteve HTTP v JavaScript

JavaScript ima odlične module in metode za izdelavo HTTP zahtev, ki jih je mogoče uporabiti za pošiljanje ali prejemanje podatkov iz vira na strani strežnika. V tem članku si bomo ogledali nekaj priljubljenih načinov za izdelavo zahtev HTTP v JavaScript.

Ajax

Ajax je tradicionalen način za asinhrono zahtevo HTTP. Podatke je mogoče poslati z uporabo metode HTTP POST in prejeti z uporabo metode HTTP GET. Poglejmo in GETzaprosimo. Uporabil bom JSONPlaceholder, brezplačni spletni REST API za razvijalce, ki vrne naključne podatke v obliki JSON.

Če želite klicati HTTP v Ajaxu, morate inicializirati novo XMLHttpRequest()metodo, določiti končno točko URL-ja in metodo HTTP (v tem primeru GET). Na koncu open()metodo uporabimo za povezavo metode HTTP in končne točke URL-ja in jo pokličemo, send()da sproži zahtevo.

Odziv HTTP zapišemo v konzolo tako, da uporabimo XMLHTTPRequest.onreadystatechangelastnost, ki vsebuje obdelovalec dogodkov, ki ga je treba poklicati, ko se readystatechangeddogodek sproži.

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

Če si ogledate konzolo brskalnika, bo vrnila vrsto podatkov v obliki JSON. Kako pa bi vedeli, ali je prošnja izpolnjena? Z drugimi besedami, kako lahko obvladujemo odzive z Ajaxom?

onreadystatechangeLastnost ima dva načina, readyStatein statuski nam omogočajo, da preveri stanje našo zahtevo.

Če readyStateje enako 4, pomeni, da je zahteva opravljena. readyStateLastnost ima 5 odzive. Več o tem lahko preberete tukaj.

Poleg neposrednega klicanja Ajaxa z JavaScriptom obstajajo še drugi močnejši načini klicanja HTTP, kot $.Ajaxje metoda jQuery. Zdaj bom razpravljal o teh.

metode jQuery

jQuery ima veliko načinov za enostavno obdelavo zahtev HTTP. Če želite uporabiti te metode, boste morali v svoj projekt vključiti knjižnico jQuery.

$ .ajax

jQuery Ajax je ena najpreprostejših metod za klicanje HTTP.

Metoda $ .ajax zajema veliko parametrov, od katerih so nekateri obvezni, drugi pa neobvezni. Vsebuje dve možnosti povratnega klica successin errorobdelavo prejetega odgovora.

$ .get metoda

Metoda $ .get se uporablja za izvajanje zahtev GET. Zajema dva parametra: končno točko in funkcijo povratnega klica.

$ .post

$.postMetoda je še en način za pošiljanje podatkov na strežnik. Potrebni so trije parametri: urlpodatki, ki jih želite objaviti, in funkcija povratnega klica.

$ .getJSON

$.getJSONNačin pridobi le podatke, ki jih je v obliki JSON. Zajema dva parametra: funkcijo urlin povratni klic.

jQuery ima vse te metode za zahtevanje ali objavo podatkov na oddaljenem strežniku. Toda vse te metode lahko dejansko združite v eno: $.ajaxmetodo, kot je razvidno iz spodnjega primera:

prinesi

fetchje nov zmogljiv spletni API, ki vam omogoča pošiljanje asinhronih zahtev. Pravzaprav fetchje to eden izmed najboljših in mojih najljubših načinov za zahtevo HTTP. Vrne "Promise", ki je ena od odličnih lastnosti ES6.Če ES6 ne poznate, lahko o njem preberete v tem članku. Obljube nam omogočajo pametnejšo obdelavo asinhrone zahteve. Oglejmo si, kako fetchtehnično deluje.

fetchFunkcija traja eno zahtevane parametre: v endpointURL. Ima tudi druge neobvezne parametre, kot v spodnjem primeru:

Kot lahko vidite, fetchima veliko prednosti za pošiljanje zahtev HTTP. Več o tem lahko izveste tukaj. Poleg tega znotraj prenosa obstajajo še drugi moduli in vtičniki, ki nam omogočajo pošiljanje in prejemanje zahtev na strani strežnika in z nje, na primer axios.

Axios

Axios je odprtokodna knjižnica za pošiljanje zahtev HTTP in ponuja veliko odličnih funkcij. Oglejmo si, kako deluje.

Uporaba:

Najprej bi morali vključiti Axios. Axiosa lahko v svoj projekt vključite na dva načina.

Najprej lahko uporabite npm:

npm install axios --save

Potem bi ga morali uvoziti

import axios from 'axios'

Drugič, aksio lahko vključite s CDN-jem.

Izdelava zahteve z aksiomi:

Z Axios lahko uporabite GETin POSTza pridobivanje in post podatke iz strežnika.

GET:

axiosvzame en zahtevan parameter, lahko pa tudi drugega neobveznega parametra. To je nekaj podatkov preprosto poizvedbo.

POST:

Axios vrne "obljubo." Če ste seznanjeni z obljubami, verjetno veste, da lahko obljuba izvede več zahtev. Z aksio lahko storite isto in hkrati zaženete več zahtev.

Axios podpira številne druge metode in možnosti. Tu jih lahko raziščete.

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:

Predstavitveni primer si lahko ogledate na Stackblitz.

Zavijanje

Pravkar smo opisali najbolj priljubljene načine za pošiljanje zahteve za klic HTTP v JavaScript.

Hvala za vaš čas. Če vam je všeč, ploskajte do 50, kliknite sledite in se obrnite na mene na Twitterju.

Mimogrede, pred kratkim sem sodeloval z močno skupino programskih inženirjev za eno od svojih mobilnih aplikacij. Organizacija je bila odlična in izdelek je bil dostavljen zelo hitro, veliko hitreje kot druga podjetja in samostojni podjetniki, s katerimi sem sodeloval, in mislim, da jih lahko iskreno priporočam za druge zunanje projekte. Pošljite mi e-pošto, če želite stopiti v stik - [email protected] .