Ακολουθούν οι πιο δημοφιλείς τρόποι υποβολής αιτήματος HTTP σε JavaScript

Το JavaScript διαθέτει εξαιρετικές λειτουργικές μονάδες και μεθόδους για την υποβολή αιτημάτων HTTP που μπορούν να χρησιμοποιηθούν για την αποστολή ή τη λήψη δεδομένων από έναν πόρο διακομιστή. Σε αυτό το άρθρο, θα εξετάσουμε μερικούς δημοφιλείς τρόπους υποβολής αιτήσεων HTTP σε JavaScript.

Αϊάς

Το Ajax είναι ο παραδοσιακός τρόπος για να κάνετε ένα ασύγχρονο αίτημα HTTP. Τα δεδομένα μπορούν να σταλούν χρησιμοποιώντας τη μέθοδο HTTP POST και να ληφθούν χρησιμοποιώντας τη μέθοδο HTTP GET. Ας ρίξουμε μια ματιά και να κάνουμε ένα GETαίτημα. Θα χρησιμοποιώ το JSONPlaceholder, ένα δωρεάν διαδικτυακό REST API για προγραμματιστές που επιστρέφει τυχαία δεδομένα σε μορφή JSON.

Για να πραγματοποιήσετε μια κλήση HTTP στο Ajax, πρέπει να προετοιμάσετε μια νέα XMLHttpRequest()μέθοδο, να καθορίσετε το τελικό σημείο URL και τη μέθοδο HTTP (σε αυτήν την περίπτωση GET). Τέλος, χρησιμοποιούμε τη open()μέθοδο για τη σύνδεση της μεθόδου HTTP και του τελικού σημείου διεύθυνσης URL και καλούμε τη send()μέθοδο για την απενεργοποίηση του αιτήματος.

Καταγράφουμε την απόκριση HTTP στην κονσόλα χρησιμοποιώντας την 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) }

Εάν δείτε την κονσόλα του προγράμματος περιήγησής σας, θα επιστρέψει μια σειρά δεδομένων σε μορφή JSON. Αλλά πώς θα γνωρίζαμε εάν το αίτημα έχει γίνει Με άλλα λόγια, πώς μπορούμε να χειριστούμε τις απαντήσεις με το Ajax;

Η onreadystatechangeιδιοκτησία έχει δύο μεθόδους readyStateκαι οι statusοποίες μας επιτρέπουν να ελέγξουμε την κατάσταση του αιτήματός μας.

Εάν readyStateείναι ίσο με 4, αυτό σημαίνει ότι το αίτημα έχει ολοκληρωθεί. Η readyStateιδιοκτησία έχει 5 απαντήσεις. Μάθετε περισσότερα για αυτό εδώ.

Εκτός από την απευθείας πραγματοποίηση κλήσης Ajax με JavaScript, υπάρχουν και άλλες πιο ισχυρές μέθοδοι πραγματοποίησης μιας κλήσης HTTP, όπως η $.Ajaxμέθοδος jQuery. Θα τα συζητήσω τώρα.

Μέθοδοι jQuery

Το jQuery έχει πολλές μεθόδους για τον εύκολο χειρισμό αιτημάτων HTTP. Για να χρησιμοποιήσετε αυτές τις μεθόδους, θα πρέπει να συμπεριλάβετε τη βιβλιοθήκη jQuery στο έργο σας.

$ .ajax

Το jQuery Ajax είναι μια από τις απλούστερες μεθόδους για να πραγματοποιήσετε μια κλήση HTTP.

Η μέθοδος $ .ajax παίρνει πολλές παραμέτρους, μερικές από τις οποίες απαιτούνται και άλλες προαιρετικές. Περιλαμβάνει δύο επιλογές επανάκλησης successκαι errorγια τον χειρισμό της απόκρισης που ελήφθη.

Μέθοδος $ .get

Η μέθοδος $ .get χρησιμοποιείται για την εκτέλεση αιτημάτων GET. Χρειάζονται δύο παράμετροι: το τελικό σημείο και μια συνάρτηση επανάκλησης.

$. μετά

Η $.postμέθοδος είναι ένας άλλος τρόπος για να δημοσιεύσετε δεδομένα στον διακομιστή. Χρειάζονται τρεις παράμετροι: τα url, τα δεδομένα που θέλετε να δημοσιεύσετε και μια λειτουργία επανάκλησης.

$ .getJSON

Η $.getJSONμέθοδος ανακτά μόνο δεδομένα που είναι σε μορφή JSON. Παίρνει δύο παραμέτρους: τη urlσυνάρτηση επανάκλησης.

