فهم التزامنات في JavaScript

// ES5: الجزء 1

var isMomHappy = false;

// Promise
var willIGetNewPhone = new Promise(
    function (resolve, reject) {
        if (isMomHappy) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone); // تحقق
        } else {
            var reason = new Error('mom is not happy');
            reject(reason); // رفض
        }

    }
);

// تبدو بنية Promise هكذا
new Promise(function (resolve, reject) { ... } );

// ES5: الجزء 2

var willIGetNewPhone = ... // استمرار من الجزء 1

// استدعاء Promise الخاص بنا
var askMom = function () {
    willIGetNewPhone
        .then(function (fulfilled) {
            // ياي، حصلت على هاتف جديد
            console.log(fulfilled);
             // الناتج: { brand: 'Samsung', color: 'black' }
        })
        .catch(function (error) {
            // عذراً، لم تشتريه أمي
            console.log(error.message);
             // الناتج: 'أمي ليست سعيدة'
        });
};

askMom();

// ES5

// الوعد الثاني
var showOff = function (phone) {
    return new Promise(
        function (resolve, reject) {
            var message = 'Hey friend, I have a new ' +
                phone.color + ' ' + phone.brand + ' phone';

            resolve(message);
        }
    );
};

// تقصيره

// الوعد الثاني
var showOff = function (phone) {
    var message = 'Hey friend, I have a new ' +
                phone.color + ' ' + phone.brand + ' phone';

    return Promise.resolve(message);
};

// استدعاء الوعد
var askMom = function () {
    willIGetNewPhone
    .then(showOff) // سلسلته هنا
    .then(function (fulfilled) {
            console.log(fulfilled);
         // الناتج: 'يا صديقي، لدي هاتف سامسونج أسود جديد.'
        })
        .catch(function (error) {
            // أوبس، لم تشتريه والدتي
            console.log(error.message);
         // الناتج: 'والدتي ليست سعيدة'
        });
};

// استدعاء وعدنا
var askMom = function () {
    console.log('before asking Mom'); // تسجيل قبل
    willIGetNewPhone
        .then(showOff)
        .then(function (fulfilled) {
            console.log(fulfilled);
        })
        .catch(function (error) {
            console.log(error.message);
        });
    console.log('after asking mom'); // تسجيل بعد
}

// المثال الكامل ل ES5

var isMomHappy = true;

// الوعد
var willIGetNewPhone = new Promise(
    function (resolve, reject) {
        if (isMomHappy) {
            var phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone); // مكافئ
        } else {
            var reason = new Error('mom is not happy');
            reject(reason); // رفض
        }

    }
);

// الوعد الثاني
var showOff = function (phone) {
    var message = 'Hey friend, I have a new ' +
                phone.color + ' ' + phone.brand + ' phone';

    return Promise.resolve(message);
};

// اتصال بوعدنا
var askMom = function () {
    willIGetNewPhone
    .then(showOff) // توصيله هنا
    .then(function (fulfilled) {
            console.log(fulfilled);
            // خريطة الخارج: 'مرحبا صديقي، لدي هاتف سامسونج أسود جديد.'
        })
        .catch(function (error) {
            // أووps، لم تشتري والدتي هذا
            console.log(error.message);
            // خريطة الخارج: 'لم تكن والدتي سعيدة'
        });
};

askMom();

//_ ES6: مثال كامل_

const isMomHappy = true;

// وعد
const willIGetNewPhone = new Promise(
    (resolve, reject) => { // دالة سهم
        if (isMomHappy) {
            const phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
        } else {
            const reason = new Error('mom is not happy');
            reject(reason);
        }

    }
);

// الوعد الثاني
const showOff = function (phone) {
    const message = 'Hey friend, I have a new ' +
                phone.color + ' ' + phone.brand + ' phone';
    return Promise.resolve(message);
};

// استدعاء وعدنا
const askMom = function () {
    willIGetNewPhone
        .then(showOff)
        .then(fulfilled => console.log(fulfilled)) // دالة سهم
        .catch(error => console.log(error.message)); // دالة سهم
};

askMom();

// ES7: مثال كامل
const isMomHappy = true;

// وعد
const willIGetNewPhone = new Promise(
    (resolve, reject) => {
        if (isMomHappy) {
            const phone = {
                brand: 'Samsung',
                color: 'black'
            };
            resolve(phone);
        } else {
            const reason = new Error('mom is not happy');
            reject(reason);
        }

    }
);

// الوعد الثاني
async function showOff(phone) {
    return new Promise(
        (resolve, reject) => {
            var message = 'Hey friend, I have a new ' +
                phone.color + ' ' + phone.brand + ' phone';

            resolve(message);
        }
    );
};

