Aflați cum să creați programe asincrone cu JavaScript

Programarea asincronă este un element de bază în dezvoltarea de software. Este greu de crezut că acest concept de programare există abia din secolul XXI. Limbajul de programare F# a fost primul dintre colegii săi care a introdus programarea asincronă, în 2007.

Alte limbaje precum C#, Python, JavaScript și C++ au adăugat treptat suport pentru programarea asincronă. Marea întrebare este, ce valoare adaugă programarea asincronă aplicațiilor tale?

Acest articol răspunde la aceasta și la alte întrebări, așa că veți afla totul despre cum să utilizați programarea asincronă.

Ce este programarea sincronă?

Programarea sincronă se referă la un program în forma sa cea mai de bază. Acest model de programare procesează secvenţial liniile de cod dintr-un program sau script. Începe întotdeauna de la prima linie de cod dintr-un program. Apoi așteaptă până când fiecare linie de cod și-a încheiat execuția înainte de a trece la următoarea.

Modelul sincron include și cod condiționat, cum ar fi dacă și in timp ce

declarații. Deși se va executa doar un anumit cod dintr-o instrucțiune condiționată, programul va rula în continuare secvenţial.

Exemplu de program sincron

const SyncCode = () => {
 console.log("Aceasta este prima linie din program")
 console.log("Aceasta este a doua linie din program")
 console.log("Aceasta este linia finală a programului")
}
SyncCode();

Rularea programului JavaScript de mai sus va produce următoarea ieșire în consolă:

Aceasta este prima linie din program
Aceasta este a doua linie din program
Aceasta este ultima linie din program

Rezultatul de mai sus este exact ceea ce ar trebui să vă așteptați. Programul începe de sus și așteaptă până când se termină o linie de cod înainte de a trece la următoarea.

Ce este programarea asincronă?

Programarea asincronă este opusul programării sincrone. Modelul de programare asincronă procesează mai multe linii de coduri simultan. Nu așteaptă până când linia anterioară de cod dintr-un program și-a încheiat execuția înainte de a trece la următoarea.

Legate de: Sincron vs. Programare asincronă: prin ce diferă?

Programarea asincronă poate reduce timpul de execuție la jumătate, creând efectiv computere mai rapide.

Exemplu de program asincron

const AsyncCode = () => {
 console.log("Aceasta este prima linie din program")
 setTimeout(() => {
 console.log("Aceasta este a doua linie din program")
 }, 3000)
 console.log("Aceasta este linia finală a programului")
}
AsyncCode();

Executarea codului JavaScript de mai sus va produce următoarea ieșire în consola dvs.:

Aceasta este prima linie din program
Aceasta este ultima linie din program
Aceasta este a doua linie din program

Dacă comparați rezultatul consolei de mai sus cu programul asincron care o generează, veți vedea că există o discrepanță evidentă. Apelul la Buturuga care spune „Aceasta este a doua linie din program” apare înaintea celei care spune „Aceasta este linia finală din program”. Cu toate acestea, ieșirea consolei nu reflectă acest lucru.

Având în vedere că JavaScript este în primul rând sincron, codul din programul de mai sus s-a executat secvenţial. Dar JavaScript acceptă programarea asincronă prin funcții precum setTimeout() metodă.

The setTimeout() metoda este o metodă JavaScript asincronă care ia două argumente: o funcție și o întârziere. Întârzierea este un cronometru (în milisecunde), care întârzie execuția funcției. Deci, în timp ce programul de mai sus așteaptă cele trei secunde pentru a executa funcția în setTimeout() metoda, trece la următoarea linie din cod. Acest lucru duce la executarea celui de-al treilea apel de funcție înainte de al doilea.

Tehnologii JavaScript asincrone

În afară de setTimeout() metoda menționată mai sus, mai multe tehnologii JavaScript folosesc programarea asincronă. Aceste tehnologii folosesc modelul de programare asincronă pentru a dezvolta aplicații mai rapide fără blocare. Unele dintre aceste tehnologii includ:

• jQuery Ajax
• Axios
• NodeJS

Legate de: Ce este Node.js? Iată cum să utilizați JavaScript pe partea serverului

Crearea de programe asincrone cu JavaScript

Există mai multe moduri de a gestiona codul asincron. Metoda pe care o alegeți ar trebui să depindă de tipul de aplicație pe care doriți să o dezvoltați. Aceste metode includ funcții de apel invers, promisiuni și async/wait.

Funcții de apel invers

