Articles
Pengenalan ke TypeScript
Kelas Promise di TypeScript

Kelas Promise di TypeScript

Artikel ini menjelaskan kelas Promise di TypeScript.

YouTube Video

Promise

Kelas Promise di TypeScript pada dasarnya sama dengan Promise di JavaScript. Promise adalah kelas bawaan untuk menangani operasi asinkron, yang mewakili hasil dari operasi asinkron setelah selesai. Di sini, kami menjelaskan penggunaan dasar dari Promises dan konsep terkait.

Penggunaan Dasar

Membuat Promise:

Objek Promise digunakan untuk membungkus operasi asinkron. Promise dibuat dengan new Promise(executor), dan menjalankan operasi asinkron di dalamnya. executor menerima dua fungsi, resolve dan reject, sebagai argumen.

1const myPromise = new Promise<number>((resolve, reject) => {
2    // Perform asynchronous operations
3    const success = true; // This is just an example
4    if (success) {
5        resolve(42); // In case of success
6    } else {
7        reject('Failed'); // In case of failure
8    }
9});

Menggunakan Promise:

Promise yang dibuat diproses menggunakan then() dan catch().

1myPromise.then((value) => {
2    console.log(`Success: ${value}`); // Process the value passed with resolve
3}).catch((error) => {
4    console.error(`Error: ${error}`); // Handle the error passed with reject
5});

finally() method 

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = false; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise.then((value) => {
12    console.log(`Success: ${value}`); // Process the value passed with resolve
13}).catch((error) => {
14    console.error(`Error: ${error}`); // Handle the error passed with reject
15}).finally(() => {
16    console.log('The operation has completed');
17});
  • Metode finally() mendefinisikan kode yang akan selalu dijalankan, terlepas dari apakah Promise diselesaikan (fulfilled) atau ditolak (rejected).

Rantai Promises:

Dengan merantai then() setelah then(), Anda dapat menghubungkan beberapa operasi asinkron secara berurutan.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11myPromise
12    .then((value) => {
13        console.log(`Success: ${value}`);
14        return value + 1; // Pass the value to the next then
15    })
16    .then((newValue) => {
17        console.log(`New value: ${newValue}`);
18    })
19    .catch((error) => {
20        console.error(`Error: ${error}`);
21    });

async/await:

Di TypeScript, Anda dapat menangani Promises dengan lebih sederhana menggunakan async/await. Di dalam fungsi async, Anda dapat menggunakan kata kunci await untuk menunggu hasil dari sebuah Promise.

 1const myPromise = new Promise<number>((resolve, reject) => {
 2    // Perform asynchronous operations
 3    const success = true; // This is just an example
 4    if (success) {
 5        resolve(42); // In case of success
 6    } else {
 7        reject('Failed'); // In case of failure
 8    }
 9});
10
11async function asyncFunction() {
12    try {
13        const value = await myPromise;
14        console.log(`Success: ${value}`);
15    } catch (error) {
16        console.error(`Error: ${error}`);
17    }
18}
19
20asyncFunction();

Metode Promise

Promise.all()

Promise.all mengeksekusi beberapa Promise secara bersamaan dan menunggu hingga semuanya terpenuhi.

 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 ketika semua Promise terpenuhi. catch() akan dipanggil jika satu saja gagal.

Promise.race()

Promise.race mengembalikan hasil dari Promise pertama yang selesai di antara beberapa Promise.

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.

Promise.allSettled()

Promise.allSettled menunggu semua Promise selesai dan mengembalikan array berisi semua hasilnya, baik yang fulfilled maupun rejected.

 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 fulfilled maupun rejected). Setiap hasil memiliki properti status ('fulfilled' atau 'rejected'). Kegagalan tidak mempengaruhi operasi lainnya.

Promise.any()

Promise.any menunggu hingga Promise pertama terpenuhi dan mengembalikannya.

 1const promise1 = new Promise((resolve) => setTimeout(() => resolve("A ok"), 300));
 2const promise2 = new Promise((_, reject) => setTimeout(() => reject("B fail"), 100));
 3const promise3 = new Promise((resolve) => setTimeout(() => resolve("C ok"), 200));
 4
 5Promise.any([promise1, promise2, promise3])
 6    .then(value => {
 7        // Logs the first fulfilled value ("C ok")
 8        console.log("first fulfilled:", value);
 9    })
10    .catch(err => {
11        console.log("should not reach here in this example:", err);
12    });
  • Ia mengembalikan nilai pertama yang fulfilled di antara beberapa Promise.

Ringkasan

Dengan menggunakan TypeScript, Anda dapat menentukan tipe Promises dengan tepat, memungkinkan Anda menulis program yang lebih aman dalam hal tipe. Ini membantu mendeteksi kesalahan sejak awal saat pengembangan dengan menentukan tipe nilai yang dikembalikan oleh Promise sebelumnya.

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

YouTube Video

Penanganan Kesalahan di TypeScript