Native JS Promises

Promise nədir?

Hansı problemin həlli üçün yaradılıb?

Necə və harada istifadə edilir?

Hansi states-i var?

‘Error Handling’ , ‘Callback hell’ , ‘Promise Inherit’ və sair bu kimi mövzulara toxunacağıq birlikdə. Xoş mütalialər.

NOTE: Mövzunu ‘Native Promises’ seçməyimin əsas səbəbi JS Interview questions-da çox soruşulmağıdır.

Let’s start…

Promises -- Async operation-ın ‘Future value’-sunu özündə saxlayan JS obyektidir. async əməliyyatları handle etməyin bir yoludur.

Bir prosesin bitib-bitmədiyini anlıyaraq yola davam etmək istəyirsinizsə Promise istifadə edə bilərsiniz.

Başqa sözlə Promise, async əməliyyat bitdikdən sonra avtomatik olaraq haradan davam edəcəyimizlə bağlı yönləndirmə edən JS obyektidir.

• Pending: nə Failure, nədə Success halıdır (Initial state).
• Fulfilled: async əməliyyatın Success halıdır(onFulfilled()).
• Rejected: async əməliyyatın Failure halıdır (onRejected()).
• Settled: ən sonda ya Failure, yada Success olan halıdır. .finally methodu çağrılır.

‘Callback Hell’ -- Promises anti-pattern

Əminəm ki, ES6-dan əvvəlki versiya ilə işləyən developers bunun nə olduğunu bilir. Amma yenə də mən bilməyənlər üçün izah edəcəm, çünki bunu biləndə Promises-in avantajı daha rahat anlaşılır.

Caııbacks VS Promise

Daha aydın anlamaq üçün bir nümunəyə baxaq : DB-ə ardıcıl requestər göndərməli olduğumuzu düşünək. Bunu ES6-dan əvvəlki versiyalarla yazmalı olsaq inner callbacks-lə aşağıdakı kimi yazmalı idik.

with ‘Callback hell’

Yəni birinci getData() çağrılacaq və response qayıdandan sonra getMoreData() çağrılacaq və ondanda response qayıdandan sonra getSomeMoreData() çağrılacaq və s.

Tam da bu səbəbdən , yəni, ardıcıl icra edilən proseslərin sayı artdıqca kodumuz ‘Callback hell’ -nə dönməsin və clean code olsun deyə promises istifadə edirik.

Bunu promises ilə yazmalı olsaq aşağıdakı kimi olacaq kodumuz :

with ‘Promises’

Error Handling

Resolve() -- async proses uğurlu olarsa işə düşəcək blokdur.

Reject() -- async prosesdə problem olarsa işə düşəcək blokdur. Baş verə biləcək errors-i handle etmək üçün nəzərdə tutulub.

Qayıdan nəticəni handle etmək üçün aşağıdakı funksiyalardan istifadə olunur.

.then() -- resolve halında qayıdan nəticəni bizə verir.

.catch() -- reject halında qayıdan nəticəni(error) bizə verir.

.finally() -- promise-dən qayıdan nəticədən asılı olmayaraq həmişə işə düşür.

easy example

Indi isə yuxarıdakıları real həyatdan götürülmüş sadə dialog nümunəsi ilə anlamağa çalışaq.

2 dost , Rüfət və Rəşad birlikdə JS öyrənmək istəyir amma necə öyrənəcəkləri ilə bağlı fikir ayrılığı yaşayırlar.Çünki, Rüfət selfstudy öyrənməyi təklif etsə də Rəsad yaxşı resources olmadığını əsas gətirərək mentor yanına getmək istəyir.

Onların arasında belə bir qısa dialog keçir :

Get Nazar Pashazade’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Rüfət: Mənim bir təklifim var.

Rəşad: Buyur.

Rüfət: Mənə bir gün vaxt ver mən sənə yaxşı resources tapacam.Əgər tapa bilməsəm mentor yanına gedərik SÖZ VERİRƏM)

Rəşad: Tamam razılaşdıq amma resources Azərbaycan dilində olsun please.

Rüfət: Yaxşı .

İndi isə yuxarıdakıları code-a çevirək :

Handle promise states

Handle result

Results in console

Promises chain -- prosesdən geri qayıdan qiymətin üzərində əməliyyat icra edə-edə (step-by-step ) davam etməyə şərait yaradır.

Promise Chain

Static methods

Promise.all() -- Proseslərin çox olduğunu nəzərə alsaq daha optimal variant olaraq bu method-u istifadə etmək olar. Promises-i paralel icra edir.

Əgər bütün promise-lər resolve olarsa geriyə bütün resolved promise-lərin qiymətlərinin array-i qayıdır.

Output : // [ ‘one’, ‘two’, ‘third’ ]

Əgər ən az bir reject olan bir promise varsa catch case-inə girir və rejected promise-lərdən ən tez bitəninin qiyməti geriyə qayıdır.

Output : // two

Promise.allSettled() - Settled olan(Resolve və ya Reject) hər promise-in qiymət və status-undan ibarət obyektlərin array-ini geri qaytarır.

[
   { status: 'rejected', reason: 'one'  },
   { status: 'rejected', reason: 'two'  },
   { status: 'fulfilled', value: 'third'}
]

Promise.race() -- Promises[] qəbul edir və adından da göründüyü kimi promises-i yarışdırır.

Yəni, ən tez Settled olan Promise-in qiymətini geri qaytarır.

Output : // two

Promise.any() — Promises[] qəbul edir və ən tez resolve olan promise-in qiymətini geri qaytarır.

Output : // fourth

Ən sonda bir promise yaranarkən arxada nələri Inherit elədiyinə və icində nələrin olduğunada baxaq :

Create new Promise

promise INHERITS Promise obj

Promise obj INHERITS Object

Additional informations :

Async proseslərin handle edilmə yolları :

1. Callbacks
2. Promises
3. Async /Await

Next topic is ‘Closure, IIEF, How work JS Engine ?’