Cara menggunakan create own promise javascript

"I Promise a Result!"

"Producing code" is code that can take some time

"Consuming code" is code that must wait for the result

A Promise is a JavaScript object that links producing code and consuming code

JavaScript Promise Object

A JavaScript Promise object contains both the producing code and calls to the consuming code:

Promise Syntax

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 */ }
);

When the producing code obtains the result, it should call one of the two callbacks:

Promise Object Properties

A JavaScript Promise object can be:

The Promise object supports two properties: state and result.

While a Promise object is "pending" (working), the result is undefined.

When a Promise object is "fulfilled", the result is a value.

When a Promise object is "rejected", the result is an error object.

You cannot access the Promise properties state and result.

You must use a Promise method to handle promises.

Promise How To

Here is how to use a Promise:

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() takes two arguments, a callback for success and another for failure.

Both are optional, so you can add a callback for success or failure only.

Example

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);}
);

Try it Yourself »

JavaScript Promise Examples

To demonstrate the use of promises, we will use the callback examples from the previous chapter:

• Waiting for a Timeout
• Waiting for a File

Waiting for a Timeout

Example Using Callback

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Try it Yourself »

Example Using Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Try it Yourself »

Waiting for a file

Example using 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);

Try it Yourself »

Example using Promise

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);}
);

Try it Yourself »

Browser Support

ECMAScript 2015, also known as ES6, introduced the JavaScript Promise object.

The following table defines the first browser version with full support for Promise objects:

Chrome 33Edge 12Firefox 29Safari 7.1Opera 20Feb, 2014Jul, 2015Apr, 2014Sep, 2014Mar, 2014

Di pembahasan tentang Javascript kali ini kita akan membahas tentang Promise. Oh iya untuk kalian yang belum tahu tentang Javascript, kalian bisa membuka Apa Itu Javascript.

Ada yang udah pernah dengar tentang Promise? Tentu saja sebagian dari kalian sudah mengetahui apa itu Promise. Bagi kalian yang sudah mengetahui tentang Promise anggap saja untuk mereview ulang hehe. Untuk teman-teman yang belum mengetahui tentang Promise yuk langsung bahas saja.

Apa Itu Promise?

Secara sederhana Promise merupakan sebuah janji. Logika cara kerja Promise sama seperti selayaknya kamu membuat janji dengan seseorang. Contohnya kamu membuat janji dengan temanmu untuk belajar bersama. Terdapat beberapa kemungkinan yang terjadi kepada janji yang kamu buat dengan temanmu tadi yaitu kamu belum memenuhi janjimu, kamu sudah memenuhi janjimu, atau kamu tidak memenuhi janji bekerja kelompokmu.

Layaknya kamu membuat janji, terdapat tiga kemungkinan state yang dapat terjadi di dalam Promise, antara lain:

• Pending : Dalam keadaan awal, tidak terpenuhi atau tidak ditolak
• Fulfilled : Artinya terpenuhi atau sukses
• Rejected : Artinya tidak terpenuhi atau gagal

Bagaimana Cara Menggunakan Promise?

Sekarang kita akan masuk ke bagaimana cara menggunakan Promise sendiri. Pertama kita akan memanggil contructor dari Promise dan memberikan parameter resolve dan reject seperti kode dibawah

let p = new Promise((resolve, reject) => {
    // Isi dari promise yang akan dibuat
});

Resolve menyatakan bahwa Promise telah dijalankan dengan sukses dan mengembalikan sebuah nilai, sedangkan Reject menyatakan bahwa Promise ditolak dengan alasan yang telah diberikan. Lalu kita akan memasukan bentuk Promise apa yang ingin kita masukan kedalamnya

setTimeout(() => {
        if (janji === "bernyanyi") {
            resolve("Penonton senang")
        }  else {
            reject("Anda tidak bernyanyi")
        }
    }, 2000)

Sekarang kita akan menggunakan method then dan catch untuk mengetest Promise yang telah kita buat. Fungsi dari then dan catch ini sendiri ialah then akan menghandle hasil eksekusi baik itu berhasil maupun gagal, sedangkan catch akan menghandle bila terdapat error pada kode.

p.then((result) => {
    alert(result)
}).catch((error) => {
    alert(error)
})

Berikut merupakan bentuk full dari kode diatas

let janji = "bernyanyi"

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (janji === "bernyanyi") {
            resolve("Penonton senang")
        }  else {
            reject("Anda tidak bernyanyi")
        }
    }, 2000)
})

p.then((result) => {
    alert(result)
}).catch((error) => {
    alert(error)
})

Berikut merupakan contoh lain dari penggunaan Promise.

new Promise(function(resolve, reject) {
    setTimeout(() => resolve("Beli bakso"), 1000); 
})
.then(function(result) {
    alert(result);
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Makan bakso"), 1000);
    });
})
.then(function(result) {
alert(result);
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve("Membayar bakso"), 1000);
    });
})
.then(function(result) {
    alert(result);
});

Baiklah sekian pembahasan singkat tentang Javascript Promise, Semoga dapat bermanfaat bagi pembaca semuanya. Jika kalian tertarik untuk belajar lebih dalam tentang Promise kalian dapat membuka link ini. Jika terdapat salah kata atau maksud dalam pembahasan penulis mohon maaf dan sampai jumpa di pembahasan Javascript selanjutnya.

Apa Itu Promise di javascript?

Apa itu async Await Javascript?