Μάθετε πώς να δημιουργείτε ασύγχρονα προγράμματα με JavaScript

Ο ασύγχρονος προγραμματισμός αποτελεί βασικό στοιχείο στην ανάπτυξη λογισμικού. Είναι δύσκολο να πιστέψει κανείς ότι αυτή η ιδέα προγραμματισμού υπάρχει μόλις από τον εικοστό πρώτο αιώνα. Η γλώσσα προγραμματισμού F# ήταν η πρώτη μεταξύ των ομοίων της που εισήγαγε τον ασύγχρονο προγραμματισμό, το 2007.

Άλλες γλώσσες όπως η C#, η Python, η JavaScript και η C++ σταδιακά πρόσθεσαν υποστήριξη για ασύγχρονο προγραμματισμό. Το μεγάλο ερώτημα είναι τι αξία προσθέτει ο ασύγχρονος προγραμματισμός στις εφαρμογές σας;

Αυτό το άρθρο απαντά σε αυτές και σε άλλες ερωτήσεις, επομένως θα μάθετε τα πάντα σχετικά με τον τρόπο χρήσης του ασύγχρονου προγραμματισμού.

Τι είναι ο Σύγχρονος Προγραμματισμός;

Ο σύγχρονος προγραμματισμός αναφέρεται σε ένα πρόγραμμα στην πιο βασική του μορφή. Αυτό το μοντέλο προγραμματισμού επεξεργάζεται τις γραμμές κώδικα σε ένα πρόγραμμα ή σενάριο διαδοχικά. Ξεκινά πάντα από την πρώτη γραμμή κώδικα σε ένα πρόγραμμα. Στη συνέχεια, περιμένει μέχρι κάθε γραμμή κώδικα να ολοκληρώσει την εκτέλεσή της πριν προχωρήσει στην επόμενη.

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

Παράδειγμα σύγχρονου προγράμματος

const SyncCode = () => {
 console.log("Αυτή είναι η πρώτη γραμμή του προγράμματος")
 console.log("Αυτή είναι η δεύτερη γραμμή του προγράμματος")
 console.log("Αυτή είναι η τελευταία γραμμή του προγράμματος")
}
SyncCode();

Η εκτέλεση του προγράμματος JavaScript παραπάνω θα παράγει την ακόλουθη έξοδο στην κονσόλα:

Αυτή είναι η πρώτη γραμμή του προγράμματος
Αυτή είναι η δεύτερη γραμμή του προγράμματος
Αυτή είναι η τελευταία γραμμή του προγράμματος

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

Τι είναι ο Ασύγχρονος Προγραμματισμός;

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

Σχετιζομαι με: Σύγχρονη vs. Ασύγχρονος Προγραμματισμός: Πώς διαφέρουν;

Ο ασύγχρονος προγραμματισμός μπορεί να μειώσει το χρόνο εκτέλεσης στο μισό, δημιουργώντας αποτελεσματικά ταχύτερους υπολογιστές.

Παράδειγμα ασύγχρονου προγράμματος

const AsyncCode = () => {
 console.log("Αυτή είναι η πρώτη γραμμή του προγράμματος")
 setTimeout(() => {
 console.log("Αυτή είναι η δεύτερη γραμμή του προγράμματος")
 }, 3000)
 console.log("Αυτή είναι η τελευταία γραμμή του προγράμματος")
}
AsyncCode();

Η εκτέλεση του κώδικα JavaScript παραπάνω θα παράγει την ακόλουθη έξοδο στην κονσόλα σας:

Αυτή είναι η πρώτη γραμμή του προγράμματος
Αυτή είναι η τελευταία γραμμή του προγράμματος
Αυτή είναι η δεύτερη γραμμή του προγράμματος

Εάν συγκρίνετε την έξοδο της κονσόλας παραπάνω με το ασύγχρονο πρόγραμμα που τη δημιουργεί, θα δείτε ότι υπάρχει μια προφανής απόκλιση. Η κλήση προς κούτσουρο που λέει "Αυτή είναι η δεύτερη γραμμή του προγράμματος" εμφανίζεται πριν από αυτή που λέει "Αυτή είναι η τελευταία γραμμή του προγράμματος". Ωστόσο, η έξοδος της κονσόλας δεν αντικατοπτρίζει αυτό.

Δεδομένου ότι η JavaScript είναι κατά κύριο λόγο σύγχρονη, ο κώδικας στο παραπάνω πρόγραμμα εκτελέστηκε διαδοχικά. Αλλά η JavaScript υποστηρίζει ασύγχρονο προγραμματισμό μέσω λειτουργιών όπως το setTimeout() μέθοδος.

