Az ígéretek az egyik módja annak, hogy megbirkózzunk az aszinkron műveletekkel a JavaScript-ben. Sokan küzdenek az ígéretek működésének megértésével, ezért ebben a bejegyzésben megpróbálom a lehető legegyszerűbben elmagyarázni őket.
Az ígéretek tág témakörök, ezért nem részletezhetem ezt a cikket. Ám átfogó bemutatást talál az ígéretekről, az olyan kifejezések magyarázatát, mint a feloldás, az elutasítás és a láncolás, valamint egy kódpéldát az ígéretek létrehozásához és használatához.
Előfeltétel: A cikk jobb megértéséhez nézze meg a JavaScript visszahívásokról szóló másik bejegyzésemet.
Mi az ígéret?
A JavaScriptben szereplő ígéret hasonló a valós életben tett ígéretekhez. Amikor a való életben ígéretet teszünk, ez garancia arra, hogy a jövőben is tenni fogunk valamit. Mert ígéretet csak a jövőre lehet tenni.
Az ígéretnek két lehetséges eredménye van: vagy betartják, amikor eljön az ideje, vagy nem.
Ugyanez vonatkozik a JavaScript-ben tett ígéretekre is. Amikor definiálunk egy ígéretet a JavaScript-ben, akkor az megoldódik, amikor eljön az ideje, vagy elutasítjuk.
Ígéretek JavaScript-ben
Először is, az Ígéret egy tárgy. Az Ígéret objektumnak 3 állapota van:
- Függőben: Kezdeti állapot, mielőtt az Ígéret sikerrel járna vagy elbukna
- Megoldva: Teljes ígéret
- Elutasítva: Nem sikerült ígéret
Például amikor egy ígéret használatával adatokat kérünk a szervertől, az függőben van, amíg meg nem kapjuk adatainkat.
Ha sikerül megszereznünk az információkat a szerverről, az Ígéret sikeresen megoldásra kerül. De ha nem kapjuk meg az információt, akkor az Ígéret elutasított állapotban lesz.
Ezen felül, ha több kérés van, akkor az első ígéret megoldása (vagy elutasítása) után elindul egy új folyamat, amelyhez közvetlenül csatolhatjuk a láncolás nevű módszerrel.
Ha szeretné, megnézheti az alábbi videó verziót is:
Mi a különbség a visszahívások és az ígéretek között?
A fő különbség a visszahívási funkciók és az ígéretek között az, hogy az ígérethez visszahívást fűzünk, nem pedig átadjuk. Tehát továbbra is visszahívási funkciókat használunk az ígéretekkel, de más módon (láncolással).
Ez az ígéretek használatának egyik legnagyobb előnye, de miért?
Mi az a láncolás?
A visszahívási funkciókat évek óta egyedül használják a JavaScript aszinkron műveleteihez. Bizonyos esetekben azonban az ígéretek használata jobb megoldás lehet.
Ha több aszinkron műveletet kell végrehajtani, és ha megpróbáljuk a régi jó visszahívásokat használni hozzájuk, akkor gyorsan visszahúzódó helyzetbe kerülünk:
firstRequest(function(response) { secondRequest(response, function(nextResponse) { thirdRequest(nextResponse, function(finalResponse) { console.log('Final response: ' + finalResponse); }, failureCallback); }, failureCallback); }, failureCallback);Ha azonban ugyanazt a műveletet kezeljük az ígéretekkel, mivel a visszahívásokat csatolhatjuk, nem pedig átadjuk őket, ezúttal a fenti kód sokkal tisztábbnak és könnyebben olvashatónak tűnik:
firstRequest() .then(function(response) { return secondRequest(response); }).then(function(nextResponse) { return thirdRequest(nextResponse); }).then(function(finalResponse) { console.log('Final response: ' + finalResponse); }).catch(failureCallback);A fenti kód megmutatja, hogyan lehet több visszahívást egymás után láncolni. Az ígéretek egyik legjobb tulajdonsága a láncolás.
Ígéret létrehozása és használata lépésről lépésre
Először egy konstruktort használunk egy Promise objektum létrehozásához:
const myPromise = new Promise();Két paraméterre van szükség, egy a sikerhez (feloldás) és egy a sikertelenséghez (elutasítás):
const myPromise = new Promise((resolve, reject) => { // condition });Végül lesz egy feltétel. Ha a feltétel teljesül, az Ígéret megoldódik, különben elutasítja:
const myPromise = new Promise((resolve, reject) => { let condition; if(condition is met) { resolve('Promise is resolved successfully.'); } else { reject('Promise is rejected'); } });Tehát létrehoztuk az első ígéretünket. Most használjuk.
majd () a megoldott ígéretekhez:
Ha újra meglátogatja a képet a bejegyzés elején, látni fogja, hogy 2 eset van: egy a megoldott ígéretekért, egy pedig az elutasításért. Ha az Ígéret megoldódik (sikertörténet), akkor valami következik (attól függ, hogy mit csinálunk a sikeres Ígérettel).
myPromise.then();Az akkor () metódust az ígéret megoldása után hívják meg. Ezután eldönthetjük, mit kezdjünk a megoldott Ígérettel.
Naplózzuk például az üzenetet a konzolra, amelyet az Ígéretből kaptunk:
myPromise.then((message) => { console.log(message); });fogás () elutasított ígéretek esetén:
Az akkori () módszer azonban csak a Megoldott ígéretekre vonatkozik. Mi van, ha az ígéret nem sikerül? Ezután a catch () metódust kell használnunk.
Hasonlóképpen csatoljuk az akkor () metódust is. A catch () metódust közvetlenül utána is csatolhatjuk ():
myPromise.then((message) => { console.log(message); }).catch((message) => { console.log(message); });Tehát ha az ígéretet elutasítják, akkor a catch () metódusra ugrik, és ezúttal egy másik üzenetet fogunk látni a konzolon.
Csomagolás
Tehát így hozunk létre egy ígéretet a JavaScript-ben, és felhasználjuk megoldott és elutasított esetekre. Az ígéretek tágabb téma, és még sok mindent meg kell tanulni róluk. Tehát a működésük megértése időbe telik.
Ez a bejegyzés csak az Promises bevezetése, és remélem, hogy hasznosnak találta, hogy képet kapjon arról, hogy mik is a JavaScript ígéretei, és hogyan kell használni őket.
Ha többet szeretne megtudni a webfejlesztésről, keresse fel bátran a Youtube csatornámat.
Thank you for reading!