Membuat Javascript Promise Timeout dengan Promise.race

TeknoCerdas.com – Salam cerdas untuk kita semua. Pada Javascript, selain callback cara untuk menuliskan kode asynchronus adalah dengan menggunakan Promise. Namun tetap ada kekurangan pada promise adalah masalah timeout. Tidak ada cara baku dan API standar untuk memaksa sebuah promise timeout setelah beberapa waktu.

Sebagai contoh, kita menggunakan sebuah pustaka pihak ketiga yang mengembalikan Promise. Pustaka tersebut tidak memiliki mekanisme timeout. Lalu bagaimana menghentikannya setelah sekian waktu

Salah satu solusi untuk menambahkan timeout pada Promise adalah dengan menggunakan method Promise.race(). Method tersebut menerima argumen berupa array of promise. Jika salah satu Promise dalam daftar tersebut sudah selesai atau mengembalikan error maka Promise tersebut akan dikembalikan.

Berbekal konsep tersebut kita dapat memasukkan sebuah timeout dalam Promise dan menjalankannya bersamaan dengan Promise utama didalam Promise.race().

Contoh Kode Promise.race()

Kita akan mensimulasikan sebuah promise yang memakan waktu sangat lama untuk selesai. Nilai balik diperlukan dalam 3 detik sehingga sistem tidak idle dalam waktu yang lama.

// Simulate long running process that takes forever
const veryLongLongTask = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve('Task completed.');
    }, 60000);
});

// Timeout set for 3 seconds
const timeoutForTask = new Promise(function(resolve, reject) {
    setTimeout(function() {
        reject('Task timeout.');
    }, 3000);
});

Promise.race([veryLongLongTask, timeoutForTask])
    .then(function(response) {
        console.log('Completed =>', response);
    })
    .catch(function(err) {
        console.log('Something went wrong =>', err);
    });

Something went wrong => Task timeout.

Dapat terlihat jika Promise timeoutForTask dieksekusi oleh Promise.race sehingga menyebabkan timeout pada task yang panjang dan tidak selesai.

Referensi lanjutan yang bagus dapat membaca sumber di MDN.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race