hlorand/promise-javascript.html

## promise-javascript.html
<body bgcolor="black">
<script>

/*
Tegyük fel, hogy étteremben kaját rendelünk. Ez vagy megjön, vagy nem.
Attól függően, hogy megjött-e vagy sem különbözőféleképp szeretnénk reagálni.
A reakciókat két függvény írja le: a siker() és a bukas(). Mindkettő a
saját üzenetén kívül képes extra üzenetet fogadni
*/

function siker(uzenet){
	console.log("fizetek " + uzenet);
}

function bukas(uzenet){
	console.log("felháborodok " + uzenet);
}

/*
Az éttermi rendelés során a pincér egy ígéretet tesz nekünk. Az ígéret azzal jár, hogy
valami művelet elindul (a szakács elkezdi a kaját főzni) és majd ennek lesz eredménye,
a már említett siker, amikor meghozzák a kaját, vagy a bukás, amikor nem.

Az ígéretet a Javscript-ben egy Promise objektum jelzi. Ennek a konstruktorában
egy függvényt kell létrehozni. Ez a következőket teszi:

1. valamit csinál, pl adatbázilekérést (éttermi hasonlat: a kaja főzése megtörténik vagy sem)
2. ha sikeres ez a művelet, akkor meghívja a sikerül függvényt
3. ha sikertelen ez a művelet, akkor meghívja a bukás függvényt

A sikerül és a bukás függvényt a paraméter listájában várja a Promise.
*/

var igeret = new Promise(function(sikerfv, bukasfv){

	// a művelet - most a kaja elkészültét egy true/false változóval jelezzük
	var kaja = true;

	if( kaja == true  ) sikerfv("1000 ft-ot");
	else bukasfv("nagyon");
});

// megmondjuk, hogy mely függvény hívódjon meg siker és bukás esetén
igeret.then(siker).catch(bukas);

/*
-------------------------------------
Így működik a háttérben a promise. Felmerülhet a kérdés, hogy mi értelme ezt ilyen formában
leírni, hiszen ennek központi része az if-else, az elég lehetne. A válasz: maga a művelet
lehet, hogy több ideig tart, mert az pl egy API lekérés. Ez esetben a Promise szerkezet
biztosítja, hogy nincs blokkolva a végrehajtás és siker esetén a siker() bukás esetén a
bukas() függvény hívódik meg. A Promise-nak 3 állapota van:

- pending
- fulfilled
- rejected

Életszerűbb példa: A fetch() függvény, amivel API lekéréseket lehet végezni, Promise-t ad vissza.
A .then() és .catch() által siker és bukás esetén meghívott függvényeket nem kell külön definiálni
akár ott helyben a nyíl szintaxissal is megtehetjük. A fetch() siker kezelő függvénynek
olyat vár, aminek van egy paramétere. Az lekérés válaszát adja át neki.
*/

var letoltes = fetch("data.json");

letoltes.then( (valasz) => {
	console.log(valasz);
}).catch( (hiba) => {
	console.log(hiba);
});

/*
Egyszerűsítések:
- nem kell külön változót bevezetni a Promise objektumnak
- a nyíl szintaxisnál ha csak egy parancsból áll a függvény, elhagyható a { }
*/

fetch("data.json")
	.then( (valasz) => console.log(valasz) )
	.catch( (hiba)  => console.log(hiba) );

/*
Ha érkezik válasz, akkor az meg is jelenik a konzolon egy Response objektum képében.
Viszont mi a szöveges tartalomhoz szeretnénk hozzáférni. Ennek a Response objektumnak
van egy .json() metódusa, ami ezt hivatott előállítani. Viszont nem közvetlenül egy
szöveget ad ez vissza, mert a feldolgozás is lehet hosszadalmas, hanem ez is egy
Promise-t. Szóval ehhez is tartozik egy .then().catch() részleg, amit ugyanúgy
method chaining-gel elő tunuk hívni
*/

fetch("data.json")
	.then( (valasz) => valasz.json() ) // a valasz-nak inkább előhívjuk a .json() metódusát
	.then( (szoveg) => console.log(szoveg) ) // ez a .then() a valsz.json() által szolgáltatott Promise reakciója
	.catch( (hiba)  => console.log(hiba) );

