JavaScript-Versprechen auf einen Blick

Versprechen in JavaScript fungiert als Container für zukünftigen Wert. Versprechen kann beispielsweise verwendet werden, wenn Sie einen Wert jetzt nicht benötigen, ihn aber später in der Zukunft benötigen werden. Auch hier fungiert das Versprechen als Stellvertreter für den endgültigen Abschluss oder Misserfolg des asynchronen Vorgangs. Angenommen, Sie holen Daten von einem Server über einen asynchronen Vorgang in Ihrem Code ab, Promise kann in solchen Situationen auch verwendet werden.

Regeln für Versprechen

new Promise ist eine Konstruktorfunktion von js es6, die wir verwenden, um ein Promise-Objekt zu erstellen. Um diese Funktion oder diesen Konstruktor zu erstellen, müssen wir eine Rückruffunktion als Argument angeben und es gibt zwei weitere Parameter in dieser Rückruffunktion, einer ist „reslove“ und der andere ist „reject“. Hier sind „resolve“ und „reject“ zwei Funktionen

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

Wenn p1 in diesem Fall console.log(p1) ist, können wir „pending“ sehen. Dies liegt daran, dass wir innerhalb dieses Versprechens keine Arbeit geleistet haben und die Ablehnung nicht behoben wurde. Das heißt, es gibt drei Versprechenszustände: Der erste ist „ausstehend“ und „Auflösen“ oder „Ablehnen“. Das bedeutet, dass Promise seine Arbeit immer über drei Zustände abschließt. Es beginnt normalerweise mit „pending“ und wenn „resolve()“ von der Callback-Funktion innerhalb des Versprechens aufgerufen wird, wird der Status des Versprechens erfüllt, oder wenn „reject()“ von der Callback-Funktion aufgerufen wird, wird der Status des Versprechens abgelehnt. Wenn der Versprechensstatus „Abgelehnt“ lautet, wird dies als Fehler betrachtet.

Schauen wir uns nun das obige Beispiel Arectu an:

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

Wenn wir nun die Variable p im Browser trösten, können wir sehen, dass der Status von Promise „Ausstehend“ ist, und nach 5 Sekunden, wenn wir p trösten, wird der Status von Promise als „erfüllt“ angezeigt.

Sprechen wir jetzt darüber, wie man den Wert des Rückrufs in das Versprechen integrieren kann? Dazu müssen wir

.then() und .catch() verwenden. Nun wollen wir sehen, wie der Wert von Promise mit der Syntax .then() und .catch() extrahiert wird.

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

Nach 5 Sekunden sehe ich in diesem Code „Hallo Welt“. Wie ist es passiert? Beachten Sie, dass wir gerade die Funktion „resolve()“ aus der Funktion „setTimeout“ im Promise-Konstruktor aufgerufen haben, die nach 5 Sekunden ausgeführt wird.

এবার .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() ব্লক এ চলে আসবে । তো আজ এই পর্যন্তই দেখা হবে আগামীতে ।

Das obige ist der detaillierte Inhalt vonJavaScript-Versprechen auf einen Blick. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!