JavaScript je jednovláknový programovací jazyk, což znamená, že stroj JavaScriptu může provádět jeden příkaz najednou, řádek po řádku. Také známý jako synchronní kód. Zde budu diskutovat o tom, jak se čas od času měnilo použití synchronního, asynchronního JavaScriptu a jak se používá asynchronní kód pomocí zpětných volání, příslibů a async/čekání.
Co je synchronní JavaScript?
JavaScript je přirozeně synchronní programovací jazyk, protože je jednovláknový, jak je uvedeno výše. což znamená, že JavaScript provádí vždy jeden příkaz v pořadí shora dolů. Toto chování však není ideální pro některé případy, jako je vyžadování dat z API nebo databáze. protože tento proces může nějakou dobu trvat a další příkazy čekají na provedení po tomto procesu. Zde vstupuje do hry kód asynchronního stylu.
Co je asynchronní JavaScript?
V zásadě kód asynchronního stylu znamená začít s prováděním nyní a dokončit jej později. Ve výše uvedeném scénáři při získávání dat z API nebo databáze. Místo synchronních funkcí používáme asynchronní funkce. Poté může tato funkce začít nyní a skončit později, jakmile budou data přijata. při provádění kódu, pokud existuje asynchronní kód, bude odstraněn ze zásobníku volání a prohlížeč bude sledovat, dokud úlohu nedokončí. pak se další příkazy mohou provádět bez jakéhokoli zpoždění. Nyní to vysvětlím pomocí funkce set timeout, která je asynchronní.
Zde probereme zpětná volání, sliby a syntaxi asynchronního čekání. V zásadě jde o způsoby, jak nakládat s asynchronními daty.
Zpětná volání
Zpětná volání jsou funkce, které jsou předány jako parametry jiné funkci k pozdějšímu provedení. Pokud máme data přijatá z API, můžeme předat funkci zpětného volání, která má být volána, a s těmito daty po obdržení něco udělat. Můžeme to udělat, protože funkce JavaScriptu se provádějí podle vyvolaného pořadí, nikoli podle definovaného pořadí. Pomocí zpětných volání můžeme zpozdit provedení funkce do určitého času, který je více využíván při získávání dat odněkud, které nějakou dobu trvá. Jakákoli funkce, která přijímá jinou funkci jako své argumenty, se nazývá funkce vyššího řádu a funkce, která předala jako argument, se nazývá funkce zpětného volání. V níže uvedeném scénáři je someFunction funkcí vyššího řádu, sayWelcome je funkce zpětného volání.
Bez ohledu na to, zda jste si byli vědomi konvencí pojmenování, je pravděpodobné, že jste je použili dříve, protože jsou tak populární v kódu JavaScript. forEach, jeden z nejpopulárnějších ze skupiny je uveden níže.
Více funkcí lze vytvořit nezávisle a použít jako zpětná volání a ty vytvoří víceúrovňovou funkci, a když máte příliš mnoho těchto vnořených funkcí, kód se stane nečitelným. Tato nevýhoda se nazývá peklo zpětného volání a pojďme se podívat na příklad pro lepší pochopení.
Funkce zpětného volání jsou užitečné pro krátké asynchronní úlohy. Z tohoto důvodu byly zavedeny přísliby k překonání tohoto problému v ES6.
Sliby
Sliby, název se přesně vysvětluje. Je to slib, že něco uděláte, pokud je něco jiného pravda, a pokud to není pravda, nebude. Sliby používané ke zpracování asynchronních výsledků úlohy a mnohem čistší syntaxe než zpětná volání. V tomto scénáři se isTrue chová jako výsledek na základě funkce vyřešení výsledku nebo zavolání funkce odmítnutí. Potom bude zavolána metoda na slib, pokud je zavolána resolve a metoda catch bude zavolána, pokud bude zavolána metoda odmítnutí. Cokoli uvnitř pak bude spuštěno k vyřešení a cokoli uvnitř catch bude spuštěno k zamítnutí. Obvykle se ke zpracování chyb používá catch.
Async / Čeká
Async/Await je ve skutečnosti jen syntaktický cukr obalený kolem, který usnadňuje práci se sliby. Je to způsob, jak psát asynchronní kód jako synchronní kód. Při použití klíčového slova async před funkcí tato funkce vrátí příslib. To znamená, že to získá návratovou hodnotu a automaticky ji vyhodnotí jako příslib. Také nastaví kontext pro použití klíčového slova wait, toto bude fungovat pouze uvnitř asynchronních funkcí. Zde používáme try and catch pro zpracování chyb.
Nyní znáte všechny základy Callbacks, Promises a Async/Await a díky nim je čtení a psaní kódu JavaScript mnohem jednodušší a efektivnější.