// استدعاء وعدنا بأسلوب ES7 async await
async function askMom() {
    try {
        console.log('before asking Mom');

        let phone = await willIGetNewPhone;
        let message = await showOff(phone);

        console.log(message);
        console.log('after asking mom');
    }
    catch (error) {
        console.log(error.message);
    }
}

// async await هنا أيضًا
(async () => {
    await askMom();
})();

// جمع رقمين بشكل عادي

function add (num1, num2) {
    return num1 + num2;
}

const result = add(1, 2); // تحصل على النتيجة = 3 على الفور

// جمع رقمين عن بُعد

// الحصول على النتيجة عن طريق استدعاء واجهة برمجة تطبيقات
const result = getAddResultFromServer('http://www.example.com?num1=1&num2=2');
// تحصل على النتيجة = "غير معرفة"

// إضافة رقمين عن بُعد
// الحصول على النتيجة عن طريق استدعاء واجهة برمجة تطبيقات

function addAsync (num1, num2, callback) {
    // استخدام واجهة استدعاء getJSON الشهيرة في jQuery
    return $.getJSON('http://www.example.com', {
        num1: num1,
        num2: num2
    }, callback);
}

addAsync(1, 2, success => {
    // دالة استدعاء
    const result = success; // تحصل على النتيجة = 3 هنا
});

// إضافة رقمين بشكل عادي

let resultA, resultB, resultC;

 function add (num1, num2) {
    return num1 + num2;
}

resultA = add(1, 2); // تحصل على resultA = 3 على الفور
resultB = add(resultA, 3); // تحصل على resultB = 6 على الفور
resultC = add(resultB, 4); // تحصل على resultC = 10 على الفور

console.log('total' + resultC);
console.log(resultA, resultB, resultC);

// إضافة رقمين عن بُعد
// الحصول على النتيجة عن طريق استدعاء واجهة برمجة تطبيقات

let resultA, resultB, resultC;

function addAsync (num1, num2, callback) {
    // استخدام واجهة استدعاء رجعي لـ jQuery getJSON الشهيرة
	// https://api.jquery.com/jQuery.getJSON/
    return $.getJSON('http://www.example.com', {
        num1: num1,
        num2: num2
    }, callback);
}

addAsync(1, 2, success => {
    // استدعاء رجعي 1
    resultA = success; // تحصل هنا على النتيجة = 3

    addAsync(resultA, 3, success => {
        // استدعاء رجعي 2
        resultB = success; // تحصل هنا على النتيجة = 6

        addAsync(resultB, 4, success => {
            // استدعاء رجعي 3
            resultC = success; // تحصل هنا على النتيجة = 10

            console.log('total' + resultC);
            console.log(resultA, resultB, resultC);
        });
    });
});

// إضافة رقمين عن بُعد باستخدام المُلاحظ القابل للمراقبة

let resultA, resultB, resultC;

function addAsync(num1, num2) {
    // استخدام واجهة برمجة تطبيقات ES6 fetch، التي تُرجع وعدًا
	// ما هو .json()؟ https://developer.mozilla.org/en-US/docs/Web/API/Body/json
    return fetch(`http://www.example.com?num1=${num1}&num2=${num2}`)
        .then(x => x.json()); 
}

addAsync(1, 2)
    .then(success => {
        resultA = success;
        return resultA;
    })
    .then(success => addAsync(success, 3))
    .then(success => {
        resultB = success;
        return resultB;
    })
    .then(success => addAsync(success, 4))
    .then(success => {
        resultC = success;
        return resultC;
    })
    .then(success => {
        console.log('total: ' + success)
        console.log(resultA, resultB, resultC)
    });

let Observable = Rx.Observable;
let resultA, resultB, resultC;

function addAsync(num1, num2) {
    // استخدام واجهة برمجة تطبيقات ES6 fetch، التي تُرجع وعدًا
    const promise = fetch(`http://www.example.com?num1=${num1}&num2=${num2}`)
        .then(x => x.json());

    return Observable.fromPromise(promise);
}

addAsync(1,2)
  .do(x => resultA = x)
  .flatMap(x => addAsync(x, 3))
  .do(x => resultB = x)
  .flatMap(x => addAsync(x, 4))
  .do(x => resultC = x)
  .subscribe(x => {
    console.log('total: ' + x)
    console.log(resultA, resultB, resultC)
  });

...

addAsync(1,2)
  .delay(3000) // تأخير 3 ثوانٍ
  .do(x => resultA = x)
  ...