Promise API

Promisede 5 statik yöntem vardır. Kullanım durumlarını burada hızlı bir ÅŸekilde ele alacağız.

Promise.resolve

Söz dizimi:

let promise = Promise.resolve(value);

Verilen value ile çözülmüş olan bir söz verir. Buradaki gibi:

let promise = new Promise(resolve => resolve(value));

Yöntem zaten bir değere sahipken kullanılır. Ancal bir söz içine “sarılmış” olmasını ister.

ÖrneÄŸin, loadCached fonksiyonu aÅŸağıda urlyi alır ve sonucu hatırlar. Böylece aynı URL’deki gelecekteki çaÄŸrılar hemen döndürülür.

function loadCached(url) {
  let cache = loadCached.cache || (loadCached.cache = new Map());

  if (cache.has(url)) {
    return Promise.resolve(cache.get(url)); // (*)
  }

  return fetch(url)
    .then(response => response.text())
    .then(text => {
      cache.set(url,text);
      return text;
    });
}

loadCached(url).then(…) kullanabiliriz. Çünkü fonksiyonun bir söz döndürmesi garantilidir. Amaç Promise.resolve (*) doÄŸrultusunda hizmet eder: Arayüzünün birleÅŸik olduÄŸundan emin olun. .thenden sonra her zaman loadCached kullanabiliriz.

Promise.reject

Söz dizimi:

let promise = Promise.reject(error);

error ile reddedilen bir söz oluÅŸturun.

Yukarıdaki ile aynı:

let promise = new Promise((resolve, reject) => reject(error));

Gerçek kodda nadiren kullanılan, bütünlük için buradayız.

Promise.all

Paralel olarak yürütülmek için birçok söz vermek isteriz ve hepsinin hazır olmasını bekleriz.

Örneğin, paralel olarak birkaç URL’yi indirin ve hepsi bittiğinde içeriği işleyin.

Bunun için Promise.all.

Söz dizimi:

let promise = Promise.all([...promises...]);

Yeni bir söz alır ve bir dizi söz alır (Teknik olarak herhangi bir yinelenebilir nesne, ama çoğunlukla bir array.)

Yeni söz, listelenen tüm sözlerin yerine getirildiği ve sonuçların bir dizisine sahip olduğunda karar verir.

ÖrneÄŸin, aÅŸağıdaki Promise.all 3 saniye sonra yerleÅŸir ve sonucu [1, 2, 3] dizisidir:

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(alert); // 1,2,3 sözler hazır olduğunda: her söz bir dizi üyesine katkıda bulunur

Lütfen göreli siparişin aynı olduğunu unutmayın. İlk sözün sözülmesi uzun sürse bile sonuçta ilk sırada yer almaktadır.

Yayın bir hile, bir dizi iÅŸ verisini bir dizi sözle eÅŸleÅŸtirmek ve ardından bunu Promise.all içine kaydırmaktır.

Örneğin, eğer bir dizi URL’miz varsa hepsini şöyle getirebiliriz:

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://api.github.com/users/jeresig'
];

// Her URL'yi getirme sözüyle eşleyin
let requests = urls.map(url => fetch(url));

// Tüm işler çözülene kadar Promise.all bekler
Promise.all(requests)
  .then(responses => responses.forEach(
    response => alert(`${response.url}: ${response.status}`)
  ));

Bir dizi github kullanıcısı için kullanıcı bilgilerini adlarına göre almakla ilgili daha büyük bir örnek (veya bir mal dizisini kimlikleriyle alabiliriz. Mantık aynıdır):

let names = ['iliakan', 'remy', 'jeresig'];

let requests = names.map(name => fetch(`https://api.github.com/users/${name}`));

Promise.all(requests)
  .then(responses => {
    // Tüm cevaplar hazır. HTTP durum kodlarını gösterebiliriz
    for(let response of responses) {
      alert(`${response.url}: ${response.status}`); // Her URL için 200 gösterir
    }

    return responses;
  })
  // Yanıt dizisini, içeriğini okumak için response.json() dizisine eşleyin
  .then(responses => Promise.all(responses.map(r => r.json())))
  // Tüm JSON cevapları ayrıştırılır: "users" bunların dizisidir.
  .then(users => users.forEach(user => alert(user.name)));

EÄŸer sözlerden herhangi biri ret edildiyse Promise.all bu hatayı hemen ret eder

Örneğin:

