إتقان التكرار غير المتزامن في 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)، فهتكون إضافة قوية جداً لمكتبتك كمطور.

المدونة

كيف تجعل موقعك "سريع جداً" خطوة بخطوة

يوليو 30, 2025

لماذا السرعة ليست رفاهية؟ في زمن الضغط والسرعة، ما فيش حد عنده وقت يستنى موقع يحمّل! المستخدمين على الموبايل بينسحبوا من الموقع إذا ما فتحش في أق...

تجاوز $fillable بأمان باستخدام forceFill() في Laravel

يوليو 02, 2025

تجاوز $fillable بأمان باستخدام forceFill() في Laravel جربت تستخدم create() في Laravel ولاقيت إن حقول زي role أو status مش بتتحفظ؟ ده بسبب حماية Larav...

مقارنة بين Scopes + Traits × UseEloquentBuilder في Laravel

يوليو 13, 2025

في Laravel، بنحتاج دايمًا نكتب استعلامات شبه بعض في أكتر من مكان. Laravel بتوفر طريقتين أساسيين نقدر نستخدمهم علشان نرتّب الاستعلامات دي: Scopes + Tra...

مقارنة CSS: طبقات vs BEM vs Utility Classes

يونيو 26, 2025

مقارنة CSS: Cascade Layers و BEM و Utility Classes المقالة بتتكلّم عن ٣ طرق لإدارة الـ specificity في CSS &ndash; BEM والـ utility‑first classes وك...

هل لارافيل بطيء؟ تحسين أداء الاستعلامات والفهارس بأمثلة

يوليو 20, 2025

دليل عملي ومفصل مع أمثلة واقعية وعينات كود تسهّل عليك تفادي بطء Laravel وتحافظ على سرعة التطبيق. 1. 🧠 استدعي اللي محتاجه بس لو بتعمل DB::tabl...

React Native 0.81: نقلة نوعية في كفاءة بيئة التطوير

يناير 27, 2026

مقدمة يُعد React Native من أكثر الأطر استخدامًا في تطوير تطبيقات الهواتف الذكية متعددة المنصات. ومع ذلك، ظل وقت بناء تطبيقات iOS أحد أكبر التحديا...