Modern Web Guidance kini stabil. Upgrade agen coding Anda dengan praktik terbaik pengembangan web yang telah diperiksa oleh pakar. Baca pengumumannya.

Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Promise JavaScript: Pengantar

Promise menyederhanakan komputasi yang ditangguhkan dan asinkron. Promise mewakili operasi yang belum selesai.

Jake Archibald

Developer, bersiaplah untuk momen penting dalam sejarah pengembangan web.

[Drumroll begins]

Promise telah hadir di JavaScript.

[Kembang api meledak, kertas berkilauan berjatuhan dari atas, penonton bersorak gembira]

Pada tahap ini, Anda termasuk dalam salah satu kategori berikut:

Orang-orang di sekitar Anda bersorak, tetapi Anda tidak yakin apa yang membuat mereka begitu heboh. Mungkin Anda bahkan tidak yakin apa itu "janji". Anda mengangkat bahu, tetapi berat kertas berkilau membebani bahu Anda. Jika ya, jangan khawatir, saya butuh waktu lama untuk memahami mengapa saya harus peduli dengan hal ini. Anda mungkin ingin memulai dari awal.
Anda meninju udara. Sudah waktunya, bukan? Anda pernah menggunakan Promise ini sebelumnya, tetapi Anda merasa terganggu karena semua implementasi memiliki API yang sedikit berbeda. Apa API untuk versi JavaScript resmi? Anda mungkin ingin memulai dengan terminologi.
Anda sudah tahu tentang hal ini dan Anda mencemooh orang-orang yang melompat-lompat kegirangan seolah-olah ini adalah berita baru bagi mereka. Luangkan waktu sejenak untuk menikmati keunggulan Anda, lalu langsung buka referensi API.

Dukungan browser dan polyfill

Browser Support

Source

Untuk membuat browser yang tidak memiliki implementasi promise lengkap sesuai dengan kepatuhan spesifikasi, atau menambahkan promise ke browser lain dan Node.js, lihat polyfill (2k gzipped).

What's all the fuss about?

JavaScript adalah thread tunggal, yang berarti dua bit skrip tidak dapat berjalan secara bersamaan; keduanya harus berjalan satu demi satu. Di browser, JavaScript berbagi thread dengan banyak hal lain yang berbeda dari satu browser ke browser lainnya. Namun, biasanya JavaScript berada dalam antrean yang sama dengan rendering, memperbarui gaya, dan menangani tindakan pengguna (seperti menandai teks dan berinteraksi dengan kontrol formulir). Aktivitas di salah satu hal ini akan menunda hal lainnya.

Sebagai manusia, Anda memiliki banyak thread. Anda dapat mengetik dengan beberapa jari, Anda dapat mengemudi dan melakukan percakapan secara bersamaan. Satu-satunya fungsi pemblokiran yang harus kita tangani adalah bersin, yang mengharuskan semua aktivitas saat ini ditangguhkan selama durasi bersin. Hal ini cukup mengganggu, terutama saat Anda mengemudi dan mencoba melakukan percakapan. Anda tidak ingin menulis kode yang bersin.

Anda mungkin telah menggunakan peristiwa dan callback untuk mengatasi hal ini. Berikut acara Anda:

var img1 = document.querySelector('.img-1');

img1.addEventListener('load', function() {
  // woo yey image loaded
});

img1.addEventListener('error', function() {
  // argh everything's broken
});

Ini sama sekali tidak membuat bersin. Kita mendapatkan gambar, menambahkan beberapa pemroses, lalu JavaScript dapat berhenti dieksekusi hingga salah satu pemroses tersebut dipanggil.

Sayangnya, dalam contoh di atas, peristiwa mungkin terjadi sebelum kita mulai memprosesnya, jadi kita perlu mengatasinya menggunakan properti "complete" gambar:

var img1 = document.querySelector('.img-1');

function loaded() {
  // woo yey image loaded
}

if (img1.complete) {
  loaded();
}
else {
  img1.addEventListener('load', loaded);
}

img1.addEventListener('error', function() {
  // argh everything's broken
});

Tindakan ini tidak menangkap gambar yang mengalami error sebelum kita sempat memprosesnya; sayangnya, DOM tidak memberi kita cara untuk melakukannya. Selain itu, ini memuat satu gambar. Hal ini menjadi lebih kompleks jika kita ingin mengetahui kapan sekumpulan gambar telah dimuat.

Peristiwa tidak selalu menjadi cara terbaik

Peristiwa sangat cocok untuk hal-hal yang dapat terjadi beberapa kali pada objek yang sama—keyup, touchstart, dll. Dengan peristiwa tersebut, Anda tidak terlalu peduli dengan apa yang terjadi sebelum Anda memasang pemroses. Namun, terkait keberhasilan/kegagalan asinkron, idealnya Anda menginginkan sesuatu seperti ini:

img1.callThisIfLoadedOrWhenLoaded(function() {
  // loaded
}).orIfFailedCallThis(function() {
  // failed
});

// and…
whenAllTheseHaveLoaded([img1, img2]).callThis(function() {
  // all loaded
}).orIfSomeFailedCallThis(function() {
  // one or more failed
});

Inilah yang dilakukan promise, tetapi dengan penamaan yang lebih baik. Jika elemen gambar HTML memiliki metode "ready" yang menampilkan promise, kita dapat melakukan ini:

img1.ready()
.then(function() {
  // loaded
}, function() {
  // failed
});

// and…
Promise.all([img1.ready(), img2.ready()])
.then(function() {
  // all loaded
}, function() {
  // one or more failed
});

Pada dasarnya, promise mirip dengan pemroses peristiwa, kecuali:

Promise hanya dapat berhasil atau gagal satu kali. Tugas tidak dapat berhasil atau gagal dua kali, dan tidak dapat beralih dari berhasil ke gagal atau sebaliknya.
Jika promise berhasil atau gagal dan Anda kemudian menambahkan callback keberhasilan/kegagalan, callback yang benar akan dipanggil, meskipun peristiwa terjadi lebih awal.

Hal ini sangat berguna untuk keberhasilan/kegagalan asinkron, karena Anda tidak terlalu tertarik dengan waktu pasti sesuatu tersedia, dan lebih tertarik untuk bereaksi terhadap hasilnya.

Terminologi Promise

Domenic Denicola mengoreksi draf pertama artikel ini dan memberi saya nilai "F" untuk terminologi. Dia menghukum saya, memaksa saya menyalin States and Fates 100 kali, dan menulis surat yang mengkhawatirkan kepada orang tua saya. Meskipun demikian, saya masih sering bingung dengan banyak terminologi, tetapi berikut adalah dasar-dasarnya:

Janji dapat berupa:

fulfilled - Tindakan yang terkait dengan promise berhasil
rejected - Tindakan yang terkait dengan promise gagal
menunggu keputusan - Belum dipenuhi atau ditolak
settled - Telah terpenuhi atau ditolak

Spesifikasi juga menggunakan istilah thenable untuk mendeskripsikan objek yang mirip promise, karena memiliki metode then. Istilah ini mengingatkan saya pada mantan Manajer Sepak Bola Inggris, Terry Venables, jadi saya akan menggunakannya sesedikit mungkin.

Promise hadir di JavaScript.

Promise telah ada selama beberapa waktu dalam bentuk library, seperti:

Promise di atas dan JavaScript memiliki perilaku umum yang terstandardisasi, yang disebut Promises/A+. Jika Anda adalah pengguna jQuery, mereka memiliki sesuatu yang serupa, yang disebut Deferreds. Namun, Deferred tidak mematuhi Promise/A+, sehingga membuatnya sedikit berbeda dan kurang berguna, jadi berhati-hatilah. jQuery juga memiliki jenis Promise, tetapi ini hanyalah subset dari Deferred dan memiliki masalah yang sama.

Meskipun implementasi promise mengikuti perilaku standar, API keseluruhannya berbeda. Promise JavaScript mirip dengan API RSVP.js. Berikut cara membuat promise:

var promise = new Promise(function(resolve, reject) {
  // do a thing, possibly async, then…

  if (/* everything turned out fine */) {
    resolve("Stuff worked!");
  }
  else {
    reject(Error("It broke"));
  }
});

Konstruktor promise menggunakan satu argumen, callback dengan dua parameter, resolve dan reject. Lakukan sesuatu dalam callback, mungkin asinkron, lalu panggil resolve jika semuanya berhasil, atau panggil reject.

Seperti throw dalam JavaScript biasa, penolakan dengan objek Error adalah hal yang biasa, tetapi tidak wajib. Manfaat objek Error adalah objek tersebut menangkap pelacakan tumpukan, sehingga alat proses debug menjadi lebih bermanfaat.

Berikut cara menggunakan promise tersebut:

promise.then(function(result) {
  console.log(result); // "Stuff worked!"
}, function(err) {
  console.log(err); // Error: "It broke"
});

then() menggunakan dua argumen, callback untuk kasus berhasil, dan callback lainnya untuk kasus gagal. Keduanya bersifat opsional, sehingga Anda dapat menambahkan callback hanya untuk kasus berhasil atau gagal.

Promise JavaScript dimulai di DOM sebagai "Future", diganti namanya menjadi "Promise", dan akhirnya dipindahkan ke JavaScript. Menyimpannya di JavaScript, bukan di DOM, sangat bagus karena akan tersedia dalam konteks JS non-browser seperti Node.js (apakah mereka menggunakannya di API inti mereka adalah pertanyaan lain).

Meskipun merupakan fitur JavaScript, DOM tidak ragu untuk menggunakannya. Bahkan, semua DOM API baru dengan metode keberhasilan/kegagalan asinkron akan menggunakan promise. Hal ini sudah terjadi dengan Pengelolaan Kuota, Peristiwa Pemuatan Font, ServiceWorker, Web MIDI, Streaming, dan lainnya.

Kompatibilitas dengan library lain

API promise JavaScript akan memperlakukan apa pun dengan metode then() sebagai mirip promise (atau thenable dalam bahasa promise sigh), jadi jika Anda menggunakan library yang menampilkan promise Q, tidak masalah, library tersebut akan berfungsi dengan baik dengan promise JavaScript baru.

Meskipun, seperti yang saya sebutkan, Deferred jQuery agak … tidak membantu. Untungnya, Anda dapat mentransmisikannya ke promise standar, yang sebaiknya dilakukan sesegera mungkin:

var jsPromise = Promise.resolve($.ajax('/whatever.json'))

Di sini, $.ajax jQuery menampilkan Deferred. Karena memiliki metode then(), Promise.resolve() dapat mengubahnya menjadi promise JavaScript. Namun, terkadang deferred meneruskan beberapa argumen ke callback-nya, misalnya:

var jqDeferred = $.ajax('/whatever.json');

jqDeferred.then(function(response, statusText, xhrObj) {
  // ...
}, function(xhrObj, textStatus, err) {
  // ...
})

Sedangkan promise JS mengabaikan semua kecuali yang pertama:

jsPromise.then(function(response) {
  // ...
}, function(xhrObj) {
  // ...
})

Untungnya, ini biasanya yang Anda inginkan, atau setidaknya memberi Anda akses ke apa yang Anda inginkan. Selain itu, perhatikan bahwa jQuery tidak mengikuti konvensi penerusan objek Error ke penolakan.

Memudahkan kode asinkron yang kompleks

Baik, mari kita buat kode untuk beberapa hal. Misalnya, kita ingin:

Memulai indikator lingkaran berputar untuk menunjukkan pemuatan
Mengambil beberapa JSON untuk cerita, yang memberi kita judul, dan URL untuk setiap bab
Menambahkan judul ke halaman
Mengambil setiap bab
Menambahkan cerita ke halaman
Menghentikan indikator lingkaran berputar

… tetapi juga memberi tahu pengguna jika terjadi error selama prosesnya. Kita juga ingin menghentikan indikator lingkaran berputar pada saat itu, jika tidak, indikator tersebut akan terus berputar, menjadi pusing, dan bertabrakan dengan UI lain.

Tentu saja, Anda tidak akan menggunakan JavaScript untuk menampilkan artikel, menayangkan sebagai HTML lebih cepat, tetapi pola ini cukup umum saat menangani API: Beberapa pengambilan data, lalu lakukan sesuatu setelah semuanya selesai.

Untuk memulai, mari kita bahas pengambilan data dari jaringan:

Mengubah XMLHttpRequest menjadi Promise

API lama akan diupdate untuk menggunakan promise, jika memungkinkan dengan cara yang kompatibel dengan versi lama. XMLHttpRequest adalah kandidat utama, tetapi sementara itu, mari kita tulis fungsi sederhana untuk membuat permintaan GET:

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open('GET', url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

Sekarang mari kita gunakan:

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
})

Sekarang kita dapat membuat permintaan HTTP tanpa mengetik XMLHttpRequest secara manual, yang sangat bagus, karena semakin sedikit saya harus melihat camel-case XMLHttpRequest yang menjengkelkan, semakin bahagia hidup saya.

Perantaian

then() bukanlah akhir dari cerita, Anda dapat merangkai then bersama-sama untuk mengubah nilai atau menjalankan tindakan asinkron tambahan satu per satu.

Mentransformasi nilai

Anda dapat mengubah nilai hanya dengan menampilkan nilai baru:

var promise = new Promise(function(resolve, reject) {
  resolve(1);
});

promise.then(function(val) {
  console.log(val); // 1
  return val + 2;
}).then(function(val) {
  console.log(val); // 3
})

Sebagai contoh praktis, mari kita kembali ke:

get('story.json').then(function(response) {
  console.log("Success!", response);
})

Responsnya adalah JSON, tetapi saat ini kami menerimanya sebagai teks biasa. Kita dapat mengubah fungsi get untuk menggunakan JSON responseType, tetapi kita juga dapat menyelesaikannya di promise:

get('story.json').then(function(response) {
  return JSON.parse(response);
}).then(function(response) {
  console.log("Yey JSON!", response);
})

Karena JSON.parse() menggunakan satu argumen dan menampilkan nilai yang diubah, kita dapat membuat pintasan:

get('story.json').then(JSON.parse).then(function(response) {
  console.log("Yey JSON!", response);
})

Bahkan, kita dapat membuat fungsi getJSON() dengan sangat mudah:

function getJSON(url) {
  return get(url).then(JSON.parse);
}

getJSON() masih menampilkan promise, yang mengambil URL, lalu mengurai respons sebagai JSON.

Mengantrekan tindakan asinkron

Anda juga dapat merangkai then untuk menjalankan tindakan asinkron secara berurutan.

Saat Anda menampilkan sesuatu dari callback then(), hal ini akan terasa seperti keajaiban. Jika Anda menampilkan nilai, then() berikutnya akan dipanggil dengan nilai tersebut. Namun, jika Anda menampilkan sesuatu yang mirip dengan promise, then() berikutnya akan menunggu, dan hanya dipanggil saat promise tersebut diselesaikan (berhasil/gagal). Contoh:

getJSON('story.json').then(function(story) {
  return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
  console.log("Got chapter 1!", chapter1);
})

Di sini, kita membuat permintaan asinkron ke story.json, yang memberi kita sekumpulan URL untuk diminta, lalu kita meminta URL pertama. Di sinilah promise benar-benar mulai terlihat berbeda dari pola callback sederhana.

Anda bahkan dapat membuat metode pintasan untuk mendapatkan bab:

var storyPromise;

function getChapter(i) {
  storyPromise = storyPromise || getJSON('story.json');

  return storyPromise.then(function(story) {
    return getJSON(story.chapterUrls[i]);
  })
}

// and using it is simple:
getChapter(0).then(function(chapter) {
  console.log(chapter);
  return getChapter(1);
}).then(function(chapter) {
  console.log(chapter);
})

Kita tidak mendownload story.json hingga getChapter dipanggil, tetapi saat berikutnya getChapter dipanggil, kita menggunakan kembali promise story, sehingga story.json hanya diambil sekali. Hore, Promise!

Penanganan error

Seperti yang kita lihat sebelumnya, then() menggunakan dua argumen, satu untuk keberhasilan, satu untuk kegagalan (atau penuhi dan tolak, dalam istilah promise):

get('story.json').then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.log("Failed!", error);
})

Anda juga dapat menggunakan catch():

get('story.json').then(function(response) {
  console.log("Success!", response);
}).catch(function(error) {
  console.log("Failed!", error);
})

Tidak ada yang spesial dengan catch(), ini hanyalah sugar untuk then(undefined, func), tetapi lebih mudah dibaca. Perhatikan bahwa kedua contoh kode di atas tidak berperilaku sama, contoh yang kedua setara dengan:

get('story.json').then(function(response) {
  console.log("Success!", response);
}).then(undefined, function(error) {
  console.log("Failed!", error);
})

Perbedaannya kecil, tetapi sangat berguna. Penolakan promise akan melompat ke then() berikutnya dengan callback penolakan (atau catch(), karena setara). Dengan then(func1, func2), func1 atau func2 akan dipanggil, tidak pernah keduanya. Namun, dengan then(func1).catch(func2), keduanya akan dipanggil jika func1 menolak, karena keduanya merupakan langkah terpisah dalam rantai. Lakukan hal berikut:

