إتقان التكرار غير المتزامن في 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)، فهتكون إضافة قوية جداً لمكتبتك كمطور.
المدونة
يوليو 20, 2025
في Laravel 12، تم تقديم Laravel Context كأداة قوية بتخلي تتبع الطلبات، تسجيل الأخطاء، وتحليل سلوك الوظائف الخلفية أسهل وأدق من أي وقت فات. وده بيحصل ع...
يوليو 06, 2025
📘 شرح تفصيلي لتحديثات ECMAScript 2025 جميع مميزات ECMAScript 2025، مع أمثلة عملية وفهم ليه الميزة دي مهمة لأي مبرمج واجهة أمامية. ١. مجموعات مسما...
أغسطس 03, 2025
أصدرت Laravel النسخة 12.21.0 بمزايا برمجية هامة تساهم في كتابة كود أنظف وأسهل في الصيانة. من أهمها دالة whereValueBetween() الجديدة، بالإضافة إلى...
يوليو 07, 2025
Laravel 12.19: استخدام Attributes تنظّم Query Builder في Laravel 12.19، دلوقتي تقدر تستخدم Attribute اسمه #[UseEloquentBuilder] علشان تحدد Query Bu...
يونيو 29, 2025
إزاي OAuth بيشتغل؟ OAuth هو بروتوكول بيخلّي التطبيقات تقدر تدخل على بياناتك بطريقة آمنة من غير ما تدّيهم الباسورد بتاعك. زي مثلًا لو حبيت تطبيق ينشر...
يوليو 06, 2025
إزاي تستخدم Web Components ببساطة وذكاء كتير من المطورين بيفكروا إن Web Components معمولة عشان تبقى بديل كامل لفريموركات زي React أو Vue. بس الحقيق...