[[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 =====


new Promise()


var p = new Promise((resolve, reject) => {});

===== 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 ====


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

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


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

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


const szallitas = new Promise((szallitas, visszautasitas) => {});

Nézzük meg a böngészőben. Írjuk konzolon: szallitas Majd: ==== Szállítás ==== Sikeres szállítás:


const szallitas = new Promise((szallitas, visszautasitas) => {
    szallitas();
});

Sikertelenség:


const szallitas = new Promise((szallitas, visszautasitas) => {
    visszautasitas();
});

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


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

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


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

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


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!');
});

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


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!');
});

==== Vonatozás ====


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!');
});

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


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);
});

===== Függelék ===== ==== Korábban ==== A függőségek pokla:



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

===== Linkek ===== * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise (2022) Kapcsolódó: * https://gomakethings.com/promise-based-xhr/ (2022)