KUIS Asynchronous Process

  

KUIS Asynchronous Process


Soal:

Berikut diberikan isi file support.mjs:

const API = {
  fetch(delay, simulateError = false) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (simulateError) {
          return reject(new Error(`Error from delay ${delay}`));
        }

        return resolve(`Data from delay ${delay}`);
      }, delay);
    });
  }
};

const sampleErrorData = [
  {
    delay: 100,
    simulateError: false,
  },
  {
    delay: 50,
    simulateError: true,
  },
];

const sampleSuccessData = [
  {
    delay: 100,
    simulateError: false,
  },
  {
    delay: 50,
    simulateError: false,
  },
];

export { API, sampleErrorData, sampleSuccessData };

Bantu selesaikan kode js pada file index.mjs:

import { API, sampleErrorData, sampleSuccessData } from './support.mjs';

/**
 * TODO:
 * Lengkapi fungsi processData di bawah ini dengan ketentuan:
 * 1. Mengembalikan data dari pemanggilan API.fetch berdasarkan argumen `data` yang diberikan.
 * 2. Membangkitkan error jika API.fetch mengembalikan Promise reject.
 *
 * Parameter:
 * - `data` merupakan array of object dengan struktur { delay, simulateError }.
 * - Jalankan kode untuk melihat contoh nilai argumen `data`
 */
function processData(data) {
  // kode di bawah hanya untuk melihat nilai data. Silakan hapus untuk menjawab kuis.
  return Promise.resolve(data);
}

processData(sampleErrorData).then(console.log).catch(console.log); // Throw exception: Error from delay 50
processData(sampleSuccessData).then(console.log).catch(console.log); // expected output: ['Data from delay 100', 'Data from delay 50']


Penyelesaian:

Untuk menyelesaikan fungsi processData agar dapat menjalankan beberapa permintaan API secara paralel dan menangani error, Anda bisa menggunakan Promise.all().
Berikut adalah kode lengkap untuk file main.mjs:
javascript
import { API, sampleErrorData, sampleSuccessData } from './support.mjs';

/**
 * TODO:
 * Lengkapi fungsi processData di bawah ini dengan ketentuan:
 * 1. Mengembalikan data dari pemanggilan API.fetch berdasarkan argumen `data` yang diberikan.
 * 2. Membangkitkan error jika API.fetch mengembalikan Promise reject.
 */
function processData(data) {
  // Menggunakan map untuk mengubah setiap objek data menjadi Promise dari API.fetch
  const promises = data.map(item => API.fetch(item.delay, item.simulateError));
  
  // Promise.all akan menjalankan semua promise secara paralel
  // Jika salah satu reject, maka Promise.all juga akan langsung reject (melempar error)
  return Promise.all(promises);
}

// Pengujian
processData(sampleErrorData).then(console.log).catch(console.log); 
// Output: Error: Error from delay 50

processData(sampleSuccessData).then(console.log).catch(console.log); 
// Output: ['Data from delay 100', 'Data from delay 50']

Penjelasan:
  1. data.map(): Kita memetakan array objek input menjadi array berisi Promise. Setiap elemen array memanggil API.fetch.
  2. Promise.all(): Metode ini sangat cocok digunakan karena ia menunggu semua Promise selesai. Jika ada satu saja yang gagal (seperti pada sampleErrorData), ia akan langsung menuju blok .catch().
Apakah Anda ingin mencoba menggunakan async/await untuk gaya penulisan yang lebih modern pada fungsi tersebut?

Hasil eksekusi kode tersebut akan memberikan dua output berbeda di konsol karena ada dua pemanggilan fungsi:
1. Hasil untuk sampleErrorData
Karena pada sampleErrorData terdapat objek kedua dengan simulateError: true, maka Promise.all akan menangkap kegagalan tersebut.
  • Output: Error: Error from delay 50
  • (Catatan: Ini masuk ke blok .catch() karena salah satu promise ditolak/reject).
2. Hasil untuk sampleSuccessData
Karena kedua objek memiliki simulateError: false, maka semua promise berhasil diselesaikan dan mengembalikan array hasil.
  • Output: ['Data from delay 100', 'Data from delay 50']
  • (Catatan: Ini masuk ke blok .then() karena semua promise terpenuhi).
Ringkasan Logika
  • Promise.all bekerja dengan prinsip "semua atau tidak sama sekali". Jika ada satu yang gagal, ia langsung mengembalikan error (seperti pada contoh pertama).
  • Jika semuanya berhasil, ia mengembalikan array string sesuai dengan urutan inputnya.
Jadi, Output adalah:

Error: Error from delay 50 at Timeout._onTimeout (file:///home/glot/support.mjs:6:25) at listOnTimeout (node:internal/timers:573:17) at process.processTimers (node:internal/timers:514:7) [ 'Data from delay 100', 'Data from delay 50' ]


Apakah Anda ingin tahu cara menangani agar hasil yang sukses tetap tampil meskipun ada yang error menggunakan Promise.allSettled?



Bersambung ke:

Pengantar Code Quality




Comments

Post a Comment