jQuery Academy · درس

تسلسل الوعود وتركيبها

تعلّم تسلسل عمليات غير متزامنة متعددة باستخدام .then() و.pipe()، وتركيب مسارات عمل معقّدة عبر انتظار اكتمال Promises متعددة باستخدام $.when().

الدرس 2 من 311 خطوة

تسلسل الوعود وتركيبها درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

تسلسل العمليات غير المتزامنة

في تطوير الويب، نحتاج غالبًا إلى تنفيذ مهام غير متزامنة (مثل جلب البيانات) بترتيب محدد. يتيح لنا ربط الوعود تنفيذ ذلك بطريقة منظمة.

بدلًا من تداخل دوال الاستدعاء، الأمر الذي قد يؤدي إلى «جحيم دوال الاستدعاء»، يمكننا ربط العمليات بالتتابع، مما يجعل قراءة الشيفرة وصيانتها أسهل بكثير.

الربط باستخدام .then()

تُعد الطريقة .then() أساسية لعملية الربط. عند اكتمال Deferred (أو Promise)، تُنفَّذ دالة الاستدعاء الخاصة بـ .then(). ويمكن بعد ذلك استخدام القيمة التي تعيدها هذه الدالة بواسطة .then() التالية في سلسلة الربط.

إذا أعادت دالة الاستدعاء Deferred جديدًا، تنتظر السلسلة اكتمال Deferred الجديد قبل المتابعة.

مثال بسيط على سلسلة .then()

لنرَ مثالًا بسيطًا نحاكي فيه خطوتين غير متزامنتين. لا تُنفَّذ الخطوة الثانية إلا بعد اكتمال الأولى، وتستخدم البيانات الناتجة عنها.

لاحظوا كيف تُمرَّر نتيجة step1 ‏('Data from Step 1') إلى step2.

function runChainExample() {
  let dfd1 = new $.Deferred();
  let dfd2 = new $.Deferred();

  setTimeout(() => {
    console.log("Step 1 complete!");
    dfd1.resolve("Data from Step 1");
  }, 500);

  dfd1.then(function(data1) {
    console.log("Received in Step 2: " + data1);
    setTimeout(() => {
      console.log("Step 2 complete!");
      dfd2.resolve("Processed " + data1);
    }, 300);
    return dfd2;
  }).then(function(data2) {
    console.log("Received in Final Step: " + data2);
    console.log("Chain finished!");
  });
}

$(document).ready(function() {
  runChainExample();
});

تدفّق البيانات في سلاسل .then()

تحدد القيمة التي تعيدها دالة الاستدعاء في .then() الإدخال المُمرَّر إلى .then() التالية.

إذا أعدتم قيمة ليست Deferred، تصبح تلك القيمة هي القيمة المكتملة التي تتلقاها .then() التالية.
إذا أعدتم كائن Deferred، تتوقف السلسلة مؤقتًا حتى يكتمل ذلك الـ Deferred، ثم تُمرَّر قيمته المكتملة إلى .then() التالية.

استخدام .pipe() للتحويل

مع أن .then() هو المعيار الحديث، توفر jQuery أيضًا .pipe() ضمن .Deferred(). وهي مشابهة لـ .then()، لكنها صُممت في الأصل لتحويل القيمة المكتملة أو المرفوضة، أو لتصفية كائن Deferred الذي يستمر في السلسلة.

يمكن استخدام .pipe() لإعادة Deferred جديد يكتمل بقيمة محوَّلة، وبذلك يتم «تمريرها» إلى المرحلة التالية.

مثال على التحويل باستخدام .pipe()

نستخدم هنا .pipe() لأخذ نتيجة العملية الأولى وتحويلها (مثلًا، تحويلها إلى أحرف كبيرة)، ثم تمرير القيمة المحوَّلة إلى معالج .done() النهائي.

function runPipeExample() {
  let dfd = new $.Deferred();

  setTimeout(() => {
    console.log("Initial data ready.");
    dfd.resolve("hello world");
  }, 500);

  dfd.pipe(function(originalData) {
    console.log("Piping: Transforming data...");
    return originalData.toUpperCase(); // Transforms the value
  }).done(function(transformedData) {
    console.log("Final result: " + transformedData);
  });
}

