Naučte se vytvářet asynchronní programy pomocí JavaScriptu

Asynchronní programování je základem vývoje softwaru. Je těžké uvěřit, že tento koncept programování existuje teprve od jednadvacátého století. Programovací jazyk F# byl prvním ze svých vrstevníků, který zavedl asynchronní programování v roce 2007.

Další jazyky jako C#, Python, JavaScript a C++ postupně přidaly podporu pro asynchronní programování. Velkou otázkou je, jakou hodnotu přidává asynchronní programování vašim aplikacím?

Tento článek odpovídá na tyto a další otázky, takže se dozvíte vše o tom, jak používat asynchronní programování.

Co je synchronní programování?

Synchronní programování označuje program v jeho nejzákladnější formě. Tento programovací model zpracovává řádky kódu v programu nebo skriptu postupně. Vždy začíná od prvního řádku kódu v programu. Poté čeká, dokud každý řádek kódu nedokončí své provedení, než přejde k dalšímu.

Synchronní model zahrnuje také podmíněný kód, jako je např -li a zatímco prohlášení. Přestože se provede pouze některý kód v podmíněném příkazu, program bude stále běžet sekvenčně.

Příklad synchronního programu

const SyncCode = () => {
 console.log("Toto je první řádek v programu")
 console.log("Toto je druhý řádek v programu")
 console.log("Toto je poslední řádek v programu")
}
SyncCode();

Spuštěním výše uvedeného programu JavaScript vytvoříte v konzole následující výstup:

Toto je první řádek v programu
Toto je druhý řádek v programu
Toto je poslední řádek v programu

Výše uvedený výstup je přesně to, co byste měli očekávat. Program začíná shora a před přechodem na další čeká, dokud neskončí jeden řádek kódu.

Co je asynchronní programování?

Asynchronní programování je opakem synchronního programování. Asynchronní programovací model zpracovává několik řádků kódů současně. Nečeká na dokončení předchozího řádku kódu v programu, než se přesune na další.

Příbuzný: Synchronní vs. Asynchronní programování: Jak se liší?

Asynchronní programování může zkrátit dobu provádění na polovinu a efektivně vytvářet rychlejší počítače.

Příklad asynchronního programu

const AsyncCode = () => {
 console.log("Toto je první řádek v programu")
 setTimeout(() => {
 console.log("Toto je druhý řádek v programu")
 }, 3000)
 console.log("Toto je poslední řádek v programu")
}
AsyncCode();

Spuštění kódu JavaScript výše vytvoří ve vaší konzoli následující výstup:

Toto je první řádek v programu
Toto je poslední řádek v programu
Toto je druhý řádek v programu

Pokud porovnáte výstup konzoly výše s asynchronním programem, který jej generuje, uvidíte, že je zde zřejmá nesrovnalost. Výzva k log který říká „Toto je druhý řádek v programu“ se objeví před tím, který říká „Toto je poslední řádek v programu“. Výstup konzoly to však neodráží.

Vzhledem k tomu, že JavaScript je primárně synchronní, kód ve výše uvedeném programu se spouštěl sekvenčně. JavaScript však podporuje asynchronní programování prostřednictvím funkcí, jako je např setTimeout() metoda.

The setTimeout() metoda je asynchronní JavaScriptová metoda, která přebírá dva argumenty: funkci a zpoždění. Zpoždění je časovač (v milisekundách), který zpožďuje provedení funkce. Takže zatímco výše uvedený program čeká tři sekundy na provedení funkce v setTimeout() metoda, přesune se na další řádek v kódu. Výsledkem je provedení třetího volání funkce před druhým.

Asynchronní technologie JavaScriptu

Kromě setTimeout() výše zmíněnou metodou využívá několik technologií JavaScriptu asynchronní programování. Tyto technologie využívají asynchronní programovací model k vývoji rychlejších neblokujících aplikací. Některé z těchto technologií zahrnují:

• jQuery Ajax
• Axios
• NodeJS

Příbuzný: Co je Node.js? Zde je návod, jak používat JavaScript na straně serveru

Vytváření asynchronních programů pomocí JavaScriptu

Existuje několik způsobů, jak zpracovat asynchronní kód. Metoda, kterou zvolíte, by měla záviset na typu aplikace, kterou chcete vyvíjet. Tyto metody zahrnují funkce zpětného volání, sliby a async/wait.

Funkce zpětného volání

