Sekilas Pandang Janji JavaScript

Promise dalam JavaScript berfungsi sebagai wadah nilai masa hadapan. Sebagai contoh, janji boleh digunakan apabila anda tidak memerlukan nilai sekarang tetapi akan memerlukannya kemudian pada masa hadapan. Sekali lagi janji bertindak sebagai proksi untuk penyiapan akhir atau kegagalan operasi tak segerak. Katakan anda mengambil data daripada pelayan melalui operasi tak segerak dalam kod anda, promise juga boleh digunakan dalam situasi sedemikian.

Peraturan untuk membuat janji

Promise baharu ialah fungsi pembina js es6 yang kami gunakan untuk mencipta objek janji. Untuk mencipta fungsi atau pembina itu, kita perlu memberikan fungsi panggilan balik sebagai hujah dan terdapat dua lagi parameter di dalam fungsi panggil balik itu, satu ialah reslove dan satu lagi ialah tolak Di sini selesaikan dan tolak ialah dua fungsi

biar p1 = Janji baharu((selesaikan,tolak)=>{})

Dalam kes ini jika p1 ialah console.log(p1) maka kita boleh melihat belum selesai Ini kerana kita tidak melakukan apa-apa kerja di dalam janji ini dan menyelesaikan penolakan tidak berlaku. Maksudnya, ada 3 negeri janji, pertama tertangguh dan selesaikan atau tolak. Ini bermakna promise sentiasa menyelesaikan kerjanya melalui 3 negeri. Ia biasanya bermula dengan belum selesai dan jika resolve() dipanggil daripada fungsi panggil balik di dalam promise maka keadaan janji akan dipenuhi atau jika reject() dipanggil daripada fungsi panggil balik maka keadaan janji akan ditolak. Jika keadaan janji ditolak maka ia dianggap sebagai kesilapan.

Sekarang mari kita lihat contoh di atas Arectu :

let p = new Promise((res,rej)=>{
    setTimeout(()=>{
        res("hello world")
    },5000) 
}) 

Sekarang jika kita konsol pembolehubah p dalam penyemak imbas maka kita boleh melihat keadaan Janji akan belum selesai dan selepas 5 saat jika kita konsol p maka keadaan Janji akan menunjukkan penuh.

Sekarang bercakap tentang cara mendapatkan nilai panggilan balik di dalam janji? Untuk ini kita perlu menggunakan

.then() dan .catch(). Sekarang mari kita lihat bagaimana nilai janji diekstrak dengan sintaks .then() dan .catch().

//promise declare with new Promise constructor
let p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve ("hello world")
    },5000) 
}) 

// promise consume 
p.then((v )=>{ 
console.log(v ) // output- hello world
}).catch((error) =>{ 
console.log(error)
}) 

Selepas 5 saat dalam kod ini saya dapat melihat "hello world". Bagaimana ia berlaku? Ambil perhatian bahawa kami baru sahaja memanggil fungsi resolve() daripada fungsi setTimeout dalam promise constructor yang akan dilaksanakan selepas 5 saat.

এবার .then() এবং .catch() মেথড নিয়ে আরেক্টু আলোচনা করা যাক।

1. Promise then() মেথড

promise এর method তখন এ invoked করা যাবে যখন promise এর স্টেট fulfiled অথবা rejected হবে তখন । .then() মেথড প্যারামিটার হিসেবে ২টি ফাংশন নেয় । ১ম ফাংশনটি এক্সিকিউট হবে যদি promise এর স্টেট fulfiled হয় এবং ২য় ফাংশনটি এক্সিকিউট হবে যদি promise এর স্টেট rejected হয় ( যদিও ২য় ফাংশনটি অপশনাল তবে আমরা promise যদি rejected হয় সেই ক্ষেত্রে .catch() মেথড ব্যবহার করতে পারি )। resolve এবং rejected এর value রিসিভ করার জন্য প্রত্যেকটা ফাংশনে একটা করে প্যারামিটার রিসিভ করে । চলেন এক্সাম্পল দেখি তাইলে আরেক্টু বুঝতে পারবেন।

Example - 1

//promise declare with new Promise constructor
let promise = new Promise(function (resolve, reject) {
      resolve('Hello world '); 
})

// promise consume
promise
    .then(function (successMessage) {
        //success handler function is invoked  when promise state will be fulfiled 
        console.log(successMessage);
    }, function (errorMessage) {
        console.log(errorMessage);
    }); 

// output- Hello world

এখানে খেয়াল করুন.then() মেথড এর প্রথম ফাংশনটি এক্সিকিউট হচ্ছে উপরে resolve() ফাংশনটি কল হওয়ার কারণে। এখানে resolve("Hello world ") এইভাবে লিখা হয়েছে অর্থাৎ resolve ফাংশনটি আর্গুমেন্ট সহ কল হচ্ছে। সেই আরগুমেন্টি রিসিভ করার জন্য .then()মেথড এর প্রথম ফাংশনে successMessage নামে একটা প্যারামিটার রিসিভ করে সেই প্যারামিটার এর ভিতরে Hello world লিখাটি পাচ্ছি।

Example - 2

