التدفقات القابلة للقراءة
استهلكوا البيانات جزءًا تلو الآخر.
التدفقات القابلة للقراءة درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ما المقصود بالتدفقات؟
تعالج Streams API البيانات تدريجيًا مع وصول الأجزاء، بدلًا من تحميل كل شيء في الذاكرة. ويتيح ذلك التعامل بكفاءة مع التنزيلات الضخمة والفيديو والتغذيات المباشرة.
ReadableStream
إن ReadableStream مصدر تقرأ منه جزءًا بعد جزء. وتوفّرها المتصفحات في استجابات fetch وكائنات الملفات الثنائية وغيرها.
إنشاء تدفق
أنشئه باستخدام كائن مصدر أساسي تعمل فيه start(controller) على إدراج الأجزاء والإشارة إلى اكتمال العملية.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});الحصول على قارئ
تؤمّن getReader() التدفق وتعيد قارئًا. وطوال فترة التأمين، لا يمكن لأي مستهلك آخر قراءته.
const reader = stream.getReader();قراءة الأجزاء
تعيد reader.read() وعدًا يُحل إلى { value, done }. وتصبح done مساوية لـ true عند استنفاد التدفق.
const { value, done } = await reader.read();
console.log(value, done);حلقة القراءة
كرّر استدعاء read() حتى تصبح done مساوية لـ true لاستهلاك التدفق بالكامل.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}تحرير القفل
استدعِ reader.releaseLock() لإلغاء تأمين التدفق حتى يتمكن قارئ آخر من تولّي قراءته.
reader.releaseLock();الطريقة pull
يمكن للمصدر الأساسي تعريف pull(controller)، التي تُستدعى عندما يريد المستهلك مزيدًا من البيانات، مما يتيح التوليد الكسول عند الطلب.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});التكرار غير المتزامن
في البيئات الحديثة، يكون ReadableStream قابلًا للتكرار غير المتزامن، مما يتيح استخدام for await...of بدلًا من حلقة يدوية.
for await (const chunk of stream) {
console.log(chunk);
}إلغاء تدفق
يوقف reader.cancel(reason) التدفق مبكرًا ويحرر الموارد، وهو أمر مهم لإلغاء التنزيلات الكبيرة.
await reader.cancel("user navigated away");tee: تقسيم تدفق
يعيد tee() تدفقين يتلقى كل منهما نسخة من كل جزء، وهو مفيد لقراءة البيانات مرتين، مثلًا للتخزين المؤقت والعرض.
const [a, b] = stream.tee();
// read a and b independentlyتحقق سريع
اختبر التدفقات القابلة للقراءة.
مراجعة: التدفقات القابلة للقراءة
أنشأت ReadableStream، وحصلت على قارئ، واستهلكت الأجزاء باستخدام read() في حلقة، وحررت القفل، واستخدمت pull للبيانات الكسولة، وكررت باستخدام for await، وقسمت التدفق باستخدام tee(). التالي: تدفق استجابات fetch.
الأسئلة الشائعة
هل درس «التدفقات القابلة للقراءة» مجاني؟
نعم — نص درس «التدفقات القابلة للقراءة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «التدفقات القابلة للقراءة»؟
استهلكوا البيانات جزءًا تلو الآخر. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «التدفقات القابلة للقراءة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- التدفقات القابلة للقراءة
- استجابات fetch المتدفقة
- تدفقات التحويل
- الضغط العكسي وتمرير التدفقات