JavaScript Sözlerine Başlarken

Zaman uyumsuz kod olan görevleri gerçekleştirmek için kullanışlıdır zaman tükeniyor ama tabi ki eksilerden yoksun değil. Zaman uyumsuz kod kullanıyor geri arama işlevleri sonuçlarını işlemek için ancak geri arama işlevi değerleri döndüremiyorum bu tipik JavaScript işlevlerinin yapabildiğini.

Böylece, yalnızca kontrol etme yeteneğimizi ellerinden almazlar. işlevin yürütülmesi ama aynı zamanda yapmak hata işleme biraz güçlük. İşte burası Söz vermek nesne gelir, bazılarını doldurmayı amaçlar gibi asenkron kodlamada çukurlar.

Söz vermek teknik olarak bir standart iç nesne JavaScript’te anlamı geliyor JavaScript’e yerleşik. Temsil etmek için kullanılır zaman uyumsuz bir kod bloğu sonucu (veya kodun başarısız olmasının nedeni) ve zaman uyumsuz kodun yürütülmesi.

Sözdizimi

Yaratabiliriz bir örneği Söz vermek nesne kullanmak yeni anahtar kelime:

 Yeni Söz (işlev (çözümle, reddet)) ); 

İşlev parametre olarak geçti -e Söz vermek() yapıcı olarak bilinir vasiyet hükümlerini gerçekleştiren erkek. Zaman uyumsuz kodu tutar ve iki parametresi vardır fonksiyon tip, olarak anılır çözmek ve reddetmek fonksiyonlar (bunlara kısaca daha fazlası).

Devletler Söz vermek nesne

başlangıç ​​hali bir Söz vermek nesne denir kadar. Bu durumda, zaman uyumsuz hesaplamanın sonucu mevcut değil.

İlk bekleyen durum olarak değişir yerine hesaplama olduğunda durumu başarılı. hesaplamanın sonucu bu durumda mevcut.

Asenkron hesaplama durumunda başarısız, Söz vermek nesneye taşınır reddedilen başlangıçtan itibaren durum kadar belirtmek, bildirmek. Bu durumda, hesaplama başarısızlığının nedeni (yani, hata mesajı) kullanıma sunuldu.

Gitmek için kadar için yerine belirtmek, bildirmek, çözmek() denir. Gitmek için kadar için reddedilen belirtmek, bildirmek, ) (Reddetme denir.

sonra ve yakalamak yöntemleri

Ne zaman devlet dan değişiklik kadar için yerine, olay işleyicisi Söz vermek nesne en sonra yöntem Idam edildi. Ve ne zaman devlet dan değişiklik kadar için reddedilen, olay işleyicisi Söz vermek nesne en yakalamak yöntem Idam edildi.

örnek 1

“Sigara Promisified” kod

Bir varsayalım ki hello.txt içeren dosyayı “Merhaba” sözcüğü. Bir AJAX isteğini şu şekilde yazabiliriz o dosyayı al ve içeriğini göster, kullanmadan Söz vermek nesne:

 işlevi getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType (metin / düz '); xhr.send (); xhr.onload = function () try anahtar (this.status) vaka 200: document.write (this.response); break; durum 404: 'Dosya Bulunamadı' fırlat; default: throw 'Dosya alınamadı';  catch (err) console.log (err);  getTxt (); 

Dosyanın içeriği varsa başarıyla alındı, yani. cevap durum kodu 200, cevap metni belgeye yazılmış. Eğer dosya bulunamadı (durum 404), bir “Dosya bulunamadı” hata mesajı atıldı. Aksi takdirde, bir genel hata mesajı dosyanın alınmadığını gösterir..

“Promisified” kod

Şimdi hadi Yukarıdaki kodu söz ver:

 function getTxt () return yeni Promise (function (çöz, reddet)) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.send (); xhr.onload = function () switch (this.status) vaka 200: solve (this.response); vaka 404: reddet ('Dosya Bulunamadı'); dosyayı al ');;);  getTxt (). sonra (function (txt) document.write (txt);). catch (function (err) console.log (err);); 

getTxt () fonksiyon şimdi kodlanmıştır yeni bir örneğini döndür Söz vermek nesne, ve yürütme işlevi, asenkron kodu öncekilerden tutar..

Ne zaman cevap durum kodu 200, Söz vermek olduğu yerine tarafından çağrı çözmek() (yanıt, parametresi olarak iletilir. çözmek()). Durum kodu 404 veya başka bir Söz vermek olduğu reddedilen kullanma ) (Reddetme (parametresi olarak uygun hata mesajı ile ) (Reddetme).

etkinlik işleyicileri sonra() ve yakalamak() yöntemleri arasında Söz vermek nesne sonunda eklendi.

Ne zaman Söz vermek olduğu yerine, işleyicisi sonra() yöntem çalıştırıldı. Onun argümanı parametre iletildi çözmek(). Olay işleyicisinin içinde, yanıt metni (bağımsız değişken olarak alınan) belgeye yazılmış.

Ne zaman Söz vermek olduğu reddedilen, olay işleyicisi yakalamak() yöntem çalıştırıldı, hatayı günlüğe kaydetme.

ana avantaj Yukarıda belirtilen Kodlanan versiyonun açıklaması hata işleme. Etrafında Tutulmamış İstisnalar atmak yerine - Sözde Olmayan versiyondaki gibi - uygun hata mesajları iade edilir ve kaydedilir.

Ama bu sadece dönen arasında başarısızlık mesajları aynı zamanda asenkron hesaplamanın sonucu bu bizim için gerçekten avantajlı olabilir. Bunu görmek için örneğimizi genişletmemiz gerekecek.

Örnek 2

“Sigara Promisified” kod

Yerine sadece metni görüntülemek hello.txt, İstiyorum ile birleştirmek “Dünya” sözcük ve ekranda göster 2 saniyelik bir zaman aşımından sonra. İşte kullandığım kod:

 işlevi getTxt () let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType (metin / düz '); xhr.send (); xhr.onload = function () try anahtar (this.status) vaka 200: document.write (concatTxt (this.response)); break; durum 404: 'Dosya Bulunamadı' fırlat; default: throw 'Dosya alınamadı';  catch (err) console.log (err);  işlev concatTxt (res) setTimeout (function () return (res + 'Dünya'), 2000);  getTxt (); 

Durum kodu 200’de concatTxt () fonksiyon denir Yanıt metnini “Dünya” sözcük belgeye yazmadan önce.

Ancak bu kod istenildiği gibi çalışmayacak. setTimeout () geri çağırma işlevi birleştirilmiş dizgeyi döndüremiyorum. Belgeye ne basılacak Tanımsız çünkü bu ne concatTxt () döner.

“Promisified” kod

Yani, kodu çalıştırmak için, hadi Yukarıdaki kodu söz ver, dahil olmak üzere concatTxt ():

 function getTxt () return yeni Promise (function (çöz, reddet)) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: solve (this.response); case 404: reddet ('Dosya Bulunamadı'); default: reddet ('Başarısız Oldu dosyayı al ');;);  function concatTxt (txt) return new Promise (function (çözümle, reddet)) setTimeout (function () solve (txt + 'World');, 2000););  getTxt (). sonra ((txt) => return concatTxt (txt);). sonra ((txt) => document.write (txt);). catch ((err) => konsol. log (err);); 

Sadece gibi getTxt (), concatTxt () ayrıca işlev yeni bir sonuç verir Söz vermek nesne birleştirilmiş metin yerine Söz vermek tarafından geri döndü concatTxt () olduğu geri arama işlevi içinde çözüldü setTimeout ().

Yukarıdaki kodun sonuna yakın, ilk olay işleyicisi sonra() yöntem ne zaman çalışır? Söz vermek arasında getTxt () olduğu yerine, yani dosya olduğunda başarıyla alındı. Bu işleyicinin içinde, concatTxt () denir ve Söz vermek tarafından geri döndü concatTxt () Iade edildi.

İkinci olay işleyicisi sonra() yöntem ne zaman çalışır? Söz vermek tarafından geri döndü concatTxt () olduğu yerine, yani iki saniye zaman aşımı sona ermiştir ve çözmek() denir birleştirilmiş dizgenin parametresi olarak.

En sonunda, yakalamak() tüm istisnaları ve başarısızlık mesajlarını yakalar Her iki sözden de.

Bu Promisified versiyonunda, “Selam Dünya” dize olacak başarıyla yazdırıldı belgeye.