Asinhronais JavaScript: izskaidroti atzvanīšanas un solījumi

Darbs ar asinhrono kodu, kas nozīmē kodu, kas netiek izpildīts nekavējoties, piemēram, tīmekļa pieprasījumi vai taimeri, var būt sarežģīti. JavaScript dod mums divas iespējas, kā rīkoties ar asinhrono rīcību: atzvanīšana un solījumi.

Atzvans bija vienīgais dabiski atbalstītais veids, kā tikt galā ar asinhrono kodu līdz 2016. gadam, kad Apsoliet objekts tika ieviests valodā. Tomēr JavaScript izstrādātāji jau gadiem ilgi bija īstenojuši līdzīgu funkcionalitāti, pirms parādījās solījumi. Apskatīsim dažas atšķirības starp atzvanīšanu un solījumiem un redzēsim, kā mēs tiekam galā ar vairāku solījumu koordinēšanu.

Asinhronās funkcijas, kas izmanto atzvanīšanu, kā parametru ņem funkciju, kas tiks izsaukta, kad darbs būs pabeigts. Ja esat izmantojis kaut ko līdzīgu setTimeout pārlūkprogrammā esat izmantojis atzvanīšanu.

// Atzvanu var definēt atsevišķi ...
ļaujiet myCallback = () => {
  console.log ('Zvanīts!');
};
setTimeout (myCallback, 3000);
// ... bet bieži ir arī redzams atzvanīšana, kas definēta iekšēji
setTimeout (() => {
  console.log ('Zvanīts!');
}, 3000);

Parasti funkcija, kas veic atzvanīšanu, to uzskata par savu pēdējo argumentu. Iepriekš tas tā nav, tāpēc izliksimies, ka ir jauna funkcija pagaidi tas ir tāpat kā setTimeout bet pirmos divus argumentus ņem pretējā secībā:

// Mēs izmantotu savu jauno funkciju šādi:
waitCallback (3000, () => {
  console.log ('Zvanīts!');
});

Ligzdotas atzvanīšanas un likteņa piramīda

Atzvani darbojas labi, apstrādājot asinhrono kodu, taču tie kļūst sarežģīti, kad jāsāk koordinēt vairākas asinhronās funkcijas. Piemēram, ja mēs vēlējāmies gaidīt divas sekundes un kaut ko reģistrēt, pēc tam pagaidīt trīs sekundes un reģistrēt kaut ko citu, pēc tam pagaidīt četras sekundes un reģistrēt kaut ko citu, mūsu sintakse dziļi ligzdo.

// Mēs izmantotu savu jauno funkciju šādi:
waitCallback (2000, () => {
  console.log ('Pirmais atzvans!');
  waitCallback (3000, () => {
  console.log ('Otrais atzvans!');
  waitCallback (4000, () => {
  console.log ('Trešais atzvans!');
    });
  });
});

Tas var šķist niecīgs piemērs (un tā tas ir), taču nereti tiek veikti vairāki tīmekļa pieprasījumi pēc kārtas, pamatojoties uz iepriekšējā pieprasījuma atgriešanas rezultātiem. Ja jūsu AJAX bibliotēkā tiek izmantotas atzvanīšanas, redzēsit, kā tiek atskaņota iepriekš minētā struktūra. Piemēros, kas ir dziļāk ievietoti, jūs redzēsiet to, kas tiek dēvēts par likteņa piramīdu, kura nosaukums ir iegūts no piramīdas formas, kas izveidota ievilktajā atstarpē rindu sākumā.

Kā redzat, mūsu kods tiek strukturāli sajaukts un grūtāk lasāms, strādājot ar asinhronām funkcijām, kurām jānotiek secīgi. Bet tas kļūst vēl sarežģītāk. Iedomājieties, vai mēs gribētu ierosināt trīs vai četrus tīmekļa pieprasījumus un veikt kādu uzdevumu tikai pēc tam, kad visi no tiem ir atgriezušies. Es iesaku jums mēģināt to izdarīt, ja iepriekš neesat saskāries ar izaicinājumu.

Vieglāka asinhronība ar solījumiem

Solījumi nodrošina elastīgāku API, lai tiktu galā ar asinhroniem uzdevumiem. Tas prasa, lai funkcija būtu uzrakstīta tā, lai tā atgrieztu a Apsoliet objekts, kuram ir dažas standarta funkcijas turpmākās uzvedības apstrādei un vairāku solījumu koordinēšanai. Ja mūsu waitCallback funkcija bija Apsoliet- pamatojoties uz to, būtu vajadzīgs tikai viens arguments, kas ir milisekundes, kas jāgaida. Jebkura turpmāka funkcionalitāte būtu pieķēdēts no solījuma. Mūsu pirmais piemērs izskatīsies šādi:

ļaujiet myHandler = () => {
  console.log (‘Zvanīts!’);
};
waitPromise (3000). tad (myHandler);

Iepriekš minētajā piemērā waitPromise (3000) atgriež a Apsoliet objekts, kura izmantošanai ir dažas metodes, piemēram, pēc tam. Ja mēs gribētu pēc kārtas izpildīt vairākas asinhronas funkcijas, mēs varētu izvairīties no likteņa piramīdas, izmantojot solījumus. Šis kods, kas pārrakstīts, lai atbalstītu mūsu jauno solījumu, izskatās šādi:

// Neatkarīgi no tā, cik daudz secīgu asinhrono uzdevumu mums ir, mēs nekad neveicam piramīdu.
waitPromise (2000)
  .tad (() => {
  console.log ('Pirmais atzvans!');
  atgriezties waitPromise (3000);
  })
  .tad (() => {
  console.log ('Otrais atzvans!');
  atgriešanās waitPromise (4000);
  })
  .tad (() => {
  console.log ('Otrais atzvans!');
  atgriezties waitPromise (4000);
  });

Vēl labāk, ja mums ir jākoordinē asinhronie uzdevumi, kas atbalsta solījumus, mēs varētu tos izmantot visi, kas ir statiska metode Apsoliet objekts, kas uzņem vairākus solījumus un apvieno tos vienā. Tas varētu izskatīties šādi:

Promise.all ([
  waitPromise (2000),
  waitPromise (3000),
  waitPromise (4000)
]). tad (() => console.log ('Viss ir izdarīts!'));

Nākamajā nedēļā mēs sīkāk izpētīsim, kā solījumi darbojas un kā tos izmantot idiomātiski. Ja jūs tikai mācāties JavaScript vai vēlaties pārbaudīt savas zināšanas, mēģiniet to izdarīt waitCallback vai mēģināt paveikt līdzvērtīgu Solījums.viss ar atzvanīšanu.

Kā vienmēr, sazinieties ar mani Twitter vietnē ar jebkādiem komentāriem vai jautājumiem.