Apa kamu biasanya menggunakan async/await untuk memproses data dari atau ke API?

Mempercepat async/await dengan Promise

Jika iya, kemungkinan besar kamu harus melakukannya secara paralel atau bergantian, yang sebenarnya oke-oke saja. Namun, ada cara untuk mempercepatnya, yaitu menggunakan Promise.

Seperti saat memperbarui 50+ data sekaligus, ini bisa memakan waktu hingga 50 detik dan akan mengganggu proses lainnya. Pengguna bingung selama menunggu dan sering meninggalkan halaman lebih cepat. Disini kamu sudah tahu masalah-masalahnya kan?.

Kalau belum, coba perhatikan kode berikut:

for (const record of records) {
  await update(record);
}

Disitu coba kalian perkirakan berapa lama prosesnya jika ada 50 records dan setiap record akan memakan waktu sekitar 0.2 detik.

Dengan contoh di atas, maka total proses akan memakan waktu setidaknya 10 detik. Itu proses yang cukup lama untuk sebuah script. Terus, bagaimana caranya untuk mempercepatnya?

Perhatikan lagi contoh berikut yang menggunakan Promise.all/Promise.allSettled

const allPromises = [];
for (const record of records) {
  const promise = update(record);
  allPromises.push(promise);
};
await Promise.allSettled(allPromises);

Tidak seperti contoh sebelumnya yang menunggu satu proses selesai dan memproses data selanjutnya, sekarang setiap proses akan dijalankan bersamaan. Visualisasinya seperti berikut:

Cara Mempercepat Proses Async/Await - 1 EpibSqi7zKJ4AUh2N yg1g

Terus untuk menerima hasil dari Promise bagaimana?

Menerima hasil data dari Promise.all/Promise.allSettled

Tidak semua promise akan berhasil, dan kadang kala beberapa akan gagal. Jika itu terjadi, bagaimana cara mengetahuinya?

Tenang, dengan array promise itu, kalian akan mendapatkan data kira-kira seperti berikut:

const values = await Promise.allSettled([
  Promise.resolve(33),
  Promise.reject(new Error('an error'))
])
console.log(values)
// [
//   {status: "fulfilled", value: 33},
//   {status: "rejected",  reason: Error: an error}
// ]

Bisa kalian lihat, kita akan dapat object dengan isi status dan value jika berhasil, atau reason jika gagal.

Status disitu menunjukkan apakah promisenya itu sukses (Fulfilled) atau gagal (Rejected). Kembali ke contoh awal, dimana kita update record database, dan kita mau tau apakah updatenya berhasil atau tidak. Jadi hasil yang kita dapat kira-kira seperti berikut:

const allPromises = [];
for (const record of records) {
    const promise = new Promise((resolve, reject) => {
        update(t)
            .then(() => { resolve(record.id) }); # berhasil
            .catch(() => { reject(record.id) }); # gagal
    });
    allPromises.push(promise);
};
const outcomes = await Promise.allSettled(allPromises);
const succeeded = outcomes.filter(o => o.status === "fulfilled");
const succeededIds = succeeded.map(s => s.value);
const failed = outcomes.filter(o => o.status === "rejected");
const failedIds = failed.map(f => f.reason);

Atau bisa kalian lihat visualisasinya dibawah ini:

Cara Mempercepat Proses Async/Await - 1 deL8BJq5cyyMoML8byPu8Q

Array yang dikembalikan memberi tahu kita mana yang berhasil dan mana yang gagal.

Dan dengan gitu doang, kita dapat mengurangi operasi pengeditan massal 50+ records dari 10 detik menjadi kurang dari 5 detik dengan perubahan ini.

Perbedaan Promise.all dan Promise.allSettled

Perbedaan mendasar dari all dan allSettled terletak pada hasil yang akan kita dapatkan. Jika kita menggunakan all maka kita hanya akan menerima hasilnya jika semua promise berhasil atau resolved. Dan juga jika menggunakan all dan ada satu promise yang gagal, proses akan langsung dimatikan, dan langsung mengembalikan hasilnya.

Sedangkan allSettled akan menunggu semua promise dan tidak akan berhenti walaupun ada yang gagal. Jadi, jika kalian ingin memastikan semuanya berhasil sebelum masuk ke proses selanjutnya, kalian bisa gunakan all, dan jika kalian ingin tahu masing-masing promise, maka allSettled akan lebih baik.

Penutup

Begitulah penggunaan async/await dengan Promise. Jika ada pertanyaan atau hal-hal yang salah didalam artikel ini, kalian bisa kirimkan saran di kolom komentar.

About the Author

Dzul Qurnain

Suka nonton Anime, ngoding dan bagi-bagi tips kalau tahu.. Oh iya, suka baca ( tapi yang menarik menurutku aja)...

View All Articles