let promise = new Promise(function (resolve, reject) {
    reject('Promise Rejected')
})

promise
    .then(function (successMessage) {
        console.log(successMessage);
    }, function (errorMessage) {
        //error handler function is invoked 
        console.log(errorMessage);
    }); 

// output- Promise Rejected

এখানে খেয়াল করুন .then() মেথড এর দ্বিতীয় ফাংশনটি এক্সিকিউট হচ্ছে উপরে rejected() ফাংশনটি কল হওয়ার কারণে। এখানে rejected ("Promise Rejected ")এইভাবে লিখা হয়েছে অর্থাৎ rejected ফাংশনটি আর্গুমেন্ট সহ কল হচ্ছে। সেই আরগুমেন্টি রিসিভ করার জন্য.then() মেথড এর দ্বিতীয় ফাংশনে errorMessage নামে একটা প্যারামিটার রিসিভ করে সেই প্যারামিটার এর ভিতরে Promise Rejected লিখাটি পাচ্ছি।

2. Promise catch() Method

catch() মেথড তখনই invoked হবে যখন promise এর স্টেট rejected হবে অথবা promise এর ভিতরে যদি কোন error ঘটে তখন । এটি ব্যবহার করা হয় মূলত error handling এর জন্য। .catch() মেথড প্যারামিটার হিসেবে একটি কলব্যাক ফাংশন রিসিভ করে এবং সেই কলব্যাক ফাংশনটি আরও একটি প্যারামিটার রিসিভ করে promise এর ভিতরের error কে রিসিভ করার জন্য।

Example:

let promise = new Promise(function (resolve, reject) {
    reject('Promise Rejected')
})

promise
    .then(function (successMessage) {
        console.log(successMessage);
    })
    .catch(function (errorMessage) {
        //error handler function is invoked 
        console.log(errorMessage);
    }); 

output - Promise Rejected

এখানে error টা catch() মেথড এ ঢুকবে কারণ .then() মেথডে প্যারামিটারে আমরা ১ম ফাংশনটি ব্যবহার করেছি যেহেতু .then() মেথড এর প্যারামিটারে ২য় ফাংশনটি ব্যবহার করেনি এবং এর পরিবর্তীতে catch() মেথড ব্যবহার করেছি তাই promise কন্সট্রাক্টর এর ভিতরে যদি promise এর state rejected হয় অথবা কোন error ঘটে তখন সেটি .catch() মেথড এর প্যারামিটার এর কলব্যাক ফাংশনে চলে আসবে।

Chaining Promises

কখনও কখনও, আপনাকে একের পর এক promise নিয়ে কাজ করা লাগতে পারে । যেমন আপনি কোন একটা সার্ভার থেকে ডাটা নিয়ে আসবেন তারপরে ডাটা চলে আসলে আপনি সেই ডাটা প্রসেস করবেন এবং প্রসেস করা শেষ হলে আপনি সেটি ডিসপ্লে করাবেন। এমন পর পর কাজ যদি করতে হয় তাহলে আপনি promise চেইন ব্যবহার করতে পারেন।
Example:

// fetdchData promise declare with new Promise constructor
const fetchData = () => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(JSON.stringify({ name: 'Sabbir' }));
    }, 2000);
  });
};

// processData promise declare with new Promise constructor
const processData = data => {
  return new Promise((res, rej) => {
    setTimeout(() => {
      res(JSON.parse(data));
    }, 1000);
  });
};

const displayData = (finalData) =>{
  console.log(finalData)
} 


fetchData()
  .then(res => { 
return processData(res)  //processData function invoke with fetch data
})
  .then( data => { 
displayData(data )  //display function invoke with displayData func result
})
  .catch(error => { 
console.log(error) 
}); 

output - {name:"sabbir"}

১। ডেটা ফেচ করা: প্রথমে ডেটা ফেচ করতে হবে, যেটা একটি প্রমিজের মাধ্যমে করা হচ্ছে। এখানে fetchData ফাংশনটি একটি অ্যাসিনক্রোনাস কাজ সিমুলেট করে, যেখানে ২ সেকেন্ড পর একটি JSON অবজেক্ট রিটার্ন হয়।

২ ডেটা প্রসেস করা: ডেটা ফেচ হয়ে গেলে পরবর্তী ধাপ হলো সেই ডেটা প্রসেস করা। এখানে processData ফাংশনটি ডেটাকে পার্স করে এবং ১ সেকেন্ড পর তা রিটার্ন করে।

1. ডেটা ডিসপ্লে করা: সবশেষে, প্রসেস করা ডেটা কনসোলে দেখানো হয়। displayData ফাংশনের মাধ্যমে এটি করা হয়।

এই ধরনের কাজগুলো যদি ঠিকঠাকভাবে পরপর করতে হয়, তাহলে প্রমিজ চেইনিং ব্যবহার করা লাগে।তবে এখানে একটা catch() ব্যবহার করলে হবে । এখানে যেকোনো promis এ কোন error হলে সেটি এই catch() ব্লক এ চলে আসবে । তো আজ এই পর্যন্তই দেখা হবে আগামীতে ।

Atas ialah kandungan terperinci Sekilas Pandang Janji JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!