Promise

في جافا سكريبت، Promise هي كائن يُستخدم لتمثيل عملية غير متزامنة (asynchronous operation) قد تكتمل الآن أو في المستقبل أو لا تكتمل إطلاقًا. ظهرت Promises لحل مشاكل الـ callback hell وتحسين التعامل مع العمليات التي تستغرق وقتًا مثل طلبات HTTP، القراءة من ملفات، أو العمليات المؤجلة بشكل عام.

✅ أولًا: ما هو الـ Promise؟

Promise هو كائن يمثل قيمة ناتجة عن عملية غير متزامنة، والتي يمكن أن تكون في إحدى الحالات التالية:

الحالةالوصف
pendingجاري تنفيذ العملية ولم تكتمل بعد
fulfilledالعملية اكتملت بنجاح وتم إنتاج نتيجة
rejectedالعملية فشلت بسبب خطأ وتم إرجاع سبب الرفض (خطأ مثلاً)
🧠 الشكل الأساسي للـ Promise
let promise = new Promise((resolve, reject) => {
  //async Code
  if (success) {
    resolve()
  } else {
    reject()
  }
});

promise.then(() => {
  console.log('123')
}).catch(() => {
  console.log("147")
})
JavaScript

ملاحظات: أي شيئ يرجع promise سيجعلك قادرا على استخدام then من بعده

يتم استدعاء الكود الموجود في then عندما يتم استدعاؤ resolve في ال promise

let promise = new Promise((resolve, reject) => {
  //async Code
  setTimeout(() => {
    document.getElementById("div1").style.backgroundColor = "green"
    resolve();
  }, 2000)
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      document.getElementById("div2").style.backgroundColor = "blue"
      resolve()
    }, 2000)
  })
}).then(() => {
  setTimeout(() => {
    document.getElementById("div3").style.backgroundColor = "red"
  }, 3000);
})
Dart
function getposts() {
  fetch('https://dummyjson.com/products')
    .then(response => response.json())
    .then(products => {
      for (product of products.products) {
        let container = document.getElementById("container");
        container.innerHTML +=
          `
          <div class="test">
            <h1>${product.title}</h2>
          <p>${product.description}</p>
          <img src="${product.images}" width="300">
          </div>
          `

      }
    });


}
Dart