إتقان التكرار غير المتزامن في JavaScript باستخدام Array.fromAsync()

يوليو 27, 2025

🔍 ما هي Array.fromAsync() بالضبط؟

Array.fromAsync() هي دالة static من كائن Array، شبيهة بالدالة Array.from()، لكن الفرق الجوهري هو أن Array.fromAsync() تدعم المعطيات الغير متزامنة: سواء كانت AsyncIterable أو دالة map ترجع Promise. هذه الوظيفة تسهّل التعامل مع البيانات المتدفقة من مصادر خارجية أو مؤجلة زمنياً.

🧪 مثال عملي: التعامل مع Async Generator

في هذا المثال نستخدم async function* لإنتاج أرقام بطريقة غير متزامنة:

async function* fetchValues() {
        for (let i = 1; i <= 3; i++) {
          await new Promise(resolve => setTimeout(resolve, 500)); // محاكاة تأخير زمني
          yield i;
        }
      }

      const result = await Array.fromAsync(fetchValues());
      console.log(result); // [1, 2, 3]

🔁 استخدام Array.fromAsync() مع دالة تحويل Asynchronous

في هذا المثال، نُضاعف كل عنصر في المصفوفة باستخدام دالة async:

const values = [10, 20, 30];

      const doubled = await Array.fromAsync(values, async (num) => {
        await new Promise(resolve => setTimeout(resolve, 300));
        return num * 2;
      });

      console.log(doubled); // [20, 40, 60]

📦 مقارنة مع for await...of

بالرغم من أن for await...of توفر طريقة ممتازة للتعامل مع الـ AsyncIterable، إلا أنها تتطلب كتابة يدوية أكثر:

let output = [];
for await (const item of fetchValues()) {
  output.push(item);
}

بينما Array.fromAsync() تقوم بنفس الوظيفة بسطر واحد أكثر نظافة:

const output = await Array.fromAsync(fetchValues());

💼 حالات استخدام حقيقية

  • معالجة البيانات المسترجعة من API بتأخير زمني
  • جمع نتائج عمليات async مثل تحميل الملفات أو الصور
  • تحويل سلاسل streams إلى مصفوفات مباشرة

⚠️ ملاحظات

  • الدالة Array.fromAsync() ترجع Promise، لذا تأكد من استخدام await أو .then()
  • في حال كنت تستخدم بيئة لا تدعم ES2024 بعد، يمكنك استخدام Babel أو Polyfill.
  • حاول استخدام async map بحذر لتجنب تشغيل كل المهام بالتوازي في حال كانت ثقيلة.

📌 خلاصة

Array.fromAsync() تمثل نقلة نوعية في التفاعل مع البيانات غير المتزامنة في JavaScript. بفضل بساطتها وقوتها، توفر طريقة مرنة وعملية لتجميع البيانات في سيناريوهات كثيرة. إذا كنت تبني تطبيقات تعتمد على الـ APIs، أو التعامل مع تدفقات البيانات (streams)، فهتكون إضافة قوية جداً لمكتبتك كمطور.

المدونة

استدعاء ملفات JavaScript عند الحاجة فقط لتحسين أداء موقعك

يوليو 24, 2025

🧠 يعني إيه Dynamic Import؟ الديناميـك إمبورت ببساطة هو إنك تحمّل ملف أو موديول JavaScript "وقت الحاجة بس" مش من أول الصفحة. الميزة دي بتقلل حجم ال...

الفرق بين Redux, Context & React Components في إدارة الحالة

أغسطس 06, 2025

عند بناء تطبيقات باستخدام React، هناك حاجة إلى إدارة البيانات التي تتغير نتيجة تفاعل المستخدم أو جلب البيانات من مصادر خارجية. توجد ثلاث وسائل رئيسي...

تذكير بالمهام مع Laravel وMongoDB

يونيو 30, 2025

📌 بناء تطبيق تذكير مهام المقال ده بيشرح إزاي نعمل تطبيق Laravel يستخدم MongoDB علشان يذكرك بالمهمات بتاعتك، مع تسجيل دخول، CRUD، وتذكير بالإيميلات...

وقّف نسخ الكود! اتعلم تستخدم Traits في Laravel صح

يوليو 01, 2025

🚫 وقّف نسخ الكود! لو عندك نفس المنطق في كذا Model أو Controller زي Slug أو Logging، Traits في Laravel هتوفر عليك تعب الكتابة والتكرار. 1. إيه هو...

إتقان التحقق الشرطي في Laravel 12

يوليو 07, 2025

إتقان التحقق الشرطي في Laravel&nbsp;12 في Laravel&nbsp;12، نظام التحقق (validation) قوي جدًا، وميزة التحقق الشرطي بتخليك تتحكم في القوانين بتاعتك ب...

Laravel 12.21.0 – تحديث ذكي لتسهيل الاستعلامات والتحقق الصارم للبيانات

أغسطس 03, 2025

أصدرت Laravel النسخة 12.21.0 بمزايا برمجية هامة تساهم في كتابة كود أنظف وأسهل في الصيانة. من أهمها دالة whereValueBetween() الجديدة، بالإضافة إلى...

The Ultimate Managed Hosting Platform