szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== JavaScript Promise ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2022
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Mire használjuk =====

A Promise segítségével egy aszinkron folyamat eredményét várjuk. 

===== Promise létrehozása =====

<code javascript>
new Promise()
</code>

<code javascript>
var p = new Promise((resolve, reject) => {});
</code>


===== A Promise állapotai =====

  * pending - folyamatban van
  * fulfilled - resolve - sikeres választ
  * rejected - sikertelen választ

===== Promise használat =====
==== Tevékenység a Promison belül ====

<code javascript>
var p = new Promise((resolve, reject) => {
    let a = 30+35;
    if(a == 65) {
        resolve('Success');
    }else {
        reject('Failed');
    }
});
</code>

Böngésző konzoljára: 
 p<Enter>
==== Eredmény lekérése ====


<code javascript>
p.then(res => {
    console.log('A then eredménye: ', res);
})
.catch(err => {
    console.log('A catch eredménye: ', err);
})
</code>

===== Szállítás =====
==== A Promise ====

<code javascript>
const szallitas = new Promise((szallitas, visszautasitas) => {});
</code>


Nézzük meg a böngészőben.
Írjuk konzolon:
  szallitas

Majd: <Enter>

==== Szállítás ====

Sikeres szállítás:
<code javascript>
const szallitas = new Promise((szallitas, visszautasitas) => {
    szallitas();
});
</code>


Sikertelenség:
<code javascript>
const szallitas = new Promise((szallitas, visszautasitas) => {
    visszautasitas();
});
</code>


==== A szállítás szimulációja ====

<code javascript>
const szallitas = new Promise((szallitas, visszautasitas) => {
    const ran = Math.random();
    console.log(ran);
    if (ran > 0.5) {
        szallitas();
    }
    visszautasitas();
});
</code>


==== Késleltetés ====

<code javascript>
const szallitas = new Promise((szallitas, visszautasitas) => {
    setTimeout(()=> {
        const ran = Math.random();
        console.log(ran);
        if (ran > 0.5) {
            szallitas();
        }
        visszautasitas();
    }, 10000);
});
</code>


==== Az eredmény használata ====

<code javascript>
const szallitas = new Promise((szallitas, visszautasitas) => {
    setTimeout(()=> {
        const ran = Math.random();
        console.log(ran);
        if (ran > 0.5) {
            szallitas();
        }
        visszautasitas();
    }, 10000);
});

szallitas.then(() => {
    console.log('Szállítás történik');
})

szallitas.catch(() => {
    console.log('Hiba! Sikertelen szállítás!');
});
</code>

==== Használat függvényként ====

<code javascript>
const lekerSzallitas = () => {
    return new Promise((szallitas, visszautasitas) => {
        setTimeout(()=> {
            const ran = Math.random();
            console.log(ran);
            if (ran > 0.5) {
                szallitas();
            }
            visszautasitas();
        }, 10000);
    });
};

lekerSzallitas().then(() => {
    console.log('Szállítás történik');
});

lekerSzallitas().catch(() => {
    console.log('Hiba! Sikertelen szállítás!');
});

</code>


==== Vonatozás ====


<code javascript>
const lekerSzallitas = () => {
    return new Promise((szallitas, visszautasitas) => {
        setTimeout(()=> {
            const ran = Math.random();
            console.log(ran);
            if (ran > 0.5) {
                szallitas();
            }
            visszautasitas();
        }, 10000);
    });
};

lekerSzallitas().then(() => {
    console.log('Szállítás történik');
})
.catch(() => {
    console.log('Hiba! Sikertelen szállítás!');
});
</code>

==== Üzenetek Promise-ból ====

<code javascript>
const lekerSzallitas = () => {
    return new Promise((szallitas, visszautasitas) => {
        setTimeout(()=> {
            const ran = Math.random();
            console.log(ran);
            if (ran > 0.5) {
                szallitas('Siker');
            }
            visszautasitas('Hiba! A szállítás nem lehetséges');
        }, 10000);
    });
};
 
lekerSzallitas().then( res => {
    console.log(res);
})
.catch( res => {
    console.log(res);
});
</code>

===== Függelék =====
==== Korábban ====

A függőségek pokla:

<code>

getPosts('https://zold.lan/employees', function (employees) {
	getOneEmploye('https://zold.lan/employee/' + employees[0].id, function (employee) {
		someData(employee, function (employeeData) {
			renderEmployee(employeeData);
		});
	});
});
</code>




===== Linkek =====

  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise (2022)

Kapcsolódó:
  * https://gomakethings.com/promise-based-xhr/ (2022)
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