</script>
	<body bgcolor="black">
	<script>

	/*
	Tegyük fel, hogy étteremben kaját rendelünk. Ez vagy megjön, vagy nem.
	Attól függően, hogy megjött-e vagy sem különbözőféleképp szeretnénk reagálni.
	A reakciókat két függvény írja le: a siker() és a bukas(). Mindkettő a
	saját üzenetén kívül képes extra üzenetet fogadni
	*/

	function siker(uzenet){
	console.log("fizetek " + uzenet);
	}

	function bukas(uzenet){
	console.log("felháborodok " + uzenet);
	}

	/*
	Az éttermi rendelés során a pincér egy ígéretet tesz nekünk. Az ígéret azzal jár, hogy
	valami művelet elindul (a szakács elkezdi a kaját főzni) és majd ennek lesz eredménye,
	a már említett siker, amikor meghozzák a kaját, vagy a bukás, amikor nem.

	Az ígéretet a Javscript-ben egy Promise objektum jelzi. Ennek a konstruktorában
	egy függvényt kell létrehozni. Ez a következőket teszi:

	1. valamit csinál, pl adatbázilekérést (éttermi hasonlat: a kaja főzése megtörténik vagy sem)
	2. ha sikeres ez a művelet, akkor meghívja a sikerül függvényt
	3. ha sikertelen ez a művelet, akkor meghívja a bukás függvényt

	A sikerül és a bukás függvényt a paraméter listájában várja a Promise.
	*/

	var igeret = new Promise(function(sikerfv, bukasfv){

	// a művelet - most a kaja elkészültét egy true/false változóval jelezzük
	var kaja = true;

	if( kaja == true ) sikerfv("1000 ft-ot");
	else bukasfv("nagyon");
	});

	// megmondjuk, hogy mely függvény hívódjon meg siker és bukás esetén
	igeret.then(siker).catch(bukas);

	/*
	-------------------------------------
	Így működik a háttérben a promise. Felmerülhet a kérdés, hogy mi értelme ezt ilyen formában
	leírni, hiszen ennek központi része az if-else, az elég lehetne. A válasz: maga a művelet
	lehet, hogy több ideig tart, mert az pl egy API lekérés. Ez esetben a Promise szerkezet
	biztosítja, hogy nincs blokkolva a végrehajtás és siker esetén a siker() bukás esetén a
	bukas() függvény hívódik meg. A Promise-nak 3 állapota van:

	- pending
	- fulfilled
	- rejected

	Életszerűbb példa: A fetch() függvény, amivel API lekéréseket lehet végezni, Promise-t ad vissza.
	A .then() és .catch() által siker és bukás esetén meghívott függvényeket nem kell külön definiálni
	akár ott helyben a nyíl szintaxissal is megtehetjük. A fetch() siker kezelő függvénynek
	olyat vár, aminek van egy paramétere. Az lekérés válaszát adja át neki.
	*/

	var letoltes = fetch("data.json");

	letoltes.then( (valasz) => {
	console.log(valasz);
	}).catch( (hiba) => {
	console.log(hiba);
	});

	/*
	Egyszerűsítések:
	- nem kell külön változót bevezetni a Promise objektumnak
	- a nyíl szintaxisnál ha csak egy parancsból áll a függvény, elhagyható a { }
	*/

	fetch("data.json")
	.then( (valasz) => console.log(valasz) )
	.catch( (hiba) => console.log(hiba) );

	/*
	Ha érkezik válasz, akkor az meg is jelenik a konzolon egy Response objektum képében.
	Viszont mi a szöveges tartalomhoz szeretnénk hozzáférni. Ennek a Response objektumnak
	van egy .json() metódusa, ami ezt hivatott előállítani. Viszont nem közvetlenül egy
	szöveget ad ez vissza, mert a feldolgozás is lehet hosszadalmas, hanem ez is egy
	Promise-t. Szóval ehhez is tartozik egy .then().catch() részleg, amit ugyanúgy
	method chaining-gel elő tunuk hívni
	*/

	fetch("data.json")
	.then( (valasz) => valasz.json() ) // a valasz-nak inkább előhívjuk a .json() metódusát
	.then( (szoveg) => console.log(szoveg) ) // ez a .then() a valsz.json() által szolgáltatott Promise reakciója
	.catch( (hiba) => console.log(hiba) );

	</script>