$(document).ready(function() {
  runPipeExample();
});

التركيب باستخدام $.when()

ماذا لو كانت لديكم عدة مهام غير متزامنة مستقلة، لكنكم تحتاجون إلى انتظار اكتمال كلها قبل المتابعة؟ هنا تأتي فائدة $.when().

تتلقى $.when() كائن Deferred واحدًا أو أكثر (أو Promises) كوسائط، وتعيد Deferred جديدًا. ولا يكتمل Deferred الجديد إلا عند اكتمال كل كائنات Deferred المُدخلة.

مثال على المهام المتوازية باستخدام $.when()

نحاكي في هذا المثال طلبي AJAX مستقلين (fetchUser وfetchPosts). ونستخدم $.when() للانتظار حتى اكتمالهما قبل تسجيل النتائج المجمعة.

لاحظوا أنهما يُنفَّذان بالتوازي، لا بالتتابع.

function runWhenExample() {
  function fetchUser() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("User data fetched.");
      dfd.resolve({ id: 1, name: "Alice" });
    }, 800);
    return dfd.promise();
  }

  function fetchPosts() {
    let dfd = new $.Deferred();
    setTimeout(() => {
      console.log("Posts data fetched.");
      dfd.resolve([{ id: 101, title: "Post 1" }, { id: 102, title: "Post 2" }]);
    }, 500);
    return dfd.promise();
  }

  $.when(fetchUser(), fetchPosts())
    .done(function(userData, postsData) {
      console.log("All data loaded!");
      console.log("User: ", userData);
      console.log("Posts: ", postsData);
    })
    .fail(function() {
      console.log("One or more tasks failed.");
    });
}

$(document).ready(function() {
  runWhenExample();
});

الوصول إلى نتائج $.when()

عند اكتمال Deferred الذي تعيده $.when()، تتلقى دوال الاستدعاء .done() أو .then() القيم المكتملة من كل كائنات Deferred المُدخلة كـ وسائط منفصلة، وبالترتيب الذي مُرِّرت به إلى $.when().

يسهّل ذلك جمع البيانات من مصادر متعددة ومعالجتها بعد توفرها جميعًا.

اختبار ربط الوعود

تأملوا مقطع شيفرة jQuery التالي:

let dfd1 = new $.Deferred();
let dfd2 = new $.Deferred();

dfd1.then(function(val) {
  return val + " World";
}).then(function(newVal) {
  console.log(newVal); // Line A
  return dfd2;
}).then(function() {
  console.log("Finished!"); // Line B
});

dfd1.resolve("Hello");
dfd2.resolve();

ما الناتج النهائي المطبوع في وحدة التحكم، وما ترتيبه؟

أجب عليها في الدرس التفاعلي

مراجعة: الربط والتركيب

لقد تعلمنا كيفية إدارة سير العمل غير المتزامن المعقد:

الربط باستخدام .then(): يسلّسل العمليات، ويمرر النتائج من مرحلة إلى التالية.
.pipe(): طريقة أقدم لتحويل القيم أو تعيين كائنات Deferred في سلسلة.
التركيب باستخدام $.when(): ينتظر اكتمال عدة كائنات Deferred مستقلة بالتوازي قبل المتابعة، ويوفر نتائجها كوسائط منفصلة.

تُعد هذه الأنماط أساسية لبناء تطبيقات غير متزامنة قوية وسهلة القراءة.

البدء مجانًا

تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 22
الدروس: 48

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «تسلسل الوعود وتركيبها» مجاني؟

نعم — نص درس «تسلسل الوعود وتركيبها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «تسلسل الوعود وتركيبها»؟

تعلّم تسلسل عمليات غير متزامنة متعددة باستخدام .then() و.pipe()، وتركيب مسارات عمل معقّدة عبر انتظار اكتمال Promises متعددة باستخدام $.when(). تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.

كم من الوقت يستغرق درس «تسلسل الوعود وتركيبها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy