Promise JavaScript: pengantar

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

Archibald Jake
Jake Archibald

Para developer, bersiaplah untuk momen penting dalam sejarah pengembangan web.

[Drumroll dimulai]

Promise telah tiba di JavaScript.

[Kembang api meledak, kertas berkilauan mulai turun dari atas, kerumunan orang menjadi ramai]

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

  • Orang-orang bersorak di sekitar Anda, tetapi Anda tidak yakin apa keributan ini. Anda bahkan mungkin tidak yakin apa itu "janji". Anda akan mengangkat bahu, namun berat kertas berkilau membebani bahu Anda. Jika demikian, jangan khawatir, perlu waktu lama untuk mencari tahu mengapa saya harus memedulikan hal ini. Anda mungkin ingin memulai dari awal.
  • Anda mengangkat tinju! Sudah waktunya, kan? Anda sudah 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 perlu memulai dengan terminologi.
  • Anda sudah tahu tentang hal ini dan Anda mengejek orang-orang yang melompat-lompat seperti berita ini. Luangkan waktu sejenak untuk melihat superioritas Anda, lalu langsung buka referensi API.

Dukungan browser dan polyfill

Dukungan Browser

  • 32
  • 12
  • 29
  • 8

Sumber

Untuk meningkatkan kepatuhan browser yang tidak memiliki implementasi promise lengkap terhadap kepatuhan spesifikasi, atau menambahkan promise ke browser lain dan Node.js, lihat polyfill (file gzip 2k).

Ada apa sebenarnya?

JavaScript merupakan thread tunggal, yang berarti dua bit skrip tidak dapat dijalankan bersamaan; keduanya harus dijalankan satu per 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 menggambar, memperbarui gaya, dan menangani tindakan pengguna (seperti menandai teks dan berinteraksi dengan kontrol formulir). Aktivitas pada salah satu tindakan ini akan menunda aktivitas lainnya.

Sebagai manusia, Anda dapat melakukan multi-thread. Anda dapat mengetik dengan beberapa jari, mengemudi, dan melakukan percakapan sekaligus. Satu-satunya fungsi pemblokiran yang harus kita tangani adalah bersin, karena semua aktivitas saat ini harus ditangguhkan selama bersin. Itu cukup menjengkelkan, terutama ketika Anda mengemudi dan mencoba melakukan percakapan. Anda tidak ingin menulis kode yang membuat Anda bersin.

Anda mungkin pernah menggunakan peristiwa dan callback untuk mengatasi hal ini. Berikut adalah peristiwanya:

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 bersin. Kita mendapatkan gambar, menambahkan pemroses, lalu JavaScript dapat berhenti mengeksekusi hingga salah satu pemroses tersebut dipanggil.

Sayangnya, dalam contoh di atas, mungkin saja peristiwa terjadi sebelum kita mulai memprosesnya, sehingga 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
});

Fungsi ini tidak menangkap gambar yang mengalami error sebelum kita sempat memprosesnya; sayangnya DOM tidak memberi kita cara untuk melakukannya. Selain itu, tindakan ini memuat satu gambar. Segala sesuatu akan menjadi lebih kompleks jika kita ingin mengetahui kapan serangkaian gambar 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 melampirkan pemroses. Namun, jika menyangkut keberhasilan/kegagalan asinkron, idealnya Anda memerlukan 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 "siap" 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, hanya saja:

  • Promise hanya bisa berhasil atau gagal sekali. Upaya itu tidak bisa berhasil atau gagal dua kali, juga tidak bisa beralih dari berhasil menjadi gagal atau sebaliknya.
  • Jika promise berhasil atau gagal, dan Anda kemudian menambahkan callback berhasil/gagal, callback yang benar akan dipanggil, meskipun peristiwa tersebut terjadi lebih awal.

Cara ini sangat berguna untuk keberhasilan/kegagalan asinkron, karena Anda menjadi kurang tertarik dengan waktu persis sesuatu menjadi tersedia, dan lebih tertarik untuk bereaksi terhadap hasilnya.

Terminologi promise

Domenic Denicola telah membaca draf pertama artikel ini dan memberi saya nilai "F" untuk terminologi. Dia menahan saya, memaksa saya menyalin States and Fates 100 kali, dan menulis surat yang mencemaskan kepada orang tua saya. Meskipun begitu, saya masih bingung dengan banyak terminologi, tetapi berikut ini dasar-dasarnya:

Promise dapat berupa:

  • fulfillment - Tindakan yang berkaitan dengan janji berhasil
  • rejected - Tindakan yang terkait dengan promise tersebut gagal
  • pending - belum terpenuhi atau ditolak
  • settled - Telah terpenuhi atau ditolak

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

Promise hadir di JavaScript!

Promise sudah lama ada dalam bentuk library, seperti:

Promise di atas dan promise JavaScript memiliki perilaku umum dan terstandardisasi yang disebut Promises/A+. Jika Anda pengguna jQuery, promise tersebut memiliki sesuatu yang mirip yang disebut Deferreds. Akan tetapi, Deferred tidak mematuhi Promise/A+, yang membuatnya sedikit berbeda dan kurang berguna, jadi berhati-hatilah. jQuery juga memiliki jenis Promise, tetapi ini hanyalah sebagian dari Ditangguhkan dan memiliki masalah yang sama.

Meskipun implementasi promise mengikuti perilaku terstandardisasi, API secara keseluruhannya berbeda. Promise JavaScript mirip dalam API dengan RSVP.js. Berikut ini 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, resolver dan tolak. Lakukan sesuatu dalam callback, mungkin asinkron, lalu panggil resolve jika semuanya berfungsi, jika tidak, panggil tolak.

Seperti throw di JavaScript lama, biasanya, tetapi tidak diwajibkan, untuk menolak objek Error. Manfaat objek Error adalah merekam pelacakan tumpukan, sehingga membuat alat proses debug 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 untuk kasus gagal. Keduanya bersifat opsional, jadi Anda dapat menambahkan callback untuk kasus berhasil atau gagal saja.

Promise JavaScript dimulai di DOM sebagai "Futures", diganti namanya menjadi "Promise", dan terakhir dipindahkan ke JavaScript. Keberadaannya di JavaScript, bukan DOM, bagus karena keduanya akan tersedia dalam konteks JS non-browser seperti Node.js (lain lagi masalahnya adalah menggunakannya dalam API intinya).

Walaupun merupakan fitur JavaScript, DOM tidak takut menggunakannya. Bahkan, semua DOM API baru dengan metode berhasil/gagal asinkron akan menggunakan promise. Hal ini sudah terjadi pada Quota Management, Font Load Events, ServiceWorker, Web MIDI, Streams, dan lainnya.

Kompatibilitas dengan library lain

API promise JavaScript akan memperlakukan apa pun dengan metode then() sebagai mirip promise (atau thenable dalam kapling promise), jadi jika Anda menggunakan library yang menampilkan promise Q, tidak masalah, itu akan cocok dengan promise JavaScript baru.

Walaupun, seperti yang saya sebutkan, Deferred di jQuery sedikit... tidak membantu. Untungnya, Anda dapat mentransmisikannya ke promise standar, yang patut dilakukan sesegera mungkin:

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

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

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

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

Sementara promise JS mengabaikan semua kecuali yang pertama:

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

Untungnya hal ini biasanya yang Anda inginkan, atau setidaknya memberi Anda akses ke hal yang Anda inginkan. Perlu diketahui juga bahwa jQuery tidak mengikuti konvensi penerusan objek Error ke dalam penolakan.

Kode asinkron yang rumit menjadi lebih mudah

Baiklah, mari kita buat kode beberapa hal. Misalnya, kita ingin:

  1. Memulai indikator lingkaran berputar untuk menandakan pemuatan
  2. Ambil sebagian JSON untuk cerita, yang akan memberi kita judul dan URL untuk tiap bab
  3. Tambahkan judul ke halaman
  4. Ambil setiap bab
  5. Tambahkan cerita ke halaman
  6. Menghentikan indikator lingkaran berputar

... tetapi beri tahu juga pengguna jika terjadi error di sepanjang prosesnya. Kita juga perlu menghentikan indikator lingkaran berputar pada saat itu, jika tidak indikator akan terus berputar, menjadi pusing, dan menabrak UI lainnya.

Tentu saja, Anda tidak akan menggunakan JavaScript untuk menyajikan cerita, fungsinya sebagai HTML lebih cepat, tetapi pola ini cukup umum digunakan saat menangani API: Beberapa pengambilan data, lalu melakukan sesuatu setelah selesai.

Untuk memulainya, mari kita tangani pengambilan data dari jaringan:

Menjanjikan XMLHttpRequest

API lama akan diupdate untuk menggunakan promise, jika memungkinkan dengan cara yang kompatibel dengan versi lama. XMLHttpRequest adalah kandidat utama, tetapi saat ini, 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. Ini bagus, karena semakin sedikit saya harus melihat cara penulisan camel-casing XMLHttpRequest yang menyebalkan, hidup saya akan semakin bahagia.

Perantaian

then() bukanlah akhir cerita, Anda dapat menggabungkan then 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 kembali ke:

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

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

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

Karena JSON.parse() mengambil satu argumen dan menampilkan nilai yang ditransformasi, 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() tetap menampilkan promise, yaitu promise yang mengambil URL, lalu mengurai respons sebagai JSON.

Mengantre tindakan asinkron

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

Jika Anda menampilkan sesuatu dari callback then(), ini agak ajaib. Jika Anda menampilkan nilai, then() berikutnya akan dipanggil dengan nilai tersebut. Namun, jika Anda menampilkan objek yang mirip promise, then() berikutnya akan menunggunya, dan hanya dipanggil saat promise tersebut selesai (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. Pada saat ini promise benar-benar mulai terlihat berbeda dari pola callback yang 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);
})

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

Penanganan error

Seperti yang telah kita lihat sebelumnya, then() menggunakan dua argumen, satu untuk berhasil, satu untuk gagal (atau isi dan tolak, dalam bentuk 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 hanya pemanis untuk then(undefined, func), tetapi lebih mudah dibaca. Perlu diperhatikan bahwa dua contoh kode di atas tidak berperilaku sama, kode 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 maju ke then() berikutnya dengan callback penolakan (atau catch(), karena setara). Dengan then(func1, func2), func1 atau func2 akan dipanggil, tidak keduanya. Namun, dengan then(func1).catch(func2), keduanya akan dipanggil jika func1 menolak, karena 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" langsung mengarah ke blok catch(). Gambar di atas sebagai diagram alir (karena saya suka diagram alir):

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

Pengecualian dan promise JavaScript

Penolakan terjadi jika promise ditolak secara eksplisit, tetapi juga secara implisit jika error ditampilkan 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, Anda dapat melakukan semua pekerjaan yang terkait dengan promise di dalam callback konstruktor promise, sehingga error akan otomatis direkam 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 dapat menggunakan catch untuk menampilkan kesalahan 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 sedang offline), semua callback berhasil berikutnya akan dilewati, termasuk yang ada di getJSON() yang mencoba mengurai respons sebagai JSON, dan juga akan melewati callback yang menambahkan Chapter1.html ke halaman. Sebagai gantinya, metode ini berpindah ke callback catch. Akibatnya, "Gagal menampilkan segmen" akan ditambahkan ke halaman jika tindakan sebelumnya yang gagal.

Seperti try/catch JavaScript, error akan ditangkap dan kode berikutnya akan berlanjut, sehingga indikator lingkaran berputar selalu tersembunyi, seperti yang kita inginkan. Kode di atas menjadi versi asinkron yang tidak memblokir untuk:

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 pemulihan dari error. Untuk melakukannya, cukup tampilkan kembali error tersebut. 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 semuanya. Mari kita wujudkan.

Paralelisme dan pengurutan: mendapatkan yang terbaik dari keduanya

Menganggap asinkron tidaklah mudah. Jika Anda kesulitan untuk memulai, coba tulis kode seolah-olah kode tersebut sinkron. Dalam kasus 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'

Berhasil. Namun, layanan ini menyinkronkan dan mengunci browser saat ada sesuatu yang diunduh. Untuk membuatnya berfungsi secara asinkron, kita menggunakan then() untuk melakukannya satu per satu.

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

  // TODO: for each url in story.chapterUrls, fetch & 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 kita bisa melakukan loop melalui URL bab dan mengambilnya secara berurutan? Ini tidak berfungsi:

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

forEach tidak mengenali asinkron, sehingga bab kita akan muncul dalam urutan apa pun yang didownload, yang pada dasarnya seperti cara menulis Pulp Fiksi. Ini bukan Pul Fiksi, 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 akan di-resolve menjadi nilai apa pun yang Anda berikan. Jika Anda meneruskan instance Promise, instance hanya akan menampilkannya (catatan: ini adalah perubahan pada spesifikasi yang belum diikuti oleh beberapa implementasi). Jika Anda meneruskan sesuatu yang mirip promise (memiliki metode then()), metode tersebut akan membuat Promise asli yang terpenuhi/ditolak dengan cara yang sama. Jika Anda meneruskan nilai lain, misalnya, Promise.resolve('Hello'), fungsi ini akan membuat promise yang terpenuhi dengan nilai tersebut. Jika Anda memanggilnya tanpa nilai, seperti di atas, akan terpenuhi dengan "undefined".

Ada juga Promise.reject(val), yang membuat promise yang akan ditolak dengan nilai yang Anda berikan (atau undefined).

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())

Ini melakukan hal yang sama dengan contoh sebelumnya, tetapi tidak memerlukan variabel "sequence" terpisah. Callback pengurangan kita dipanggil untuk setiap item dalam array. "sequence" adalah Promise.resolve() yang pertama kali, tetapi untuk panggilan "sequence" selanjutnya adalah apa pun yang kita tampilkan dari panggilan sebelumnya. array.reduce sangat berguna untuk meringkas array menjadi satu nilai, yang dalam hal ini merupakan 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';
})

Demikianlah, versi asinkron sepenuhnya dari versi sinkronisasi. Namun, kita bisa melakukannya dengan lebih baik. Saat ini, halaman kita akan didownload seperti ini:

Browser cukup mahir mendownload beberapa item sekaligus, jadi kita akan kehilangan performa dengan mendownload bab satu per satu. Yang ingin kita lakukan adalah mengunduh semuanya secara bersamaan, lalu memprosesnya ketika semuanya tiba. Untungnya ada API untuk ini:

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

Promise.all menggunakan array promise dan membuat promise yang terpenuhi ketika semuanya berhasil diselesaikan. Anda akan mendapatkan array hasil (janji apa pun yang terpenuhi) dalam urutan yang sama seperti 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, prosesnya bisa menjadi beberapa detik lebih cepat daripada memuat satu per satu, dan lebih sedikit kodenya daripada percobaan pertama kita. Bab dapat didownload dalam urutan apa pun, tetapi bab muncul di layar dalam urutan yang tepat.

Namun, kita masih dapat memperbaiki performa yang dirasakan. Ketika bab satu masuk, kita harus menambahkannya ke halaman. Hal ini memungkinkan pengguna mulai membaca sebelum bab selanjutnya tiba. Ketika bab tiga masuk, kita tidak akan menambahkannya ke halaman karena pengguna mungkin tidak menyadari bab dua tidak ada. Ketika bab dua masuk, kita dapat menambahkan bab dua dan tiga, dst.

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

Dan berhasillah, yang terbaik dari keduanya! Dibutuhkan waktu yang sama untuk mengirimkan semua konten, tetapi pengguna mendapatkan bagian pertama konten lebih cepat.

Dalam contoh sepele ini, semua bab masuk kurang lebih sama, tetapi manfaat menampilkannya satu per satu akan menjadi berlebihan pada bab yang lebih banyak dan lebih besar.

Melakukan hal di atas dengan callback atau peristiwa bergaya Node.js akan menggandakan kode, tetapi yang lebih penting, tidak mudah diikuti. Namun, ini bukan akhir cerita untuk promise, jika digabungkan dengan fitur ES6 lainnya, maka akan lebih mudah lagi.

Ronde bonus: kemampuan yang diperluas

Sejak awalnya saya menulis artikel ini, kemampuan untuk menggunakan Promise telah berkembang pesat. Sejak Chrome 55, fungsi asinkron telah memungkinkan kode berbasis promise untuk ditulis seolah-olah kode tersebut sinkron, tetapi tanpa memblokir thread utama. Anda dapat membaca hal tersebut lebih lanjut di my async functions article. Ada dukungan yang luas untuk Promise dan fungsi asinkron di browser utama. Anda dapat menemukan detailnya dalam 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 memeriksa dan membuat koreksi/rekomendasi.

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