Klase ng Promise sa JavaScript

Sa artikulong ito, ipapaliwanag namin ang klase ng Promise sa JavaScript.

YouTube Video

Promise

Ang klase ng Promise ay isang klase para sa paghawak ng mga asynchronous na operasyon. Hinahawakan nito ang mga resulta kung ang operasyon ay nagtagumpay, o ang paghawak sa error kung nabigo ito. Tradisyonal na ginamit ang mga callback function kapag kailangan mong maghintay sa pagtatapos ng isang asynchronous na operasyon, ngunit ginagawa itong mas malinaw at makapangyarihan ng Promise.

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

• Ang code na ito ay isang halimbawa ng asynchronous na proseso na nagpapakita ng "Done!" pagkatapos ng isang segundo.
  • Una, isang bagong Promise object ang nilikha gamit ang new Promise. Ang argument ay isang function na tumatanggap ng dalawang callback: resolve para sa tagumpay at reject para sa kabiguan.
  • Ginagamit ang setTimeout upang tawagin ang resolve() pagkatapos ng isang segundo.
  • Ang then() na method ng promise object ay naghihintay na matapos at ipinapakita ang resulta.

Pangunahing Istruktura

Ang Promise ay isang object na nauuwi sa alinman sa tagumpay o kabiguan.

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

• Kapag tagumpay, tinatawag ang resolve().
• Kapag kabiguan, tinatawag ang reject().

Ang object na Promise ay may tatlong estado.

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

• Naghihintay
  • Hindi pa tapos ang asynchronous na proseso.
• Natupad
  • Naging matagumpay ang asynchronous na proseso, at ang resulta ay ibinalik ng resolve(). Ang resulta ay natanggap gamit ang then() method.
• Tinanggihan
  • Nabigo ang asynchronous na proseso, at nagkaroon ng error sa pamamagitan ng reject(). Ang error ay natanggap gamit ang catch() method.

Mga Paraan ng then() at catch()

Sa paggamit ng isang Promise, maaari mong tukuyin ang gagawin kapag natapos ang isang asynchronous na operasyon. Para dito, ginagamit mo ang mga paraan ng then() at catch().

then()

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

• Ang paraan ng then() ay nagtutukoy ng isang function na tatawagin kapag ang Promise ay nagtagumpay.

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

• Ang paraan ng catch() ay nagtutukoy ng isang function na tatawagin kapag ang Promise ay nabigo.

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

• Ang paraan ng finally() ay nagtatakda ng code na isasagawa sa huli anuman kung ang Promise ay nagtagumpay o nabigo.

then() Chain

Ang then() ay nagbabalik ng bagong Promise, kaya maaari mong i-chain ang susunod na then().

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

• Sa code na ito, ang unang resolve() ay nagpapasa ng halagang 1, at bawat halagang ibinabalik ng isang then ay ipinapasa sa kasunod na then.
• Sa pamamagitan ng paggamit ng catch(), maaari mong hawakan ang anumang error na mangyari sa chain sa iisang lugar.

Praktikal na Halimbawa

Halimbawa, madalas na ginagamit ang Promises upang kumuha ng data mula sa isang server. Tignan natin ang isang halimbawa gamit ang fetch() API.

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

• Sa code na ito, dahil ang fetch() ay nagbabalik ng Promise, ginagamit ang then() upang iproseso ang data matapos matanggap ang tugon mula sa server. Ang mga error ay hinahawakan gamit ang catch().

Paghawak ng Maramihang Promises

Promise.all()

Upang magpatakbo ng maramihang Promises nang sabay-sabay at magpatuloy lamang kung lahat ay magtagumpay, gamitin ang 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    });

• Ang then() ay tinatawag lamang kung lahat ng Promises ay nagtagumpay. Ang catch() ay tinatawag kung kahit isa ay nabigo.

Promise.allSettled()

Kung gusto mong patakbuhin ang maraming Promise ng sabay-sabay at makuha lahat ng resulta kahit anuman ang kalabasan (tagumpay o kabiguan), gamitin ang 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    });

• Ang then() ay tatawagin kapag ang lahat ng Promise ay natapos na (fulfilled o rejected). Bawat resulta ay may kasamang status na property ('fulfilled' o 'rejected'). Kahit may ilang mabigo, hindi nito naaapektuhan ang iba pang mga operasyon.

Promise.race()

Ang Promise.race() ay nagbabalik ng resulta ng Promise na unang magtapos, kahit ito ay natupad o tinanggihan.

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

• Tulad ng sa halimbawang ito, ang resulta ng unang natapos na Promise ay ibinabalik.

Kaugnayan sa async/await

Ang paggamit ng sintaks na async/await ay nagbibigay-daan upang mas intuitive na maisulat ang mga Promises. Ang isang async na function ay laging nagbabalik ng isang Promise, at ang await ay naghihintay upang matapos ang Promise.

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

Gamit ang async/await sa ganitong paraan, ang mga asynchronous na operasyon ay maaaring isulat na parang synchronous na code, na mas madaling basahin.

Buod

• Ang Promise ay isang object para sa paghawak ng tagumpay o kabiguan ng mga asynchronous na operasyon.
• Hawakan ang matagumpay na mga operasyon gamit ang then() at ang mga error gamit ang catch().
• Ang finally() ay nagtatakda ng code na isinasagawa sa huli, hindi alintana kung tagumpay o kabiguan.
• Maaari mong hawakan ang maramihang mga Promise nang sabay-sabay gamit ang Promise.all() o Promise.race().
• Ang async/await ay sintaks para sa mas simpleng pagsulat ng mga Promise.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video