JavaScript Promise
- Previous Page JS Asynchronous
- Next Page JS Async
"I Promise a Result!"
"Producing code(Üretim kodu)" bazı zaman alacak kod demektir
"Consuming code(Tüketim kodu)" sonuç bekleyen kod demektir
Promise, üretim kodunu ve tüketim kodunu birleştiren bir JavaScript nesnesidir
JavaScript Promise nesnesi
JavaScript Promise nesnesi, üretim kodunu ve tüketim kodunu çağırır:
Promise dilbilgisi
let myPromise = new Promise(function(myResolve, myReject) { // "Producing Code"(Biraz zaman alabilir) myResolve(); // Başarılı olduğunda myReject(); // Hata olduğunda }); // "Consuming Code" (Sonuç bekleyen bir taahhüt beklemek zorundasınız) myPromise.then( function(value) { /* Başarılı olduğunda kod */ }, function(error) { /* Hata olduğunda kod */ } );
Kod çalıştırılırken sonuç elde edildiğinde, iki geri çağrıdan birini çağırmalısınız:
Sonuç | Çağrı |
---|---|
Başarılı | myResolve(sonuç değeri) |
Hata | myReject(hata nesnesi) |
Promise nesnesi özellikleri
JavaScript Promise nesnesi şu şekilde olabilir:
- Pending
- Fulfilled
- Rejected
Promise nesnesi iki özellik destekler:state ve result.
Bir Promise nesnesi "pending" (çalışırken) olduğunda, sonuç tanımsızdır.
Bir Promise nesnesi "fulfilled" olduğunda, sonuç bir değerdir.
Bir Promise nesnesi "rejected" olduğunda, sonuç bir hata nesnesidir.
myPromise.state | myPromise.result |
---|---|
"pending" | tanımsız |
"fulfilled" | Sonuç değeri |
"rejected" | error nesnesi |
Promise özellikleri state ve result'e erişemezsiniz.
Promise yöntemini kullanarak Promise'leri işlemek zorundasınız.
Promise nasıl kullanılır
Aşağıda Promise kullanımı yöntemleri verilmiştir:
myPromise.then( function(value) { /* başarılı durumda bazı kodlar */ }, function(error) { /* bir hata durumunda bazı kodlar */ } );
Promise.then() iki parametre içerir, biri başarılı durum için geri çağrı, diğeri ise başarısız durum için geri çağrıdır.
Her ikisi de seçimli olduğundan, başarılı veya başarısız olma durumunda geri çağrı ekleyebilirsiniz.
Örnek
function myDisplayer(some) { document.getElementById("demo").innerHTML = some; } let myPromise = new Promise(function(myResolve, myReject) { let x = 0; // Kod oluşturma (bu biraz zaman alabilir) if (x == 0) { myResolve("Tamam"); } else { myReject("Hata"); } }); myPromise.then( function(value) {myDisplayer(value);}, function(error) {myDisplayer(error);} );
JavaScript Promise Örneği
Promise kullanımını göstermek için, bir önceki bölümdeki geri çağrı örneğini kullanacağız:
- Bekleme zaman aşımı
- Dosyayı bekleyin
Bekleme zaman aşımı
Geri çağrı kullanımı örneği
setTimeout(function() { myFunction("Beni seviyorum !!!"); }, 3000); function myFunction(value) { document.getElementById("demo").innerHTML = value; }
Promise kullanımı örneği
let myPromise = new Promise(function(myResolve, myReject) { setTimeout(function() { myResolve("Beni seviyorum !!"); }, 3000); }); myPromise.then(function(value) { document.getElementById("demo").innerHTML = value; });
Dosyayı bekleyin
Geri çağrı kullanımı örneği
function getFile(myCallback) { let req = new XMLHttpRequest(); req.open('GET', "mycar.html"); req.onload = function() { if (req.status == 200) { myCallback(req.responseText); } else { myCallback("Hata: " + req.status); } } req.send(); } getFile(myDisplayer);
Promise kullanımı örneği
let myPromise = new Promise(function(myResolve, myReject) { let req = new XMLHttpRequest(); req.open('GET', "mycar.htm"); req.onload = function() { if (req.status == 200) { myResolve(req.response); } else { myReject("File not Found"); } }; req.send(); }); myPromise.then( function(value) {myDisplayer(value);}, function(error) {myDisplayer(error);} );
Browser Support
ECMAScript 2015, also known as ES6, introduced the JavaScript Promise object.
The following table lists the first browser version to fully support Promise objects:
Chrome | IE | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
February 2014 | July 2015 | April 2014 | September 2014 | March 2014 |
- Previous Page JS Asynchronous
- Next Page JS Async