Kelas Promise dalam JavaScript

Dalam artikel ini, kami menjelaskan kelas Promise dalam JavaScript.

YouTube Video

Promise

Kelas Promise adalah kelas untuk menangani operasi asinkron. Kelas ini menangani hasil jika operasi berhasil atau menangani kesalahan jika gagal. Secara tradisional, fungsi callback digunakan ketika Anda perlu menunggu operasi asinkron selesai, tetapi Promise membuatnya lebih jelas dan lebih kuat.

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5// Displays "Done!" after 1 second
6promise.then(result => console.log(result));

• Kode ini adalah contoh proses asinkron yang menampilkan "Selesai!" setelah satu detik.
  • Pertama, objek Promise baru dibuat dengan menggunakan new Promise. Argumennya adalah fungsi yang menerima dua callback: resolve untuk keberhasilan dan reject untuk kegagalan.
  • setTimeout digunakan untuk memanggil resolve() setelah satu detik.
  • Metode then() dari objek promise menunggu hingga selesai dan menampilkan hasilnya.

Struktur Dasar

Promise adalah objek yang pada akhirnya menghasilkan keberhasilan atau kegagalan.

 1const promise = new Promise((resolve, reject) => {
 2    // Asynchronous operation
 3    // Flag indicating whether the operation was successful
 4    const success = true;
 5
 6    if (success) {
 7        resolve('Operation successful!');
 8    } else {
 9        reject('An error occurred');
10    }
11});

• Dalam kasus berhasil, resolve() akan dipanggil.
• Dalam kasus gagal, reject() akan dipanggil.

Objek Promise memiliki tiga status.

1promise
2    .then((result) => {
3        console.log(result);
4    })
5    .catch((error) => {
6        console.error(error);
7    })

• Menunggu
  • Proses asinkron belum selesai.
• Berhasil
  • Proses asinkron berhasil, dan hasilnya dikembalikan oleh resolve(). Hasilnya diterima menggunakan metode then().
• Gagal
  • Proses asinkron gagal, dan terjadi kesalahan melalui reject(). Kesalahan diterima menggunakan metode catch().

Metode then() dan catch()

Dengan menggunakan sebuah Promise, Anda dapat menentukan apa yang harus dilakukan ketika sebuah operasi asinkron selesai. Untuk ini, Anda menggunakan metode then() dan catch().

then()

1const promise = new Promise((resolve, reject) => {
2    resolve('Operation successful!');
3});
4
5promise.then((result) => {
6    console.log(result);  // "Operation successful!"
7});

• Metode then() menentukan fungsi yang akan dipanggil ketika Promise berhasil.

catch()

1const promise = new Promise((resolve, reject) => {
2    reject('An error occurred');
3});
4
5promise.catch((error) => {
6    console.error(error);  // "An error occurred"
7});

• Metode catch() menentukan fungsi yang akan dipanggil ketika Promise gagal.

Metode finally()

 1const promise = new Promise((resolve, reject) => {
 2    resolve('Operation successful!');
 3});
 4
 5promise
 6    .then((result) => {
 7        console.log(result);
 8    })
 9    .catch((error) => {
10        console.error(error);
11    })
12    .finally(() => {
13        console.log('The operation has completed');
14    });

• Metode finally() mendefinisikan kode yang akan dijalankan pada akhirnya terlepas dari apakah Promise berhasil atau gagal.

then() Rantai

then() mengembalikan Promise baru, jadi Anda dapat merangkai then() berikutnya.

 1const promise = new Promise((resolve, reject) => {
 2    setTimeout(() => {
 3        resolve(1);
 4    }, 1000);
 5});
 6
 7promise
 8    .then(result => {
 9        console.log(result); // 1
10        return result + 1;
11    })
12    .then(result => {
13        console.log(result); // 2
14        return result + 1;
15    })
16    .then(result => {
17        console.log(result); // 3
18    })
19    .catch(error => {
20        console.error(error.message); // Something went wrong
21    });

• Dalam kode ini, resolve() awal mengirimkan nilai 1, dan setiap nilai yang dikembalikan oleh then diteruskan ke then berikutnya.
• Dengan menggunakan catch(), Anda dapat menangani semua error yang terjadi dalam rantai di satu tempat.

Contoh Praktis

Sebagai contoh, Promises sering digunakan untuk mengambil data dari server. Mari kita lihat contoh dengan menggunakan API fetch().

 1fetch('https://codesparklab.com/json/example.json')
 2    .then(response => {
 3        if (!response.ok) {
 4            throw new Error('Network error');
 5        }
 6        return response.json();
 7    })
 8    .then(data => {
 9        console.log(data);
10    })
11    .catch(error => {
12        console.error('Error:', error);
13    });

• Dalam kode ini, karena fetch() mengembalikan sebuah Promise, maka then() digunakan untuk memproses data setelah menerima respons dari server. Kesalahan ditangani menggunakan catch().

Menangani Banyak Promise

Promise.all()

Untuk menjalankan banyak Promise secara bersamaan dan lanjut hanya jika semua berhasil, gunakan Promise.all().

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });

• then() hanya dipanggil jika semua Promise berhasil. catch() dipanggil jika ada satu saja yang gagal.

Promise.allSettled()

Jika Anda ingin menjalankan beberapa Promise secara bersamaan dan mendapatkan semua hasil tanpa memandang berhasil atau gagal, gunakan Promise.allSettled().

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });

• then() akan dipanggil setelah semua Promise selesai (baik terpenuhi maupun ditolak). Setiap hasil menyertakan properti status ('fulfilled' atau 'rejected'). Bahkan jika beberapa gagal, itu tidak mempengaruhi operasi lainnya.

Promise.race()

Promise.race() mengembalikan hasil dari Promise yang paling cepat selesai, baik berhasil maupun gagal.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});

• Seperti pada contoh ini, hasil dari Promise pertama yang selesai akan dikembalikan.

Hubungan dengan async/await

Menggunakan sintaks async/await memungkinkan Anda menulis Promise dengan lebih intuitif. Fungsi async selalu mengembalikan sebuah Promise, dan await akan menunggu sampai Promise tersebut selesai.

 1async function fetchData() {
 2    try {
 3        const response = await fetch('https://codesparklab.com/json/example.json');
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error('Error :', error);
 8    }
 9}
10
11fetchData();

Dengan menggunakan async/await seperti ini, operasi asinkron dapat ditulis seperti kode sinkron, yang membuatnya lebih mudah dibaca.

Ringkasan

• Promise adalah objek untuk menangani keberhasilan atau kegagalan dari operasi asinkron.
• Tangani operasi yang berhasil dengan then() dan kesalahan dengan catch().
• finally() mendefinisikan kode yang akan dijalankan di akhir terlepas dari berhasil atau gagal.
• Anda dapat menangani banyak Promise bersama-sama menggunakan Promise.all() atau Promise.race().
• async/await adalah sintaks untuk menulis Promise dengan lebih sederhana.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video