Promise.all([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).catch(alert); // Error: Whoops!

Ä°ÅŸte ikinci söz iki saniye içinde reddediyor. Bu Promise.allun hemen reddedilmesine yol açar, bu yüzden .catch çalıştırır: reddedilme hatası tüm Promise.allun sonucudur.

Örneğin burada `[1, 2, 3]` döner:

```js run
Promise.all([
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(1), 1000)
  }),
  2, // Promise.resolve(2) olarak kabul edildi.
  3  // Promise.resolve(3) olarak kabul edildi.
]).then(alert); // 1, 2, 3

Promise.allSettled

Herhangi bir söz reddederse Promise.all bir bütün olarak eder. Devam etmek için all sonuçlarına ihtiyacımız olduÄŸunda bu iyidir:

Promise.all([
  fetch('/template.html'),
  fetch('/style.css'),
  fetch('/data.json')
]).then(render); // render yöntemi hepsine ihtiyaç duyuyor

Promise.allSettled tüm sözlerin yerine getirilmesini bekler: biri reddetse bile diÄŸerini bekler. Sonuçta ortaya çıkan dizin:

• {status:"fulfilled", value:result} baÅŸarılı cevap için,
• {status:"rejected", reason:error} hatalar için.

Örneğin, birden fazla kullanıcı hakkında bilgi edinmek istiyoruz. Bir istek başarısız olsa bile diğerleriyle de ilgileniyoruz

Hadi Promise.allSettled kullanalım:

let urls = [
  'https://api.github.com/users/iliakan',
  'https://api.github.com/users/remy',
  'https://no-such-url'
];

Promise.allSettled(urls.map(url => fetch(url)))
  .then(results => { // (*)
    results.forEach((result, num) => {
      if (result.status == "fulfilled") {
        alert(`${urls[num]}: ${result.value.status}`);
      }
      if (result.status == "rejected") {
        alert(`${urls[num]}: ${result.reason}`);
      }
    });
  });

Yukarıdaki satırdaki results (*) olacak:

[
  {status: 'fulfilled', value: ...response...},
  {status: 'fulfilled', value: ...response...},
  {status: 'rejected', reason: ...error object...}
]

Dolayısıyla, her söz için onun satütüsünü ve deÄŸer/sebep bilgisini alırız.

Polyfill

EÄŸer tarayıcı Promise.allSettled özelliÄŸini desteklemiyorsa, polyfill kolaydır.

if(!Promise.allSettled) {
  Promise.allSettled = function(promises) {
    return Promise.all(promises.map(p => Promise.resolve(p).then(v => ({
      state: 'fulfilled',
      value: v,
    }), r => ({
      state: 'rejected',
      reason: r,
    }))));
  };
}

Bu kodda, promises.map giriÅŸ deÄŸerini alır, p => Promise.resolve(p) ile sözleri döndürüyor (sadece bir söz verilmemiÅŸse) ve sonra bunu iÅŸleyiciye ekler.

Bu iÅŸleyici baÅŸarılı bir v sonucusunu {state:'fulfilled', value:v} ve bir r hatasını {state:'rejected', reason:r} olarak çevirir. Bu Promise.allSettled formatıyla aynıdır.

Sonra bazı sonuçları reddetse bile sonuçları almak ya da all sözleri vermek için Promise.allSettledi kullanabiliriz.

Promise.race

Promise.all benzer ÅŸekilde sözler yenilenebilir. Ancak hepsinin bitmesini beklemek yerine ilk sonucu (veya hatayı) bekler ve devam eder.

Söz dizimi:

let promise = Promise.race(iterable);

Mesela burada sonuç 1 olacak:

Promise.race([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
]).then(alert); // 1

Böylece ilk sonuç/hata bütün Promise.race sonucu olur. Ä°lk kararlaÅŸtırılan sözün ardından “yarışı kazanır”, diÄŸer tüm sonuçlar/hatalar göz ardı edilir

Özetle

Promise sınıfının 5 statik metodu vardır:

1. Promise.resolve(value) – verilen deÄŸerle çözümlenmiÅŸ bir söz verir.
2. Promise.reject(error) – verilen hata ile reddedilen bir söz verir…
3. Promise.all(promises) – çözmek için tüm sözleri bekler ve sonuçlarının bir dizisini döndürür. EÄŸer verilen sözlerden herhangi biri reddederse o zaman Promise.all hatası olur ve diÄŸer tüm sonuçlar göz ardı edilir.
4. Promise.allSettled(promises) (yeni bir metod) – tüm sözlerin çözülmesini veya reddedilmesini bekler ve sonuçlarının bir dizisini nesne olarak döndürür.
   • state: 'fulfilled' yada 'rejected'
   • value (if fulfilled) ya da reason (reddedilirse).
5. Promise.race(promises) – ilk yerlmeÅŸmeye söz vermek için bekler ve sonucu/hatası sonuç olur. Bu beÅŸ maddede Promise.all/allSettled en yaygın kullanılanıdır.