Kelas Promise dalam JavaScript

Dalam artikel ini, kami menerangkan kelas Promise dalam JavaScript.

YouTube Video

Promise

Kelas Promise adalah kelas untuk mengendalikan operasi tak segerak. Ia mengendalikan hasil jika operasi berjaya atau menangani ralat jika ia gagal. Secara tradisional, fungsi callback digunakan apabila anda perlu menunggu operasi tak segerak selesai, tetapi Promise menjadikannya lebih jelas dan lebih berkuasa.

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));

• Kod ini adalah contoh proses asinkron yang memaparkan "Selesai!" selepas satu saat.
  • Mula-mula, objek Promise baru dicipta menggunakan new Promise. Argumennya adalah fungsi yang mengambil dua callback: resolve untuk kejayaan dan reject untuk kegagalan.
  • setTimeout digunakan untuk memanggil resolve() selepas satu saat.
  • Kaedah then() pada objek promise menunggu proses selesai dan memaparkan hasilnya.

Struktur Asas

Promise ialah objek yang akhirnya akan menghasilkan sama ada berjaya atau gagal.

 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 kes berjaya, resolve() akan dipanggil.
• Dalam kes gagal, reject() akan dipanggil.

Objek Promise mempunyai tiga keadaan.

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

• Tertunda
  • Proses asinkron masih belum selesai.
• Dipenuhi
  • Proses asinkron berjaya, dan hasilnya dipulangkan oleh resolve(). Hasil diterima menggunakan kaedah then().
• Ditolak
  • Proses asinkron gagal, dan ralat berlaku melalui reject(). Ralat diterima menggunakan kaedah catch().

Kaedah then() dan catch()

Menggunakan Promise, anda boleh menentukan apa yang perlu dilakukan apabila operasi tak segerak selesai. Untuk ini, anda menggunakan kaedah 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});

• Kaedah then() menentukan fungsi yang akan dipanggil apabila Promise berjaya.

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});

• Kaedah catch() menentukan fungsi yang akan dipanggil apabila Promise gagal.

Kaedah 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    });

• Kaedah finally() menetapkan kod yang akan dilaksanakan pada akhirnya tanpa mengira sama ada Promise berjaya atau gagal.

then() Rantai

then() mengembalikan Promise yang baru, jadi anda boleh merantai then() yang seterusnya.

 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 kod ini, resolve() awal memberikan nilai 1, dan setiap nilai yang dikembalikan oleh then akan diberikan kepada then yang seterusnya.
• Dengan menggunakan catch(), anda boleh mengendalikan sebarang ralat yang berlaku dalam rantai di satu tempat.

Contoh Praktikal

Sebagai contoh, Promises sering digunakan untuk mendapatkan data dari pelayan. Mari kita lihat contoh 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 kod ini, kerana fetch() mengembalikan Promise, then() digunakan untuk memproses data selepas menerima respons dari pelayan. Ralat ditangani menggunakan catch().

Mengendalikan Pelbagai Promises

Promise.all()

Untuk melaksanakan pelbagai Promises secara serentak dan meneruskan hanya jika semuanya berjaya, 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 Promises berjaya. catch() dipanggil jika salah satu daripadanya gagal.

Promise.allSettled()

Jika anda ingin menjalankan beberapa Promise secara serentak dan mendapatkan semua keputusan tanpa mengira berjaya 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 selepas semua Promise telah selesai (sama ada dipenuhi atau ditolak). Setiap keputusan mengandungi sifat status ('fulfilled' atau 'rejected'). Walaupun ada yang gagal, ia tidak menjejaskan operasi yang lain.

Promise.race()

Promise.race() memulangkan hasil Promise yang selesai dahulu, sama ada dipenuhi atau ditolak.

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 dalam contoh ini, hasil daripada 'Promise' pertama yang selesai akan dikembalikan.

Hubungan dengan async/await

Menggunakan sintaks async/await membolehkan anda menulis Promises dengan lebih intuitif. Fungsi async sentiasa mengembalikan Promise, dan await akan menunggu Promise untuk diselesaikan.

 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 dengan cara ini, operasi tidak segerak dapat ditulis seperti kod segerak, menjadikannya lebih mudah untuk dibaca.

Ringkasan

• Promise adalah objek untuk mengendalikan kejayaan atau kegagalan operasi tidak segerak.
• Kendalikan operasi yang berjaya dengan then() dan ralat dengan catch().
• finally() mendefinisikan kod yang dilaksanakan pada akhirnya tanpa mengira kejayaan atau kegagalan.
• Anda boleh mengendalikan pelbagai Promise bersama menggunakan Promise.all() atau Promise.race().
• async/await adalah sintaks untuk menulis Promise dengan lebih mudah.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video