Το jQuery διαθέτει όλες αυτές τις μεθόδους για να ζητήσει ή να δημοσιεύσει δεδομένα σε έναν απομακρυσμένο διακομιστή. Αλλά μπορείτε πραγματικά να βάλετε όλες αυτές τις μεθόδους σε μία: τη $.ajaxμέθοδο, όπως φαίνεται στο παρακάτω παράδειγμα:

φέρω

fetchείναι ένα νέο ισχυρό API ιστού που σας επιτρέπει να κάνετε ασύγχρονα αιτήματα. Στην πραγματικότητα, fetchείναι ένας από τους καλύτερους και αγαπημένους μου τρόπους για να κάνω ένα αίτημα HTTP. Επιστρέφει μια «υπόσχεση» που είναι ένα από τα σπουδαία χαρακτηριστικά του ES6.Εάν δεν είστε εξοικειωμένοι με το ES6, μπορείτε να το διαβάσετε σε αυτό το άρθρο. Οι υποσχέσεις μας επιτρέπουν να χειριστούμε το ασύγχρονο αίτημα με πιο έξυπνο τρόπο. Ας ρίξουμε μια ματιά στο πώς fetchλειτουργεί τεχνικά.

Η fetchσυνάρτηση παίρνει μια απαιτούμενη παράμετρο: τη endpointδιεύθυνση URL. Έχει επίσης άλλες προαιρετικές παραμέτρους όπως στο παρακάτω παράδειγμα:

Όπως μπορείτε να δείτε, fetchέχει πολλά πλεονεκτήματα για την υποβολή αιτημάτων HTTP. Μπορείτε να μάθετε περισσότερα για αυτό εδώ. Επιπλέον, εντός της ανάκτησης υπάρχουν άλλες λειτουργικές μονάδες και προσθήκες που μας επιτρέπουν να στέλνουμε και να λαμβάνουμε ένα αίτημα προς και από την πλευρά του διακομιστή, όπως τα axios.

Άξιος

Το Axios είναι μια βιβλιοθήκη ανοιχτού κώδικα για την υποβολή αιτημάτων HTTP και παρέχει πολλές εξαιρετικές δυνατότητες. Ας ρίξουμε μια ματιά στο πώς λειτουργεί.

Χρήση:

Πρώτον, θα πρέπει να συμπεριλάβετε το Axios. Υπάρχουν δύο τρόποι για να συμπεριλάβετε το Axios στο έργο σας.

Αρχικά, μπορείτε να χρησιμοποιήσετε το npm:

npm install axios --save

Τότε θα πρέπει να το εισαγάγετε

import axios from 'axios'

Δεύτερον, μπορείτε να συμπεριλάβετε αξιώματα χρησιμοποιώντας ένα CDN.

Υποβολή αιτήματος με αξίες:

Με το Axios μπορείτε να χρησιμοποιήσετε GETκαι POSTνα ανακτήσετε και να δημοσιεύσετε δεδομένα από το διακομιστή.

ΠΑΙΡΝΩ:

axiosπαίρνει μια απαιτούμενη παράμετρο και μπορεί να πάρει και μια δεύτερη προαιρετική παράμετρο. Αυτό παίρνει ορισμένα δεδομένα ως ένα απλό ερώτημα.

ΘΕΣΗ:

Ο Άξιος επιστρέφει μια «υπόσχεση». Εάν είστε εξοικειωμένοι με τις υποσχέσεις, πιθανώς γνωρίζετε ότι μια υπόσχεση μπορεί να εκτελέσει πολλαπλά αιτήματα. Μπορείτε να κάνετε το ίδιο πράγμα με axios και να εκτελέσετε ταυτόχρονα πολλαπλά αιτήματα.

Το 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:

Μπορείτε να δείτε το παράδειγμα επίδειξης στο Stackblitz.

Τυλίγοντας

Μόλις καλύψαμε τους πιο δημοφιλείς τρόπους υποβολής αιτήματος κλήσης HTTP σε JavaScript.

Σας ευχαριστώ για το χρόνο σας. Αν σας αρέσει, χτυπήστε έως και 50, κάντε κλικ στο follow και επικοινωνήστε μαζί μου στο Twitter.

Παρεμπιπτόντως, συνεργάστηκα πρόσφατα με μια ισχυρή ομάδα μηχανικών λογισμικού για μία από τις εφαρμογές μου για κινητά. Η οργάνωση ήταν καταπληκτική και το προϊόν παραδόθηκε πολύ γρήγορα, πολύ πιο γρήγορα από άλλες εταιρείες και ελεύθερους επαγγελματίες με τους οποίους συνεργάστηκα και νομίζω ότι μπορώ να τους προτείνω ειλικρινά για άλλα έργα εκεί έξω. Στείλτε μου ένα email αν θέλετε να επικοινωνήσετε - [email protected] .