ο setTimeout() Η μέθοδος είναι μια ασύγχρονη μέθοδος JavaScript που παίρνει δύο ορίσματα: μια συνάρτηση και μια καθυστέρηση. Η καθυστέρηση είναι ένα χρονόμετρο (σε χιλιοστά του δευτερολέπτου), που καθυστερεί την εκτέλεση της συνάρτησης. Έτσι, ενώ το παραπάνω πρόγραμμα περιμένει τα τρία δευτερόλεπτα για να εκτελέσει τη συνάρτηση στο setTimeout() μέθοδο, μεταβαίνει στην επόμενη γραμμή του κώδικα. Αυτό έχει ως αποτέλεσμα την εκτέλεση της τρίτης κλήσης συνάρτησης πριν από τη δεύτερη.

Ασύγχρονες Τεχνολογίες JavaScript

Εκτός από το setTimeout() Η μέθοδος που αναφέρεται παραπάνω, πολλές τεχνολογίες JavaScript χρησιμοποιούν ασύγχρονο προγραμματισμό. Αυτές οι τεχνολογίες χρησιμοποιούν το μοντέλο ασύγχρονου προγραμματισμού για την ανάπτυξη ταχύτερων μη αποκλειστικών εφαρμογών. Μερικές από αυτές τις τεχνολογίες περιλαμβάνουν:

• jQuery Ajax
• Αξιος
• NodeJS

Σχετιζομαι με: Τι είναι το Node.js; Δείτε πώς να χρησιμοποιήσετε τη JavaScript από την πλευρά του διακομιστή

Δημιουργία ασύγχρονων προγραμμάτων με JavaScript

Υπάρχουν διάφοροι τρόποι χειρισμού ασύγχρονου κώδικα. Η μέθοδος που θα επιλέξετε θα πρέπει να εξαρτάται από τον τύπο της εφαρμογής που θέλετε να αναπτύξετε. Αυτές οι μέθοδοι περιλαμβάνουν λειτουργίες επανάκλησης, υποσχέσεις και ασυγχρονισμό/αναμονή.

Λειτουργίες επανάκλησης

Υπάρχουν δύο σημαντικές ιδιότητες μιας συνάρτησης επανάκλησης. Χρησιμεύουν ως παράμετροι για άλλες λειτουργίες και βασίζονται σε εξωτερικά γεγονότα για να εκτελέσουν το καθήκον τους. ο setTimeout() Η μέθοδος που χρησιμοποιείται στο παραπάνω ασύγχρονο παράδειγμα είναι μια συνάρτηση επανάκλησης. Το πρόγραμμα του μεταβιβάζει μια συνάρτηση καταγραφής ως παράμετρο (τη συνάρτηση επανάκλησης) και την εκτελεί μόνο μετά από τρία δευτερόλεπτα (το συμβάν).

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

Χρήση υποσχέσεων

Η JavaScript πρόσθεσε υποστήριξη για υποσχέσεις μετά από λειτουργίες επανάκλησης. Αποτελούν μια καλή εναλλακτική όταν δημιουργείτε μεγαλύτερες εφαρμογές. Μια υπόσχεση αντιπροσωπεύει τι μπορεί να συμβεί μετά από μια ασύγχρονη λειτουργία. Αυτό το πιθανό αποτέλεσμα θα λάβει μία από τις δύο μορφές: επιλυθεί ή απορρίφθηκε. Μια ξεχωριστή συνάρτηση χειρίζεται καθένα από αυτά τα αποτελέσματα, αφαιρώντας την ανάγκη για ένθεση (το πρόβλημα της συνάρτησης επανάκλησης). Αντίθετα, οι υποσχέσεις ενθαρρύνουν λειτουργίες αλυσίδας που είναι πιο εύχρηστες.

Κάθε υπόσχεση ξεκινά με μια νέα Υπόσχεση αντικείμενο που έχει ανώνυμη συνάρτηση με το αποφασίζω και απορρίπτω Παράμετροι. Σε αυτήν τη λειτουργία, θα έχετε την ασύγχρονη εφαρμογή, η οποία επιστρέφει μια επίλυση εάν η ασύγχρονη λειτουργία επιτύχει ή μια απόρριψη διαφορετικά.

ο έπειτα() η λειτουργία αλυσίδας χειρίζεται το αποφασίζω λειτουργία, και το σύλληψη() η λειτουργία αλυσίδας χειρίζεται το απορρίπτω λειτουργία. Έτσι, δεν υπάρχει ανάγκη για ένθετες δηλώσεις if, όπως συμβαίνει με τις συναρτήσεις επανάκλησης.

Χρήση του παραδείγματος υποσχέσεων

const PromiseFunction = () =>{
 επιστροφή νέας υπόσχεσης((resolve, reject) => {
 setTimeout(() => {
 Επίλυση ("αυτή η ασύγχρονη λειτουργία εκτελείται καλά")
 }, 3000)
 })
}
PromiseFunction().then((αποτέλεσμα) => {
 console.log("Επιτυχία", αποτέλεσμα)
}).catch((σφάλμα) => {
 console.log ("Σφάλμα", σφάλμα)
})

Ο παραπάνω κώδικας επιστρέφει την ακόλουθη έξοδο στην κονσόλα:

Επιτυχία αυτή η ασύγχρονη λειτουργία εκτελέστηκε καλά

Αυτό συμβαίνει επειδή η υπόσχεση επιστρέφει το αποφασίζω συνάρτηση, η οποία μεταβιβάζει τα αποτελέσματά της στο έπειτα() λειτουργία. Εάν η υπόσχεση επιστρέψει το απορρίπτω λειτουργία που χρησιμοποιεί το πρόγραμμα σύλληψη αντ' αυτού.

Χρήση Async/Await

Εάν δεν θέλετε να δημιουργήσετε μια αλυσίδα υποσχέσεων όταν ασχολείστε με ασύγχρονες λειτουργίες, τότε μπορείτε να δοκιμάσετε το async/wait. Το Async/wait δεν είναι ένα εντελώς διαφορετικό ασύγχρονο εργαλείο από τις υποσχέσεις, απλώς ένας διαφορετικός τρόπος χειρισμού τους. Χειρίζεται υποσχέσεις χωρίς να χρησιμοποιεί τη μέθοδο της αλυσίδας. Έτσι, με τον ίδιο τρόπο που οι υποσχέσεις χειρίζονται καλύτερα τις ασύγχρονες λειτουργίες από τις λειτουργίες επανάκλησης, το async/wait έχει πλεονεκτήματα έναντι των απλών υποσχέσεων.

Υπάρχουν δύο βασικά χαρακτηριστικά κάθε συνάρτησης async/wait. Ξεκινούν με το ασυγχρονισμός λέξη-κλειδί, και το αναμένω λέξη-κλειδί αναμένει το αποτέλεσμα μιας ασύγχρονης λειτουργίας.

Παράδειγμα προγράμματος Async/Await

const PromiseFunction = () =>{
 επιστροφή νέας υπόσχεσης((resolve, reject) => {
 setTimeout(() => {
 Επίλυση ("αυτή η ασύγχρονη λειτουργία εκτελείται καλά")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const αποτέλεσμα = await PromiseFunction();
 console.log (αποτέλεσμα);
}
AsyncAwaitFunc();

Ο παραπάνω κώδικας θα επιστρέψει την ακόλουθη έξοδο στην κονσόλα:

αυτή η ασύγχρονη λειτουργία εκτελείται καλά

Ποιες είναι οι σημαντικότερες προτάσεις;

Υπάρχουν πολλά σημαντικά σημεία που πρέπει να λάβετε από αυτό το άρθρο:

• Ο ασύγχρονος προγραμματισμός είναι πολύτιμος επειδή μειώνει τον χρόνο αναμονής ενός προγράμματος, δημιουργώντας πιο γρήγορες εφαρμογές.
• Μια λειτουργία επανάκλησης μπορεί να είναι σύγχρονη ή ασύγχρονη.
• Οι υποσχέσεις προσφέρουν έναν καλύτερο τρόπο χειρισμού ασύγχρονων λειτουργιών από τις λειτουργίες επανάκλησης.
• Οι λειτουργίες Async/wait χειρίζονται τις υποσχέσεις με καλύτερο τρόπο από τη χρήση συναρτήσεων αλυσίδας.
• Μια συνάρτηση ασυγχρονισμού/αναμονής χειρίζεται τις ασύγχρονες λειτουργίες με τρόπο που φαίνεται σύγχρονος, καθιστώντας ευκολότερη την κατανόηση.
• Οι συναρτήσεις βέλους σάς βοηθούν να γράψετε καλύτερο κώδικα.

Οι λειτουργίες βέλους JavaScript μπορούν να σας κάνουν καλύτερο προγραμματιστή

Θέλετε να είστε καλύτεροι στην ανάπτυξη ιστού; Οι λειτουργίες βέλους, που προστέθηκαν στο JavaScript ES6, σας δίνουν δύο τρόπους για να δημιουργήσετε λειτουργίες για εφαρμογές Ιστού.

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα