جافاسكربتالبرومس

function fetchData() {
    return // هنا يجب أن نجعلها ترجع كائن يمثل البرومس
}

function fetchData() {
    return new Promise((resolve, reject) => {
        // هنا يجب وضع كود البرومس 
    });
}

function fetchData() {
    return new Promise((resolve, reject) => {
        // كود البرومس يبدأ من هنا 

        // القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
        resolve(value);

        // القيمة التي نريد إرجاعها من البرومس في حال حدوث خطأ نمررها للدالة التالية
        reject(error); 
    });
}

function fetchData() {
    return new Promise((resolve, reject) => {
        // كود البرومس يبدأ من هنا 

        // القيمة التي نريد إرجاعها من البرومس في حال لم يحدث خطأ نمررها للدالة التالية
        resolve(value);

        // القيمة التي نريد إرجاعها من البرومس في حال حدوث خطأ نمررها للدالة التالية
        reject(error); 
    });
}

// هنا قمنا باستدعاء الدالة التي ترجع البرومس مع مراقبة نتائجها
fetchData().then(
    (value) => { /* هنا نعالج النتيجة التي قد يرجعها البرومس */ },
    (error) => { /* هنا نعالج الخطأ الذي قد يرجعه البرومس */ }
);

<button onclick="executePromise()">Execute the promise</button>

<script>
    // هنا قمنا بتعريف دالة تقوم بإرجاع برومس عندما يتم استدعاءها
    function fetchData() {
        return new Promise((resolve, reject) => {
            // هنا أنشأنا مؤقت لجعل تنفيذ أوامر البرومس يتم بعد مرور ثانية واحدة
            setTimeout( () => {
                // هنا قمنا بتعريف متغير قيمته عبارة عن عدد عشوائي بين 1 و 10
                const value = Math.floor(Math.random() * 10) + 1;
            
                // أكبر أو تساوي 5 فهي قيمة مقبولة value هنا إعتبرنا أنه إذا كانت قيمة المتغير
                if (value >= 5) {
                    resolve(value);
                }
                // أكبر أو تساوي 5 فهي قيمة خاطئة value هنا إعتبرنا أنه إذا لم تكن قيمة المتغير
                else {
                    reject(value);
                }
            }, 1000);
        });
    }

    // سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
    function executePromise() {
        // لتنفيذ البرومس و الحصول على نتيجته then() و من ثم الدالة fetchData() هنا قمنا باستدعاء الدالة
        fetchData().then(
            // demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
            (value) => { 
                document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
                document.querySelector('#demo').style.color = 'green';
            },
            // demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
            (error) => { 
                document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
                document.querySelector('#demo').style.color = 'red';
            }
        );
    }
</script>

// سيتم تنفيذها عند النقر على الزر الموجود في الصفحة executePromise() الدالة
function executePromise() {
    // لتنفيذ البرومس  fetchData() هنا قمنا باستدعاء الدالة
    fetchData()
    // للحصول على نتيجة تنفيذ البرومس then() هنا قمنا باستدعاء الدالة
    .then((value) => {
        // demo يساوي id إذا أرجع لنا قيمة سليمة فسيتم عرضها في العنصر الذي يملك
        document.querySelector('#demo').innerHTML = 'Value returned = ' + value;
        document.querySelector('#demo').style.color = 'green';
    })
    // للحصول على أي خطأ قد يحدث عند تنفيذ البرومس catch() هنا قمنا باستدعاء الدالة
    .catch((error) => {
        // demo يساوي id إذا أرجع لنا قيمة تشير لخطأ فسيتم عرضها في العنصر الذي يملك
        document.querySelector('#demo').innerHTML = 'Error returned = ' + error;
        document.querySelector('#demo').style.color = 'red';
    });
}