مفاهیم Promise و چگونگی استفاده از آن در جاوا اسکریپت: راهنمای کامل همراه با مثال‌ها

در دنیای برنامه‌نویسی، مدیریت عملیات‌های ناهم‌زمان یکی از چالش‌های اصلی است. در جاوا اسکریپت، مفهوم Promise (وعده) به شما این امکان را می‌دهد که این عملیات‌های ناهم‌زمان را به شیوه‌ای ساختاریافته و قابل‌فهم مدیریت کنید. در این مقاله، به بررسی مفهوم Promise و نحوه استفاده از آن در جاوا اسکریپت خواهیم پرداخت.

مفهوم Promise

یک Promise نماینده یک عملیات ناهم‌زمان است که ممکن است به نتیجه برسد یا با خطا مواجه شود. Promiseها به شما این امکان را می‌دهند که به طور منظم و قابل‌فهم با عملیات‌های ناهم‌زمان تعامل کنید. یک Promise می‌تواند در یکی از سه وضعیت زیر باشد:

• Pending (در حال انتظار): وضعیت اولیه، زمانی که Promise هنوز به نتیجه نرسیده است.

• Fulfilled (موفق): زمانی که Promise به درستی حل شده است و نتیجه آن آماده است.

• Rejected (رد شده): زمانی که Promise با خطا مواجه شده است.

ساخت و استفاده از Promise

ایجاد یک Promise

یک Promise با استفاده از سازنده Promise ایجاد می‌شود. سازنده Promise دو تابع به نام‌های resolve و reject را به عنوان آرگومان می‌پذیرد.

ساختار کلی Promise:

const myPromise = new Promise((resolve, reject) => {
  // عملیات ناهم‌زمان
  if (/* عملیات موفقیت‌آمیز */) {
    resolve('نتیجه موفق');
  } else {
    reject('خطا');
  }
});

مثال:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true; // شبیه‌سازی موفقیت یا خطا
    if (success) {
      resolve("Data successfully fetched!");
    } else {
      reject("Error fetching data.");
    }
  }, 2000); // شبیه‌سازی تأخیر
});

مصرف Promise

برای مصرف (استفاده) از Promise، از متدهای then, catch, و finally استفاده می‌کنید.

ساختار کلی مصرف Promise:

myPromise
  .then(result => {
    // کاری که باید انجام شود در صورت موفقیت
    console.log(result);
  })
  .catch(error => {
    // کاری که باید انجام شود در صورت خطا
    console.error(error);
  })
  .finally(() => {
    // کاری که باید انجام شود در هر حالت، موفقیت یا خطا
    console.log("Operation completed.");
  });

مثال:

myPromise
  .then(result => {
    console.log(result); // Output: Data successfully fetched!
  })
  .catch(error => {
    console.error(error); // Output: Error fetching data.
  })
  .finally(() => {
    console.log("Operation completed."); // Output: Operation completed.
  });

زنجیره‌سازی Promiseها

یکی از ویژگی‌های قدرتمند Promiseها، قابلیت زنجیره‌سازی آن‌هاست. شما می‌توانید چندین then را به یک Promise اضافه کنید تا توابع مختلف به ترتیب اجرا شوند.

مثال:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data"), 1000);
});

fetchData
  .then(data => {
    console.log(data); // Output: Data
    return data + " processed";
  })
  .then(processedData => {
    console.log(processedData); // Output: Data processed
  })
  .catch(error => {
    console.error(error);
  });

Promise.all و Promise.race

Promise.all

Promise.all برای اجرای چندین Promise به طور هم‌زمان و دریافت نتایج آن‌ها به صورت یک آرایه استفاده می‌شود. این متد زمانی موفق است که تمام Promiseها به حالت Fulfilled برسند.

مثال:

const promise1 = new Promise(resolve => setTimeout(() => resolve('First'), 1000));
const promise2 = new Promise(resolve => setTimeout(() => resolve('Second'), 2000));

Promise.all([promise1, promise2])
  .then(results => {
    console.log(results); // Output: ['First', 'Second']
  })
  .catch(error => {
    console.error(error);
  });

Promise.race

Promise.race برای اجرای چندین Promise به طور هم‌زمان و دریافت نتیجه اولین Promise که به وضعیت Fulfilled یا Rejected برسد، استفاده می‌شود.

مثال:

const promise1 = new Promise((resolve, reject) => setTimeout(() => resolve('First'), 1000));
const promise2 = new Promise((resolve, reject) => setTimeout(() => reject('Second'), 2000));

Promise.race([promise1, promise2])
  .then(result => {
    console.log(result); // Output: First
  })
  .catch(error => {
    console.error(error); // Output: Second
  });

async/await برای کار با Promiseها

معرفی async/await

async/await یک روش مدرن و خواناتر برای کار با Promiseهاست. با استفاده از async و await می‌توانید کدهای ناهم‌زمان را به شکل مشابه کدهای هم‌زمان بنویسید.

ساختار async و await:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

استفاده از async/await

مثال:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      setTimeout(() => resolve("Fetched Data"), 1000);
    });
    console.log(data); // Output: Fetched Data
  } catch (error) {
    console.error(error);
  }
}

fetchData();

نکات و توصیه‌ها

استفاده از Promise برای عملیات ناهم‌زمان

Promiseها برای مدیریت عملیات‌های ناهم‌زمان مانند درخواست‌های شبکه، خواندن فایل‌ها و تایمرها بسیار مفید هستند. آن‌ها به شما کمک می‌کنند تا کدهای خوانا و مدیریتی بنویسید.

خطاهای Promise

توجه داشته باشید که مدیریت خطا در Promiseها به طور صحیح بسیار مهم است. از متد catch برای مدیریت خطاها استفاده کنید و از finally برای انجام کارهایی که باید در هر حالت انجام شود، استفاده کنید.

استفاده از async/await برای کدهای خواناتر

با استفاده از async/await می‌توانید کدهای ناهم‌زمان را به شکل ساده‌تر و مشابه کدهای هم‌زمان بنویسید، که باعث افزایش خوانایی و نگهداری آسان‌تر کد می‌شود.

نتیجه‌گیری

Promiseها ابزارهای قدرتمندی برای مدیریت عملیات‌های ناهم‌زمان در جاوا اسکریپت هستند و با استفاده از آن‌ها می‌توانید کدهای پیچیده‌تری بنویسید که به راحتی با عملیات‌های ورودی/خروجی و درخواست‌های شبکه تعامل دارند. با درک و استفاده صحیح از Promiseها و async/await, می‌توانید برنامه‌های کارآمدتر و مقیاس‌پذیرتری بسازید و مشکلات مربوط به مدیریت زمان و ناهم‌زمانی را به طور مؤثری حل کنید.