JavaScript Promise の概要

JavaScript の Promise は、将来の価値のコンテナとして機能します。たとえば、Promise は、今は値が必要ないが、将来必要になる場合に使用できます。この場合も、Promise は、非同期操作の最終的な完了または失敗のプロキシとして機能します。コード内の非同期操作を通じてサーバーからデータを取得していると仮定します。Promise はそのような状況でも使用できます。

約束をするときのルール

new Promise は、Promise オブジェクトを作成するために使用する js es6 のコンストラクター関数です。その関数またはコンストラクターを作成するには、引数としてコールバック関数を指定する必要があります。そのコールバック関数内にはさらに 2 つのパラメーターがあります。1 つは reslove で、もう 1 つは Reject です。ここでは、resolve と destroy の 2 つの関数があります。

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

この場合、p1 が console.log(p1) である場合、保留中であることがわかります。これは、この Promise 内で何も作業が行われておらず、拒否の解決が発生していないためです。 つまり、約束には 3 つの状態があり、最初の状態は保留中であり、解決または拒否されます。つまり、promise は常に 3 つの状態を通じて作業を完了します。 通常、保留状態で開始され、Promise 内のコールバック関数からsolve() が呼び出された場合、Promise の状態は満たされます。または、コールバック関数から Reject() が呼び出された場合、Promise の状態は拒否されます。 Promise の状態が拒否の場合、エラーとみなされます。

次に、上記の Arectu の例を見てみましょう:

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

ここで、ブラウザーで変数 p をコンソールすると、Promise の状態が保留中であることがわかり、5 秒後に p をコンソールすると、Promise の状態が fullfiled と表示されます。

今、Promise 内のコールバックの値を取得する方法について話していますか?このためには、

.then() と .catch() を使用する必要があります。それでは、.then() および .catch() 構文を使用して、promise の値がどのように抽出されるかを見てみましょう。

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

このコードの 5 秒後に、「hello world」が表示されます。どうやってそうなった？ 5 秒後に実行される 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 ফাংশনটি ডেটাকে পার্স করে এবং ১ সেকেন্ড পর তা রিটার্ন করে।

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

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

以上がJavaScript Promise の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。