asyncThing1().then(function() {
  return asyncThing2();
}).then(function() {
  return asyncThing3();
}).catch(function(err) {
  return asyncRecovery1();
}).then(function() {
  return asyncThing4();
}, function(err) {
  return asyncRecovery2();
}).catch(function(err) {
  console.log("Don't worry about it");
}).then(function() {
  console.log("All done!");
})

Alur di atas sangat mirip dengan try/catch JavaScript normal, error yang terjadi dalam "try" akan langsung masuk ke blok catch(). Berikut adalah diagram alir untuk penjelasan di atas (karena saya menyukai diagram alir):

Ikuti garis biru untuk promise yang terpenuhi, atau garis merah untuk promise yang ditolak.

Pengecualian dan promise JavaScript

Penolakan terjadi saat promise ditolak secara eksplisit, tetapi juga secara implisit jika terjadi error dalam callback konstruktor:

var jsonPromise = new Promise(function(resolve, reject) {
  // JSON.parse throws an error if you feed it some
  // invalid JSON, so this implicitly rejects:
  resolve(JSON.parse("This ain't JSON"));
});

jsonPromise.then(function(data) {
  // This never happens:
  console.log("It worked!", data);
}).catch(function(err) {
  // Instead, this happens:
  console.log("It failed!", err);
})

Artinya, sebaiknya lakukan semua pekerjaan terkait promise di dalam callback konstruktor promise, sehingga error akan otomatis ditangkap dan menjadi penolakan.

Hal yang sama berlaku untuk error yang ditampilkan dalam callback then().

get('/').then(JSON.parse).then(function() {
  // This never happens, '/' is an HTML page, not JSON
  // so JSON.parse throws
  console.log("It worked!", data);
}).catch(function(err) {
  // Instead, this happens:
  console.log("It failed!", err);
})

Penanganan error dalam praktik

Dengan cerita dan bab kita, kita dapat menggunakan catch untuk menampilkan error kepada pengguna:

getJSON('story.json').then(function(story) {
  return getJSON(story.chapterUrls[0]);
}).then(function(chapter1) {
  addHtmlToPage(chapter1.html);
}).catch(function() {
  addTextToPage("Failed to show chapter");
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
})

Jika pengambilan story.chapterUrls[0] gagal (misalnya, http 500 atau pengguna offline), semua callback keberhasilan berikutnya akan dilewati, termasuk callback di getJSON() yang mencoba mengurai respons sebagai JSON, dan juga melewati callback yang menambahkan chapter1.html ke halaman. Sebagai gantinya, kode akan beralih ke callback catch. Akibatnya, "Failed to show chapter" akan ditambahkan ke halaman jika tindakan sebelumnya gagal.

Seperti try/catch JavaScript, error akan ditangkap dan kode berikutnya akan dilanjutkan, sehingga indikator lingkaran berputar selalu disembunyikan, sesuai keinginan kita. Kode di atas menjadi versi asinkron non-pemblokiran dari:

try {
  var story = getJSONSync('story.json');
  var chapter1 = getJSONSync(story.chapterUrls[0]);
  addHtmlToPage(chapter1.html);
}
catch (e) {
  addTextToPage("Failed to show chapter");
}
document.querySelector('.spinner').style.display = 'none'

Anda mungkin ingin catch() hanya untuk tujuan logging, tanpa memulihkan dari error. Untuk melakukannya, cukup tampilkan kembali error. Kita dapat melakukannya dalam metode getJSON():

function getJSON(url) {
  return get(url).then(JSON.parse).catch(function(err) {
    console.log("getJSON failed for", url, err);
    throw err;
  });
}

Jadi, kita berhasil mengambil satu bab, tetapi kita ingin mengambil semuanya. Mari kita wujudkan.

Paralelisme dan pengurutan: Mendapatkan yang terbaik dari keduanya

Berpikir asinkron tidaklah mudah. Jika Anda kesulitan memulai, coba tulis kode seolah-olah kode tersebut sinkron. Dalam hal ini:

try {
  var story = getJSONSync('story.json');
  addHtmlToPage(story.heading);

  story.chapterUrls.forEach(function(chapterUrl) {
    var chapter = getJSONSync(chapterUrl);
    addHtmlToPage(chapter.html);
  });

  addTextToPage("All done");
}
catch (err) {
  addTextToPage("Argh, broken: " + err.message);
}

document.querySelector('.spinner').style.display = 'none'

Boleh juga. Namun, skrip ini bersifat sinkron dan mengunci browser saat konten didownload. Agar ini berfungsi secara asinkron, kita menggunakan then() untuk membuat berbagai hal terjadi satu per satu.

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);

  // TODO: for each url in story.chapterUrls, fetch &amp; display
}).then(function() {
  // And we're all done!
  addTextToPage("All done");
}).catch(function(err) {
  // Catch any error that happened along the way
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  // Always hide the spinner
  document.querySelector('.spinner').style.display = 'none';
})

Namun, bagaimana cara melakukan loop pada URL bab dan mengambilnya secara berurutan? Hal ini tidak akan berfungsi:

story.chapterUrls.forEach(function(chapterUrl) {
  // Fetch chapter
  getJSON(chapterUrl).then(function(chapter) {
    // and add it to the page
    addHtmlToPage(chapter.html);
  });
})

forEach tidak mendukung asinkron, jadi bab kita akan muncul dalam urutan apa pun yang didownload, yang pada dasarnya adalah cara penulisan Pulp Fiction. Ini bukan Pulp Fiction, jadi mari kita perbaiki.

Membuat urutan

Kita ingin mengubah array chapterUrls menjadi urutan promise. Kita dapat melakukannya menggunakan then():

// Start off with a promise that always resolves
var sequence = Promise.resolve();

// Loop through our chapter urls
story.chapterUrls.forEach(function(chapterUrl) {
  // Add these actions to the end of the sequence
  sequence = sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter.html);
  });
})

Ini adalah pertama kalinya kita melihat Promise.resolve(), yang membuat promise yang di-resolve ke nilai apa pun yang Anda berikan. Jika Anda meneruskan instance Promise, instance tersebut akan ditampilkan (catatan: ini adalah perubahan pada spesifikasi yang belum diikuti oleh beberapa implementasi). Jika Anda meneruskan sesuatu yang mirip promise (memiliki metode then()), metode ini akan membuat Promise asli yang memenuhi/menolak dengan cara yang sama. Jika Anda meneruskan nilai lain, misalnya, Promise.resolve('Hello'), promise akan dibuat dan terpenuhi dengan nilai tersebut. Jika Anda memanggilnya tanpa nilai, seperti di atas, fungsi ini akan terpenuhi dengan "undefined".

Ada juga Promise.reject(val), yang membuat promise yang menolak dengan nilai yang Anda berikan (atau tidak ditentukan).

Kita dapat merapikan kode di atas menggunakan array.reduce:

// Loop through our chapter urls
story.chapterUrls.reduce(function(sequence, chapterUrl) {
  // Add these actions to the end of the sequence
  return sequence.then(function() {
    return getJSON(chapterUrl);
  }).then(function(chapter) {
    addHtmlToPage(chapter.html);
  });
}, Promise.resolve())

Fungsi ini melakukan hal yang sama seperti contoh sebelumnya, tetapi tidak memerlukan variabel "sequence" terpisah. Callback reduce dipanggil untuk setiap item dalam array. "sequence" adalah Promise.resolve() pada kali pertama, tetapi untuk panggilan lainnya, "sequence" adalah apa pun yang kita tampilkan dari panggilan sebelumnya. array.reduce sangat berguna untuk meringkas array menjadi satu nilai, yang dalam hal ini adalah promise.

Mari kita gabungkan semuanya:

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);

  return story.chapterUrls.reduce(function(sequence, chapterUrl) {
    // Once the last chapter's promise is done…
    return sequence.then(function() {
      // …fetch the next chapter
      return getJSON(chapterUrl);
    }).then(function(chapter) {
      // and add it to the page
      addHtmlToPage(chapter.html);
    });
  }, Promise.resolve());
}).then(function() {
  // And we're all done!
  addTextToPage("All done");
}).catch(function(err) {
  // Catch any error that happened along the way
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  // Always hide the spinner
  document.querySelector('.spinner').style.display = 'none';
})

Dan inilah hasilnya, versi asinkron sepenuhnya dari versi sinkron. Namun, kita bisa melakukan yang lebih baik. Saat ini, halaman kita didownload seperti ini:

Browser cukup baik dalam mendownload beberapa hal sekaligus, jadi kita kehilangan performa dengan mendownload bab satu per satu. Yang ingin kita lakukan adalah mendownload semuanya secara bersamaan, lalu memprosesnya setelah semuanya tiba. Untungnya, ada API untuk hal ini:

