bepitulaz

var promiseOne = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('promise 1 sukses');    
  }, 2000);
});

var promiseTwo = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('promise 2 sukses');
  }, 3000);

bepitulaz

var promiseOne = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('promise 1 sukses');    
  }, 2000);
});

var promiseTwo = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('promise 2 sukses');
  }, 3000);

bepitulaz

var samplePromise = new Promise(function(resolve, reject) {
  // setTimeout untuk mensimulasikan async function
  setTimeout(function() {
    // Dapat diisi apapun. Yang paling umum menggunakan object Error
    reject(Error('Sengaja dibuat salah.'));
  }, 5);
});

samplePromise.then(function(data) {
  console.log(data); // tidak terpanggil

bepitulaz

var samplePromise = new Promise(function(resolve, reject) {
  // setTimeout untuk mensimulasikan async function
  setTimeout(function() {
    resolve(5);
  }, 5);
});

samplePromise.then(function(data) {
  console.log(data); // isinya 5
  return data * 2;

bepitulaz

/**
  Buat object dari Promise-nya.
*/
var janjiBunga = new Promise(function(resolve, reject) {
  var http = new XMLHttpRequest();
  var url = '/bunga';
  var params = 'jumlah=1000000';
  
  http.open('POST', url, true);
  http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

bepitulaz

/**
  MASALAH:
  Anggap kita punya 3 asynchronous function yang harus dijalankan berurutan.
  Jadilah callback hell seperti di bawah ini.
  Apalagi jika kita harus menjalankan operasi tertentu di antara
  callback-callback tersebut yang membuat kode menjadi panjang, dan tentunya
  makin sulit dibaca.
*/
jQuery.get('http://example.com/data.json', function(response) {
  // lakukan sesuatu dengan `response` dari operasi 1

bepitulaz

/**
  Misalnya kita memiliki fungsi yang baru dapat dijalankan setelah ada nilai dari jQuery.get(),
  jangan gunakan global variable seperti sebelumnya. Buatlah sebuah fungsi baru di luar asynchronous function
  yang dapat dipanggil setelah jQuery.get() selesai.
*/

jQuery.get('http://example.com/data.json', function(data) {
  doSomething(data); // lempar data dari server ke dalam sebuah fungsi
});

bepitulaz

/**
  Pemrogram berusaha menyimpan nilai dari callback ke dalam variabel
  yang berada di luar scope callback.
*/
var iniVariabelGlobal;

jQuery.get('http://example.com/data.json', function(data) {
  iniVariabelGlobal = data; // pemrogram berusaha menyimpan data ke dalam global variable
});

bepitulaz

/**
  Di bawah ini adalah penjelasan bagaimana asynchronous bekerja.
  Saya ambil contoh jQuery.get() dan sebuah operasi penjumlahan sederhana.
  Ini adalah function dari pustaka jQuery untuk melakukan pemanggilan data menggunakan ajax.
*/

// Program akan mengeksekusi baris 8
jQuery.get('http://example.com/data.json', iniCallback);

// Baris ke 14 sampai ke 15 baru akan tereksekusi hanya saat jQuery.get()

bepitulaz

// fungsi yang tidak membutuhkan callback
function sum(a, b) {
  return a + b;
}

// isi dari variabel result adalah 6
var result = sum(1, 5);

/**
  Di bawah ini adalah contoh function yang membutuhkan callback.