Există două proprietăți importante ale unei funcții de apel invers. Ele servesc ca parametri pentru alte funcții și se bazează pe evenimente externe pentru a-și îndeplini datoria. The setTimeout() metoda utilizată în exemplul asincron de mai sus este o funcție de apel invers. Programul îi transmite o funcție de jurnal ca parametru (funcția de apel invers) și o execută numai după trei secunde (evenimentul).

Funcțiile de apel invers sunt excelente pentru programele mici, dar pe măsură ce aplicațiile tale cresc, ele se pot complica prea repede. Acest lucru se datorează faptului că funcțiile de apel invers apelează adesea alte funcții de apel invers, creând un lanț de apeluri inverse imbricate.

Folosind Promisiuni

JavaScript a adăugat suport pentru promisiuni după funcțiile de apel invers. Sunt o alternativă bună atunci când creați aplicații mai mari. O promisiune reprezintă ceea ce s-ar putea întâmpla după o operație asincronă. Acest rezultat potențial va lua una dintre cele două forme: rezolvat sau respins. O funcție separată gestionează fiecare dintre aceste rezultate, eliminând nevoia de imbricare (problema funcției de apel invers). În schimb, promisiunile încurajează funcțiile în lanț care sunt mai ușor de utilizat.

Fiecare promisiune începe cu una nouă Promisiune obiect care are o funcție anonimă cu rezolva și respinge parametrii. În această funcție, veți avea aplicația asincronă, care returnează o rezolvare dacă operația asincronă reușește sau o respingere în caz contrar.

The apoi() funcția de lanț se ocupă de rezolva funcția, iar captură() funcția de lanț se ocupă de respinge funcţie. Deci, nu este nevoie de instrucțiuni if ​​imbricate, așa cum este cazul funcțiilor de apel invers.

Exemplu de utilizare a promisiunilor

const PromiseFunction = () =>{
 returnează o nouă promisiune((rezolvare, respingere) => {
 setTimeout(() => {
 resolve(„această operație asincronă a fost executată bine”)
 }, 3000)
 })
}
PromiseFunction().then((rezultat) => {
 console.log(„Succes”, rezultat)
}).catch((eroare) => {
 console.log(„Eroare”, eroare)
})

Codul de mai sus returnează următoarea ieșire în consolă:

Succes această operație asincronă a fost executată bine

Acest lucru se datorează faptului că promisiunea returnează rezolva funcția, care își transmite rezultatele către apoi() funcţie. Dacă promisiunea revine respinge funcția pe care programul o folosește captură funcţionează în schimb.

Folosind Async/Await

Dacă nu doriți să creați un lanț de promisiuni atunci când aveți de-a face cu operațiuni asincrone, atunci puteți încerca async/wait. Async/wait nu este un instrument asincron complet diferit de promisiuni, ci doar un mod diferit de a le gestiona. Se ocupă de promisiuni fără a utiliza metoda lanțului. Deci, în același mod în care promisiunile gestionează mai bine operațiunile asincrone decât funcțiile de apel invers, async/wait are avantaje față de promisiunile simple.

Există două atribute cheie ale fiecărei funcții asincrone/de așteptare. Ei încep cu asincron cuvântul cheie și așteaptă cuvântul cheie așteaptă rezultatul unei operații asincrone.

Exemplu de program Async/Await

const PromiseFunction = () =>{
 returnează o nouă promisiune((rezolvare, respingere) => {
 setTimeout(() => {
 resolve(„această operație asincronă a fost executată bine”)
 }, 3000)
 })
}
const AsyncAwaitFunc = asincron () => {
 rezultat const = await PromiseFunction();
 console.log (rezultat);
}
AsyncAwaitFunc();

Codul de mai sus va returna următoarea ieșire în consolă:

această operație asincronă s-a executat bine

Care sunt principalele concluzii?

Există câteva puncte majore pe care ar trebui să le rețineți din acest articol:

• Programarea asincronă este valoroasă deoarece reduce timpul de așteptare al unui program, creând aplicații mai rapide.
• O funcție de apel invers poate fi sincronă sau asincronă.
• Promises oferă o modalitate mai bună de a gestiona operațiunile asincrone decât funcțiile de apel invers.
• Funcțiile Async/wait gestionează promisiunile într-un mod mai bun decât utilizarea funcțiilor în lanț.
• O funcție async/wait gestionează operațiunile asincrone într-un mod care pare sincron, făcându-le mai ușor de înțeles.
• Funcțiile săgeată vă ajută să scrieți un cod mai bun.

Funcțiile săgeții JavaScript vă pot face un dezvoltator mai bun

Vrei să fii mai bun în dezvoltarea web? Funcțiile săgeți, adăugate la JavaScript ES6, vă oferă două moduri de a crea funcții pentru aplicațiile web.

Citiți în continuare

Despre autor