Janji JavaScript
"Saya Menjanjikan Hasil!"
"Memproduksi kode" adalah kode yang bisa memakan waktu lama
"Mengkonsumsi kode" adalah kode yang harus menunggu hasilnya
Janji adalah objek JavaScript yang menautkan kode yang menghasilkan dan mengonsumsi kode
Objek Janji JavaScript
Objek JavaScript Promise berisi kode produksi dan panggilan ke kode konsumsi:
Sintaks Janji
let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)
myResolve(); // when successful
myReject(); // when error
});
// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Ketika kode yang memproduksi mendapatkan hasilnya, itu harus memanggil salah satu dari dua panggilan balik:
| Hasil | Panggilan |
|---|---|
| Kesuksesan | myResolve(nilai hasil) |
| Kesalahan | myReject (objek kesalahan) |
Properti Objek Janji
Objek Janji JavaScript dapat berupa:
- Tertunda
- Terpenuhi
- Ditolak
Objek Promise mendukung dua properti: state dan result .
Sementara objek Promise "tertunda" (berfungsi), hasilnya tidak ditentukan.
Ketika objek Janji "terpenuhi", hasilnya adalah nilai.
Ketika objek Promise "ditolak", hasilnya adalah objek error.
| myPromise.state | myPromise.result |
|---|---|
| "tertunda" | tidak terdefinisi |
| "terpenuhi" | nilai hasil |
| "ditolak" | objek kesalahan |
Anda tidak dapat mengakses status dan hasil properti Promise .
Anda harus menggunakan metode Promise untuk menangani janji.
Janji Bagaimana caranya?
Berikut ini cara menggunakan Promise:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() mengambil dua argumen, panggilan balik untuk sukses dan satu lagi untuk kegagalan.
Keduanya opsional, sehingga Anda dapat menambahkan panggilan balik hanya untuk keberhasilan atau kegagalan.
Contoh
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
let x = 0;
// The producing code (this may take some time)
if (x == 0) {
myResolve("OK");
} else {
myReject("Error");
}
});
myPromise.then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Contoh Janji JavaScript
Untuk mendemonstrasikan penggunaan janji, kami akan menggunakan contoh panggilan balik dari bab sebelumnya:
- Menunggu Waktu Habis
- Menunggu File
Menunggu Waktu Habis
Contoh Menggunakan Panggilan Balik
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Contoh Menggunakan Janji
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Menunggu file
Contoh menggunakan Callback
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(req.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
Contoh menggunakan Janji
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);}
);
Dukungan Peramban
ECMAScript 2015, juga dikenal sebagai ES6, memperkenalkan objek JavaScript Promise.
Tabel berikut mendefinisikan versi browser pertama dengan dukungan penuh untuk objek Promise:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |