Pokročilý JS

34. hodina MVOP WBF

Matěj Cajthaml — SSPŠ

©

Opakování

Co je to třída?

Co je to instance?

Co je to vlastnost?

Jak zapíšeme neveřejnou vlastnost?

Co je to metoda?

Jak zapíšeme neveřejnou metodu?

Co je to konstruktor?

Co jsou to statické proměnné / metody?

Funguje OOP v prohlížeči?

Proč místo tříd nepoužíváme objekty?

Co jsou to nepovinné parametry?

Co je to getter?

Co je to setter?

Proč používáme gettery a settery?

K čemu slouží dědičnost?

Co je to abstakce dědičnosti?

Co platí pro konstruktory v dědičnosti?

Promises

Co to znamená promise?

Aktuální kód

  • běží synchronně - za sebou
  • než se provede další příkaz, musí se provést ten před ním
  • nereálné v produkčním prostředí - nemůžeme čekat než se něco stane

Na co na webových stránkách musíme čekat v kódu?

Promises

  • způsob vytvoření asynchronního kódu
  • akce trvají různě dlouho
  • neblokují se další příkazy, které na daném výsledku nezávisí
  • ty, co jsou na sobě závislé čekají

then

  • funkce se zavolá s hodnotou poté, co se promises vyřeší
  • můžeme nastavit i vícekrát - řetízkují se

Jak si myslíte, že bude implementovaná funkce generateCatName?

Náhodné kočky

Společná práce

Vytvořte funkci, která Vám vrátí promise, která po 1 vteřině vrátí objekt s náhodným jménem kočky, náhodným věkem kočky a náhodnou barvou.

Funkci zavolejte a vypište obsah objektu, který Vám přijde.

Někdy se může stát, že se operace neprovede.

Co se závislostmi Promise stane?

Odmítnutí v kódu

Zachycení chyb uvnitř promise

Zachycení chyb uvnitř promise

  • pomocí volání .catch, která zachytí všechny chyby
  • zachytí chyby před tím a zavolají nějaký kód
  • volání .then po zavoláni .catch se zavolají i přes chybu
  • proto často dáváme .catch až na konec

Garance

  • funkce přidávány pomocí .then budou volány v přesném pořadí a až potom (a jen když) bude předchozí funkce úspěšně splněna
  • funkce přidávány pomocí .then budou zavolány i po tom, co byly přidány již na vyřešenou promise

Volání promises

  • .all - zavolání všech najednou a najednou získat jejich data
  • .race - zavolání všech najednou, vrátí první

Náhodné kočky 2

Společná práce

Již máme vytvořenou funkci s promise na vrácení náhodné kočky.

Nyní pomocí promise udělejte, že se vrátí jedna kočka a po získání kočky se získá druha kočka (bude trvat sekundu) a takto desetkrát.

Asynchronní funkce

Asynchronní funkce

  • používání promises je velmi logicky náročné
  • využívají se stále ty samé konstrukce dokola
  • proto byl přidán syntax sugar pro asynchronní funkce
  • klíčové slovo async a await

async

  • říká, že je funkce asynchronní
  • vždy vrací promise
  • na tu se můžeme vázat
  • uvnitř používáme await

await

  • řiká, že na daný přikaz se musí počkat k pokračování

TypeScript

TypeScript

  • preprocessor
  • má k dispozici vše v JS
  • na více type system
  • tj. datové typy, více OOP, ...
  • nad rámec toho předmětu, možna někdy ve 4. ročníku

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Děkuji za pozornost!

  • matej.cajthaml@ssps.cz
  • https://ssps.cajthaml.eu/