এক নজরে জাভাস্ক্রিপ্ট Promise

#javascript #programming #webdev

জাভাস্ক্রিপ্টে প্রমিজ অনেকটা ভবিষ্যৎ value এর container হিসেবে কাজ করে । যেমন আপনার কোন একটা value এখন প্রয়োজন নেই কিন্তু এটি ভবিষ্যতে পরে প্রয়োজন হবে এমতা অবস্থায় promise ব্যবহার করা যেতে পারে । আবার promise হচ্ছে অ্যাসিঙ্ক্রোনাস অপারেশনের চূড়ান্ত সমাপ্তি বা ব্যর্থতার প্রতিনিধি হিসেবে কাজ করে। ধরেন আপনর কোডে কোন একটা অ্যাসিঙ্ক্রোনাস অপারেশনের মাধ্যমে আপনি কোন একটা সার্ভার থেকে ডাটা ফেচ করে নিয়ে আসছেন,এমন সিচুয়েশনেও promise ব্যবহার করা যেতে পারে।

promise তৈরি করার নিয়ম

new Promise হচ্ছে js এর es6 এর একটি কন্সট্রাক্টর ফাংশন যেটি ব্যবহার করে আমরা একটি promise অবজেক্ট তৈরি করে থাকি । সেই ফাংশনটা বা constructorতৈরি করার জন্য আমাদের আর্গুমেন্ট হিসেবে একটা কল ব্যাক ফাংশন দিতে হয় এবং সেই কলব্যাক ফাংশন এর ভিতর আরও দুইটা প্যারামিটার থাকে একটা হচ্ছে reslove আরেকটি হচ্ছে reject।এখানে resolve এবং reject দুইটাই একেটা ফাংশন।

let p1 = new Promise((resolve,reject)=>{})

এমতাবস্থায় যদি p1 কে console.log(p1) করি তাহলে আমরা pending দেখতে পারবো ।এর কারণ হচ্ছে এই promise এর ভিতরে আমরা কোন কাজ করেনি এবং resolve reject কোনটাই হয়নি । অর্থাৎ promise এর মধ্য ৩ টি state রয়েছে প্রথমটি pending এবং resolve অথবা reject । তারমানে promise সবসময় ৩টি state এর মধ্য দিয়ে তার কাজ শেষ করে। প্রতমত সে pending দিয়ে শুরু হয় এবং promis এর ভিতরে থাকা callback ফাংশন থেকে যদি resolve() কল করা হয় তাহলে promise টির state fulfiled বা সম্পূর্ণ হবে অথবা callback ফাংশন থেকে যদি reject() কল করা হয় তাহলে promise টির state reject হয়ে যাবে। যদি promise এর state reject হয় তাহলে সেটি error হিসেবে গণ্য করা হয়।

এবার উপরের উদাহারনটাকে আরেক্টু দেখা যাক :

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

এখন যদি আমরা p variable কে ব্রাউজারে console করি সাথে সাথে তাহলে দেখতে পারবো Promise এর state টি pending অবস্থায় থাকবে এবং ৫ সেকেন্ড পর যদি p কে console করি তাহলে Promise এর state টি fullfiled দেখাবে।

এখন কথা হচ্ছে promis এর ভিতরে থাকা callback এর value কীভাবে পাবো ? এর জন্য আমাদের .then() এবং .catch() ব্যবহার করতে হবে। আচ্ছা এখন একটু .then() এবং .catch() syntex দিয়ে কীভাবে promise এর value বের করা হয় সেটি দেখি।

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

এই কোডে ৫ সেকেন্ড পর "hello world" দেখতে পারব । কীভাবে হলো ? খেয়াল করুন আমরা promise কন্সট্রাক্টর থেকে setTimeout ফাংশন থেকে শুধু resolve() ফাংশন কল করেছি যা ৫সেকেন্ড পরে এক্সিকিউট হবে।

এবার .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 ফাংশনটি ডেটাকে পার্স করে এবং ১ সেকেন্ড পর তা রিটার্ন করে।

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

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