JavaScript Promise 概覽

JavaScript의 Promise는 미래 가치를 담는 그릇으로 작동합니다. 예를 들어 지금은 값이 필요하지 않지만 나중에 필요할 때 Promise를 사용할 수 있습니다. Promise는 비동기 작업의 최종 완료 또는 실패에 대한 프록시 역할을 합니다. 코드에서 비동기 작업을 통해 서버에서 데이터를 가져오고 있다고 가정하면 이러한 상황에서도 promise를 사용할 수 있습니다.

약속을 하기 위한 규칙

new Promise는 Promise 객체를 생성하는 데 사용하는 js es6의 생성자 함수입니다. 해당 함수 또는 생성자를 생성하려면 콜백 함수를 인수로 제공해야 하며 해당 콜백 함수 내에 두 개의 매개변수가 더 있습니다. 하나는 reslove이고 다른 하나는 거부입니다.

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

이 경우 p1이 console.log(p1)이면 보류 중인 것을 볼 수 있습니다. 이는 이 Promise 내에서 어떤 작업도 수행하지 않았고 거부 해결이 발생하지 않았기 때문입니다. 즉, Promise에는 3가지 상태가 있습니다. 첫 번째 상태는 대기 중, 해결 또는 거부입니다. 이는 Promise가 항상 3가지 상태를 통해 작업을 완료한다는 것을 의미합니다. 일반적으로 보류로 시작하고 Promise 내부의 콜백 함수에서 Resolve()가 호출되면 Promise 상태가 이행되고, 콜백 함수에서 Reject()가 호출되면 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 함수에서 해결() 함수를 호출했습니다.

এবার .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中文網其他相關文章！