Funkce zpětného volání má dvě důležité vlastnosti. Slouží jako parametry pro další funkce a při plnění svých povinností spoléhají na vnější události. The setTimeout() metoda použitá ve výše uvedeném asynchronním příkladu je funkce zpětného volání. Program mu předá funkci protokolu jako parametr (funkce zpětného volání) a provede ji až po třech sekundách (událost).

Funkce zpětného volání jsou skvělé pro malé programy, ale jak vaše aplikace rostou, mohou se velmi rychle příliš zkomplikovat. Důvodem je, že funkce zpětného volání často volají jiné funkce zpětného volání a vytvářejí řetězec vnořených zpětných volání.

Použití Promises

JavaScript přidal podporu pro sliby po funkcích zpětného volání. Jsou dobrou alternativou při vytváření větších aplikací. Příslib představuje to, co se může stát po asynchronní operaci. Tento potenciální výsledek bude mít jednu ze dvou podob: vyřešeno nebo odmítl. Samostatná funkce zpracovává každý z těchto výsledků a odstraňuje potřebu vnořování (problém funkce zpětného volání). Místo toho sliby podporují řetězové funkce, které se snáze používají.

Každý slib začíná novým Slib objekt, který má anonymní funkci s odhodlání a odmítnout parametry. V rámci této funkce budete mít asynchronní aplikaci, která vrátí vyřešení, pokud asynchronní operace uspěje, nebo ji odmítne.

The pak() Řetězová funkce zpracovává odhodlání funkce a chytit() Řetězová funkce zpracovává odmítnout funkce. Není tedy potřeba vnořených příkazů if, jako je tomu u funkcí zpětného volání.

Příklad použití Promises

const PromiseFunction = () =>{
 vrátit nový slib((vyřešit, odmítnout) => {
 setTimeout(() => {
 resolve("tato asynchronní operace proběhla dobře")
 }, 3000)
 })
}
PromiseFunction().then((výsledek) => {
 console.log("Úspěch", výsledek)
}).catch((chyba) => {
 console.log("Chyba", chyba)
})

Výše uvedený kód vrátí následující výstup v konzole:

Tato asynchronní operace byla úspěšně provedena

To proto, že slib vrací odhodlání funkce, která předá své výsledky pak() funkce. Pokud se slib vrátí odmítnout funkce, kterou program používá chytit místo toho funkci.

Pomocí Async/Await

Pokud nechcete při práci s asynchronními operacemi vytvářet řetězec slibů, můžete zkusit async/await. Async/await není úplně odlišný asynchronní nástroj od slibů, jen jiný způsob, jak s nimi nakládat. Zvládá sliby bez použití řetězové metody. Takže v podstatě stejným způsobem, jakým sliby zvládají asynchronní operace lépe než funkce zpětného volání, má async/await výhody oproti prostým slibům.

Každá funkce async/wait má dva klíčové atributy. Začínají s asynchronní klíčové slovo a čekat Klíčové slovo čeká na výsledek asynchronní operace.

Příklad programu Async/Await

const PromiseFunction = () =>{
 vrátit nový slib((vyřešit, odmítnout) => {
 setTimeout(() => {
 resolve("tato asynchronní operace proběhla dobře")
 }, 3000)
 })
}
const AsyncAwaitFunc = async () => {
 const result = wait PromiseFunction();
 console.log (výsledek);
}
AsyncAwaitFunc();

Výše uvedený kód vrátí následující výstup v konzole:

tato asynchronní operace proběhla dobře

Jaké jsou hlavní poznatky?

Z tohoto článku byste si měli vzít několik hlavních bodů:

• Asynchronní programování je cenné, protože snižuje čekací dobu programu a vytváří rychlejší aplikace.
• Funkce zpětného volání může být synchronní nebo asynchronní.
• Promises nabízejí lepší způsob, jak zvládnout asynchronní operace než funkce zpětného volání.
• Funkce Async/wait zpracovávají sliby lépe než pomocí řetězových funkcí.
• Funkce async/wait zpracovává asynchronní operace způsobem, který vypadá synchronně, což usnadňuje pochopení.
• Funkce šipek vám pomohou napsat lepší kód.

Funkce šipek JavaScriptu z vás mohou udělat lepšího vývojáře

Chcete být lepší ve vývoji webu? Funkce šipek přidané do JavaScriptu ES6 vám poskytují dva způsoby, jak vytvářet funkce pro webové aplikace.

Přečtěte si další

O autorovi