Promise.all(arrayOfPromises).then(function(arrayOfResults) {
  //...
})

Promise.all mengambil array promise dan membuat promise yang terpenuhi saat semuanya berhasil diselesaikan. Anda akan mendapatkan array hasil (apa pun yang dipenuhi promise) dalam urutan yang sama dengan promise yang Anda teruskan.

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);

  // Take an array of promises and wait on them all
  return Promise.all(
    // Map our array of chapter urls to
    // an array of chapter json promises
    story.chapterUrls.map(getJSON)
  );
}).then(function(chapters) {
  // Now we have the chapters jsons in order! Loop through…
  chapters.forEach(function(chapter) {
    // …and add to the page
    addHtmlToPage(chapter.html);
  });
  addTextToPage("All done");
}).catch(function(err) {
  // catch any error that happened so far
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
})

Bergantung pada koneksi, cara ini bisa lebih cepat beberapa detik daripada memuat satu per satu, dan kodenya lebih sedikit daripada percobaan pertama kita. Bab dapat didownload dalam urutan apa pun, tetapi akan muncul di layar dalam urutan yang benar.

Namun, kita masih dapat meningkatkan performa yang dirasakan. Saat bab satu tiba, kita harus menambahkannya ke halaman. Hal ini memungkinkan pengguna mulai membaca sebelum bab lainnya tiba. Saat bab tiga tiba, kita tidak akan menambahkannya ke halaman karena pengguna mungkin tidak menyadari bahwa bab dua tidak ada. Saat bab dua tiba, kita dapat menambahkan bab dua dan tiga, dan seterusnya.

Untuk melakukannya, kita mengambil JSON untuk semua bab secara bersamaan, lalu membuat urutan untuk menambahkannya ke dokumen:

getJSON('story.json')
.then(function(story) {
  addHtmlToPage(story.heading);

  // Map our array of chapter urls to
  // an array of chapter json promises.
  // This makes sure they all download in parallel.
  return story.chapterUrls.map(getJSON)
    .reduce(function(sequence, chapterPromise) {
      // Use reduce to chain the promises together,
      // adding content to the page for each chapter
      return sequence
      .then(function() {
        // Wait for everything in the sequence so far,
        // then wait for this chapter to arrive.
        return chapterPromise;
      }).then(function(chapter) {
        addHtmlToPage(chapter.html);
      });
    }, Promise.resolve());
}).then(function() {
  addTextToPage("All done");
}).catch(function(err) {
  // catch any error that happened along the way
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
})

Selesai, yang terbaik dari keduanya. Diperlukan waktu yang sama untuk mengirimkan semua konten, tetapi pengguna mendapatkan konten pertama lebih cepat.

Dalam contoh sederhana ini, semua bab tiba pada waktu yang hampir bersamaan, tetapi manfaat menampilkan satu per satu akan lebih terlihat dengan bab yang lebih banyak dan lebih besar.

Melakukan hal di atas dengan callback atau peristiwa bergaya Node.js akan menghasilkan kode sekitar dua kali lipat, tetapi yang lebih penting, tidak semudah itu untuk diikuti. Namun, ini bukan akhir dari cerita untuk promise, jika digabungkan dengan fitur ES6 lainnya, promise akan menjadi lebih mudah.

Babak bonus: Kemampuan yang diperluas

Sejak saya pertama kali menulis artikel ini, kemampuan untuk menggunakan Promise telah berkembang pesat. Sejak Chrome 55, fungsi asinkron memungkinkan kode berbasis promise ditulis seolah-olah sinkron, tetapi tanpa memblokir thread utama. Anda dapat membaca selengkapnya tentang hal itu di artikel fungsi asinkron saya. Ada dukungan luas untuk Promise dan fungsi asinkron di browser utama. Anda dapat menemukan detailnya di referensi Promise dan fungsi asinkron MDN.

Terima kasih banyak kepada Anne van Kesteren, Domenic Denicola, Tom Ashworth, Remy Sharp, Addy Osmani, Arthur Evans, dan Yutaka Hirano yang telah mengoreksi dan membuat koreksi/rekomendasi.

Selain itu, terima kasih kepada Mathias Bynens karena telah memperbarui berbagai bagian artikel.

Promise JavaScript: Pengantar Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.