جاوا اسکرپٹ میں غیر مطابقت پذیر پروگرامنگ (کال بیک، وعدہ، RxJs)

سب کو سلام. Sergey Omelnitsky رابطے میں ہے۔ کچھ عرصہ پہلے میں نے ری ایکٹیو پروگرامنگ پر ایک اسٹریم کی میزبانی کی تھی، جہاں میں نے جاوا اسکرپٹ میں غیر مطابقت کے بارے میں بات کی تھی۔ آج میں اس مواد پر نوٹس لینا چاہوں گا۔

لیکن اس سے پہلے کہ ہم مرکزی مواد کو شروع کریں، ہمیں ایک تعارفی نوٹ بنانے کی ضرورت ہے۔ تو آئیے تعریفوں کے ساتھ شروع کریں: اسٹیک اور قطار کیا ہے؟

اسٹیک ایک ایسا مجموعہ ہے جس کے عناصر آخری میں، فرسٹ آؤٹ LIFO کی بنیاد پر حاصل کیے جاتے ہیں۔

قطار۔ ایک مجموعہ ہے جس کے عناصر فرسٹ ان، فرسٹ آؤٹ FIFO کی بنیاد پر حاصل کیے جاتے ہیں۔

ٹھیک ہے، چلو جاری رکھیں۔

JavaScript ایک واحد تھریڈڈ پروگرامنگ زبان ہے۔ اس کا مطلب یہ ہے کہ عمل درآمد کا صرف ایک دھاگہ ہے اور ایک اسٹیک ہے جس پر عمل درآمد کے لیے فنکشنز قطار میں ہیں۔ لہذا، JavaScript ایک وقت میں صرف ایک آپریشن کر سکتا ہے، جبکہ دیگر آپریشنز اسٹیک پر اپنی باری کا انتظار کریں گے جب تک کہ انہیں کال نہیں کیا جاتا ہے۔

کال اسٹیک ایک ڈیٹا ڈھانچہ ہے جو، سادہ الفاظ میں، پروگرام میں اس جگہ کے بارے میں معلومات کو ریکارڈ کرتا ہے جہاں ہم ہیں۔ اگر ہم کسی فنکشن میں داخل ہوتے ہیں تو ہم اس کے اندراج کو اسٹیک کے اوپری حصے میں دھکیل دیتے ہیں۔ جب ہم کسی فنکشن سے واپس آتے ہیں تو ہم اسٹیک سے سب سے اوپر والے عنصر کو پاپ کرتے ہیں اور جہاں ہم نے فنکشن کا نام دیا تھا وہاں پر ختم ہوتا ہے۔ یہ وہ سب ہے جو اسٹیک کر سکتا ہے۔ اور اب ایک انتہائی دلچسپ سوال۔ پھر جاوا اسکرپٹ میں غیر مطابقت پذیری کیسے کام کرتی ہے؟

درحقیقت، اسٹیک کے علاوہ، نام نہاد WebAPI کے ساتھ کام کرنے کے لیے براؤزرز کی ایک خاص قطار ہوتی ہے۔ اس قطار میں موجود فنکشنز اسٹیک کے مکمل طور پر صاف ہونے کے بعد ہی ترتیب سے چلائے جائیں گے۔ اس کے بعد ہی انہیں قطار سے اسٹیک پر پھانسی کے لیے دھکیل دیا جاتا ہے۔ اگر اس وقت اسٹیک پر کم از کم ایک عنصر موجود ہے، تو انہیں اسٹیک میں شامل نہیں کیا جا سکتا۔ یہ خاص طور پر اس کی وجہ سے ہے کہ ٹائم آؤٹ کے ذریعہ فنکشن کو کال کرنا اکثر وقت کے مطابق نہیں ہوتا ہے، کیونکہ فنکشن قطار سے اسٹیک تک نہیں جا سکتا جب تک یہ بھرا ہوا ہو۔

آئیے درج ذیل مثال کو دیکھیں اور اس کے مرحلہ وار نفاذ کے ساتھ شروع کریں۔ آئیے یہ بھی دیکھتے ہیں کہ سسٹم میں کیا ہوتا ہے۔

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

1) ابھی تک کچھ نہیں ہو رہا ہے۔ براؤزر کنسول صاف ہے، کال اسٹیک خالی ہے۔

2) پھر console.log('Hi') کمانڈ کال اسٹیک میں شامل کی جاتی ہے۔

3) اور یہ پورا ہوتا ہے۔

4) پھر console.log('Hi') کو کال اسٹیک سے ہٹا دیا جاتا ہے۔

5) اب کمانڈ پر جائیں setTimeout(function cb1() {… })۔ اسے کال اسٹیک میں شامل کیا جاتا ہے۔

6) setTimeout(function cb1() {… }) کمانڈ پر عمل کیا جاتا ہے۔ براؤزر ایک ٹائمر بناتا ہے جو ویب API کا حصہ ہے۔ یہ الٹی گنتی انجام دے گا۔

7) setTimeout(function cb1() {... }) کمانڈ نے اپنا کام مکمل کر لیا ہے اور کال اسٹیک سے ہٹا دیا گیا ہے۔

8) کمانڈ console.log('Bye') کو کال اسٹیک میں شامل کیا گیا ہے۔

9) console.log('Bye') کمانڈ کو عمل میں لایا گیا ہے۔

10) کمانڈ console.log('Bye') کو کال اسٹیک سے ہٹا دیا گیا ہے۔

11) کم از کم 5000 ms گزر جانے کے بعد، ٹائمر ختم ہو جاتا ہے اور کال بیک cb1 کو کال بیک قطار میں رکھتا ہے۔

12) ایونٹ لوپ کال بیک قطار سے فنکشن cb1 لیتا ہے اور اسے کال اسٹیک پر رکھتا ہے۔

13) فنکشن cb1 کو مکمل کیا جاتا ہے اور console.log('cb1') کو کال اسٹیک میں شامل کرتا ہے۔

14) console.log('cb1') کمانڈ کو عمل میں لایا گیا ہے۔

15) کمانڈ console.log('cb1') کو کال اسٹیک سے ہٹا دیا گیا ہے۔

16) فنکشن cb1 کال اسٹیک سے ہٹا دیا گیا ہے۔

آئیے ڈائنامکس میں ایک مثال دیکھتے ہیں:

ٹھیک ہے، ہم نے دیکھا کہ جاوا اسکرپٹ میں کیسے غیر مطابقت پذیری کو لاگو کیا جاتا ہے۔ اب آئیے غیر مطابقت پذیر کوڈ کے ارتقاء کے بارے میں مختصراً بات کرتے ہیں۔

غیر مطابقت پذیر کوڈ کا ارتقاء۔

a(function (resultsFromA) {
    b(resultsFromA, function (resultsFromB) {
        c(resultsFromB, function (resultsFromC) {
            d(resultsFromC, function (resultsFromD) {
                e(resultsFromD, function (resultsFromE) {
                    f(resultsFromE, function (resultsFromF) {
                        console.log(resultsFromF);
                    })
                })
            })
        })
    })
});

غیر مطابقت پذیر پروگرامنگ جیسا کہ ہم اسے جاوا اسکرپٹ میں جانتے ہیں صرف فنکشنز کے ذریعے لاگو کیا جا سکتا ہے۔ انہیں کسی دوسرے متغیر کی طرح دوسرے افعال میں منتقل کیا جا سکتا ہے۔ اس طرح کال بیکس نے جنم لیا۔ اور یہ ٹھنڈا، مزہ اور چنچل ہے، یہاں تک کہ یہ اداسی، اداسی اور اداسی میں بدل جائے۔ کیوں؟ یہ آسان ہے:

• جیسے جیسے کوڈ کی پیچیدگی بڑھتی ہے، پروجیکٹ تیزی سے غیر واضح، بار بار نیسٹڈ بلاکس - "کال بیک ہیل" میں بدل جاتا ہے۔
• غلطی کو سنبھالنا آسان ہوسکتا ہے۔
• آپ واپسی کے ساتھ اظہار واپس نہیں کر سکتے ہیں۔

وعدے کی آمد سے حالات قدرے بہتر ہو گئے۔

new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 2000);

}).then((result) => {
    alert(result);
    return result + 2;

}).then((result) => {
    throw new Error('FAILED HERE');
    alert(result);
    return result + 2;

}).then((result) => {
    alert(result);
    return result + 2;

}).catch((e) => {
    console.log('error: ', e);
});

• وعدہ کی زنجیریں نمودار ہوئیں، جس نے کوڈ پڑھنے کی اہلیت کو بہتر بنایا
• غلطیوں کو پکڑنے کا ایک الگ طریقہ سامنے آیا ہے۔
• Promise.all کا استعمال کرتے ہوئے متوازی عمل درآمد کا امکان شامل کیا گیا۔
• ہم async/await کا استعمال کرتے ہوئے نیسٹڈ غیر مطابقت پذیری کو حل کر سکتے ہیں۔

لیکن وعدوں کی اپنی حدود ہوتی ہیں۔ مثال کے طور پر، دف کے ساتھ رقص کیے بغیر کوئی وعدہ منسوخ نہیں کیا جا سکتا، اور سب سے اہم بات یہ ہے کہ یہ ایک قدر کے ساتھ کام کرتا ہے۔

ٹھیک ہے، ہم نے آسانی سے رد عمل والے پروگرامنگ سے رابطہ کیا ہے۔ تھکا ہوا؟ ٹھیک ہے، خوش قسمتی سے، آپ چائے بنانے جا سکتے ہیں، اس کے بارے میں سوچ سکتے ہیں اور مزید پڑھنے کے لیے واپس آ سکتے ہیں۔ اور جاری رکھوں گا۔

ری ایکٹو پروگرامنگ ایک پروگرامنگ پیراڈائم ہے جو ڈیٹا کے بہاؤ اور تبدیلی کی تبلیغ پر مرکوز ہے۔ آئیے اس پر گہری نظر ڈالیں کہ ڈیٹا سٹریم کیا ہے۔

// Получаем ссылку на элемент
const input = ducument.querySelector('input');

const eventsArray = [];

// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
    event => eventsArray.push(event)
);

آئیے تصور کریں کہ ہمارے پاس ایک ان پٹ فیلڈ ہے۔ ہم ایک اری بنا رہے ہیں اور ان پٹ ایونٹ کے ہر کلیدی اپ کے لیے ہم ایونٹ کو اپنی صف میں اسٹور کریں گے۔ ایک ہی وقت میں، میں یہ نوٹ کرنا چاہوں گا کہ ہماری صف کو وقت کے لحاظ سے ترتیب دیا گیا ہے، یعنی بعد کے واقعات کا اشاریہ پہلے والے واقعات کے اشاریہ سے بڑا ہے۔ اس طرح کی صف ڈیٹا کے بہاؤ کا ایک آسان ماڈل ہے، لیکن یہ ابھی تک بہاؤ نہیں ہے۔ اس صف کو محفوظ طریقے سے سٹریم کہلانے کے لیے، اسے کسی نہ کسی طرح سبسکرائبرز کو مطلع کرنے کے قابل ہونا چاہیے کہ اس میں نیا ڈیٹا آ گیا ہے۔ اس طرح ہم بہاؤ کی تعریف پر آتے ہیں۔

ڈیٹا اسٹریم

const { interval } = Rx;
const { take } = RxOperators;

interval(1000).pipe(
    take(4)
)

بہاؤ وقت کے لحاظ سے ترتیب کردہ ڈیٹا کی ایک صف ہے جو اس بات کی نشاندہی کر سکتی ہے کہ ڈیٹا تبدیل ہو گیا ہے۔ اب تصور کریں کہ کوڈ لکھنا کتنا آسان ہو جاتا ہے جس میں ایک عمل کوڈ کے مختلف حصوں میں کئی واقعات کو کال کرنے کی ضرورت ہوتی ہے۔ ہم صرف اس سلسلے کو سبسکرائب کرتے ہیں اور تبدیلیاں ہونے پر یہ ہمیں مطلع کرے گا۔ اور RxJs لائبریری یہ کر سکتی ہے۔

RxJS قابل مشاہدہ ترتیب کا استعمال کرتے ہوئے غیر مطابقت پذیر اور ایونٹ پر مبنی پروگراموں کے ساتھ کام کرنے کے لیے ایک لائبریری ہے۔ لائبریری ایک بنیادی قسم فراہم کرتی ہے۔ قابل دیدکئی معاون اقسام (مبصر، نظام الاوقات، مضامین(نقشہ، فلٹر، کم، ہر اور JavaScript Array سے ملتے جلتے ہیں)۔

آئیے اس لائبریری کے بنیادی تصورات کو سمجھتے ہیں۔

قابل مشاہدہ، مشاہدہ کرنے والا، پروڈیوسر

قابل مشاہدہ پہلی بنیادی قسم ہے جسے ہم دیکھیں گے۔ اس کلاس میں RxJs کے نفاذ کا اہم حصہ شامل ہے۔ یہ ایک قابل مشاہدہ سلسلہ سے منسلک ہے، جسے سبسکرائب کرنے کا طریقہ استعمال کرتے ہوئے سبسکرائب کیا جا سکتا ہے۔

قابل مشاہدہ اپ ڈیٹس بنانے کے لیے ایک مددگار طریقہ کار نافذ کرتا ہے، جسے نام نہاد کہا جاتا ہے۔ آبزرور. مبصر کے لیے اقدار کا ماخذ کہا جاتا ہے۔ پروڈیوسر. یہ ایک صف، تکرار کرنے والا، ویب ساکٹ، کسی قسم کا واقعہ، وغیرہ ہوسکتا ہے۔ لہذا ہم کہہ سکتے ہیں کہ قابل مشاہدہ پروڈیوسر اور آبزرور کے درمیان ایک موصل ہے۔

قابل مشاہدہ مبصر واقعات کی تین اقسام کو ہینڈل کرتا ہے:

• اگلا - نیا ڈیٹا
• غلطی - ایک غلطی اگر ترتیب کسی استثناء کی وجہ سے ختم ہو جائے۔ یہ واقعہ ترتیب کی تکمیل کو بھی ظاہر کرتا ہے۔
• مکمل - تسلسل کی تکمیل کے بارے میں سگنل۔ اس کا مطلب ہے کہ مزید کوئی نیا ڈیٹا نہیں ہوگا۔

آئیے ڈیمو دیکھتے ہیں:

شروع میں ہم 1، 2، 3 اور 1 سیکنڈ کے بعد ویلیو پر کارروائی کریں گے۔ ہمیں 4 ملے گا اور ہمارا سلسلہ ختم ہو جائے گا۔

اونچی آواز میں سوچنا

اور پھر میں نے محسوس کیا کہ اسے بتانا اس کے بارے میں لکھنے سے زیادہ دلچسپ ہے۔ 😀

سب سکریپشن

جب ہم کسی سلسلہ کو سبسکرائب کرتے ہیں تو ہم ایک نئی کلاس بناتے ہیں۔ سبسکرائبجو ہمیں طریقہ استعمال کرکے ان سبسکرائب کرنے کی صلاحیت فراہم کرتا ہے۔ رکنیت ختم. ہم طریقہ استعمال کرتے ہوئے گروپ سبسکرپشنز بھی کر سکتے ہیں۔ شامل کریں. ٹھیک ہے، یہ منطقی ہے کہ ہم استعمال کرتے ہوئے تھریڈز کو غیر گروپ کر سکتے ہیں۔ ہٹا. شامل کرنے اور ہٹانے کے طریقے دوسری رکنیت کو بطور ان پٹ قبول کرتے ہیں۔ میں نوٹ کرنا چاہوں گا کہ جب ہم اَن سبسکرائب کرتے ہیں، تو ہم تمام چائلڈ سبسکرپشنز سے اَن سبسکرائب کرتے ہیں گویا اُنہوں نے اَن سبسکرائب کا طریقہ کہا ہے۔ آگے بڑھو.

ندیوں کی اقسام

HOT
ٹھنڈا

پروڈیوسر قابل مشاہدہ باہر بنایا گیا ہے۔
پروڈیوسر قابل مشاہدہ کے اندر بنایا گیا ہے۔

قابل مشاہدہ بننے کے وقت ڈیٹا کو منتقل کیا جاتا ہے۔
سبسکرپشن کے وقت ڈیٹا فراہم کیا جاتا ہے۔

رکنیت ختم کرنے کے لیے اضافی منطق کی ضرورت ہے۔
دھاگہ خود ہی ختم ہو جاتا ہے۔

ایک سے کئی رشتہ استعمال کرتا ہے۔
ون ٹو ون رشتہ استعمال کرتا ہے۔

تمام سبسکرپشنز کا ایک ہی مطلب ہے۔
سبسکرپشنز آزاد ہیں۔

اگر آپ کے پاس رکنیت نہیں ہے تو ڈیٹا ضائع ہو سکتا ہے۔
نئی سبسکرپشن کے لیے تمام سٹریم ویلیوز کو دوبارہ جاری کرتا ہے۔

ایک تشبیہ دینے کے لئے، میں ایک تھیٹر میں ایک فلم کے طور پر ایک گرم ندی کے بارے میں سوچوں گا. جس وقت آپ پہنچے، اسی لمحے سے آپ نے دیکھنا شروع کر دیا۔ میں سرد بہاؤ کا موازنہ ٹیک میں کال سے کروں گا۔ حمایت کوئی بھی کالر شروع سے آخر تک صوتی میل کی ریکارڈنگ کو سنتا ہے، لیکن آپ اَن سبسکرائب کر کے ہینگ اپ کر سکتے ہیں۔

میں نوٹ کرنا چاہوں گا کہ نام نہاد گرم بہاؤ بھی ہیں (میں نے اس تعریف کو بہت کم اور صرف غیر ملکی کمیونٹیوں میں دیکھا ہے) - یہ ایک ایسا بہاؤ ہے جو سرد بہاؤ سے گرم بہاؤ میں بدل جاتا ہے۔ سوال پیدا ہوتا ہے - کہاں استعمال کرنا ہے)) میں مشق سے ایک مثال دوں گا۔

میں Angular کے ساتھ کام کر رہا ہوں۔ وہ فعال طور پر rxjs استعمال کرتا ہے۔ سرور پر ڈیٹا وصول کرنے کے لیے، میں ایک ٹھنڈے دھاگے کی توقع کرتا ہوں اور asyncPipe کا استعمال کرتے ہوئے اس دھاگے کو ٹیمپلیٹ میں استعمال کرتا ہوں۔ اگر میں اس پائپ کو کئی بار استعمال کرتا ہوں، تو، ٹھنڈے دھارے کی تعریف پر واپس آتے ہوئے، ہر پائپ سرور سے ڈیٹا کی درخواست کرے گا، جو کہ کم از کم کہنا عجیب ہے۔ اور اگر میں ایک سرد ندی کو گرم میں تبدیل کر دوں تو درخواست ایک بار ہو گی۔

عام طور پر، ابتدائی افراد کے لیے بہاؤ کی قسم کو سمجھنا کافی مشکل ہے، لیکن اہم ہے۔

آپریٹرز

return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
    .pipe(
        tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
        map(({ data }: TradeCompanyList) => data)
    );

آپریٹرز ہمیں اسٹریمز کے ساتھ کام کرنے کی ہماری صلاحیت کو بڑھانے کی صلاحیت فراہم کرتے ہیں۔ وہ آبزرویبل میں ہونے والے واقعات کو کنٹرول کرنے میں مدد کرتے ہیں۔ ہم چند سب سے زیادہ مقبول پر نظر ڈالیں گے، اور آپریٹرز کے بارے میں مزید تفصیلات مفید معلومات میں موجود لنکس کا استعمال کرتے ہوئے مل سکتی ہیں۔

آپریٹرز - کے

کے معاون آپریٹر کے ساتھ شروع کرتے ہیں. یہ ایک سادہ قدر کی بنیاد پر قابل مشاہدہ بناتا ہے۔

آپریٹرز - فلٹر

فلٹر آپریٹر، جیسا کہ نام سے پتہ چلتا ہے، اسٹریم سگنل کو فلٹر کرتا ہے۔ اگر آپریٹر صحیح لوٹتا ہے، تو یہ مزید چھوٹ جاتا ہے۔

آپریٹرز - لے لو

take — ایمیٹرز کی تعداد کی قدر لیتا ہے، جس کے بعد دھاگہ ختم ہو جاتا ہے۔

آپریٹرز - ڈیباؤنس ٹائم

debounceTime - خارج شدہ اقدار کو خارج کرتا ہے جو آؤٹ پٹ کے درمیان مخصوص وقت کے وقفے میں آتی ہیں - وقت کا وقفہ گزر جانے کے بعد، آخری قدر خارج کرتا ہے۔

const { Observable } = Rx;
const { debounceTime, take } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);

 // Испускаем значение раз в 1500мс
  setInterval(() => {
    observer.next(i++)
  }, 1500);
}).pipe(
  debounceTime(700),  // Ожидаем 700мс значения прежде чем обработать
  take(3)
);  

آپریٹرز - takeWhile

اقدار کو خارج کرتا ہے جب تک کہ takeWhile غلط واپس نہیں آتا، جس کے بعد یہ تھریڈ سے ان سبسکرائب کرتا ہے۔

const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  observer.next(i++);
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++)
  }, 1000);
}).pipe(
  takeWhile( producer =>  producer < 5 )
);  

آپریٹرز - تازہ ترین کو یکجا کریں۔

CombineLatest آپریٹر کچھ حد تک وعدے سے ملتا جلتا ہے۔ یہ متعدد دھاگوں کو ایک میں جوڑتا ہے۔ ہر تھریڈ کے کم از کم ایک اخراج کے بعد، ہم ہر ایک سے ایک صف کی شکل میں تازہ ترین اقدار حاصل کرتے ہیں۔ مزید، ضم شدہ اسٹریمز سے کسی بھی اخراج کے بعد، یہ نئی قدریں دے گا۔

const { combineLatest, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750мс
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

combineLatest(observer_1, observer_2).pipe(take(5));

آپریٹرز - زپ

زپ - ہر تھریڈ سے ایک قدر کا انتظار کرتا ہے اور ان اقدار کی بنیاد پر ایک صف بناتا ہے۔ اگر کسی دھاگے سے قدر نہ آئے تو گروپ نہیں بنے گا۔

const { zip, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
});

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
});

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
});

zip(observer_1, observer_2, observer_3).pipe(take(5));

آپریٹرز - forkJoin

forkJoin تھریڈز کو بھی جوائن کرتا ہے، لیکن یہ صرف ایک ویلیو خارج کرتا ہے جب تمام تھریڈز مکمل ہوتے ہیں۔

const { forkJoin, Observable } = Rx;
const { take } = RxOperators;

const observer_1 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next('a: ' + i++);
  }, 1000);
}).pipe(take(3));

const observer_2 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 750
  setInterval(() => {
    observer.next('b: ' + i++);
  }, 750);
}).pipe(take(5));

const observer_3 = Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 500
  setInterval(() => {
    observer.next('c: ' + i++);
  }, 500);
}).pipe(take(4));

forkJoin(observer_1, observer_2, observer_3);

آپریٹرز - نقشہ

نقشہ کی تبدیلی کا آپریٹر ایمیٹر ویلیو کو ایک نئی میں تبدیل کرتا ہے۔

const {  Observable } = Rx;
const { take, map } = RxOperators;

Observable.create((observer) => {
  let i = 1;
  // Испускаем значение раз в 1000мс
  setInterval(() => {
    observer.next(i++);
  }, 1000);
}).pipe(
  map(x => x * 10),
  take(3)
);

آپریٹرز - شیئر کریں، ٹیپ کریں۔

ٹیپ آپریٹر آپ کو ضمنی اثرات کرنے کی اجازت دیتا ہے، یعنی کوئی بھی ایسی کارروائی جو ترتیب کو متاثر نہ کرے۔

شیئر یوٹیلیٹی آپریٹر سرد ندی کو گرم میں بدل سکتا ہے۔

ہم آپریٹرز کے ساتھ کام کر چکے ہیں۔ آئیے سبجیکٹ کی طرف چلتے ہیں۔

اونچی آواز میں سوچنا

اور پھر میں چائے پینے چلا گیا۔ میں ان مثالوں سے تھک گیا ہوں 😀

سبجیکٹ فیملی

موضوع خاندان گرم بہاؤ کی ایک اہم مثال ہے۔ یہ کلاسیں ایک قسم کی ہائبرڈ ہیں جو بیک وقت قابل مشاہدہ اور مبصر کے طور پر کام کرتی ہیں۔ چونکہ موضوع ایک گرم تھریڈ ہے اس لیے اس سے رکنیت ختم کرنا ضروری ہے۔ اگر ہم اہم طریقوں کے بارے میں بات کرتے ہیں، تو یہ ہیں:

• اگلا - اسٹریم میں نئے ڈیٹا کی منتقلی۔
• غلطی - غلطی اور دھاگے کا خاتمہ
• مکمل - دھاگے کی تکمیل
• سبسکرائب کریں - ایک سلسلہ کو سبسکرائب کریں۔
• ان سبسکرائب کریں - اسٹریم سے ان سبسکرائب کریں۔
• as Observable - ایک مبصر میں تبدیل
• toPromise - ایک وعدے میں بدل جاتا ہے۔

مضامین کی 4 اقسام ہیں۔

اونچی آواز میں سوچنا

سٹریم پر 4 لوگ بات کر رہے تھے، لیکن پتہ چلا کہ انہوں نے ایک اور کا اضافہ کر دیا۔ جیسا کہ وہ کہتے ہیں، جیو اور سیکھو۔

سادہ مضمون new Subject()- مضامین کی سب سے آسان قسم۔ پیرامیٹرز کے بغیر بنایا گیا۔ صرف سبسکرپشن کے بعد موصول ہونے والی اقدار کو منتقل کرتا ہے۔

برتاؤ کا مضمون new BehaviorSubject( defaultData<T> ) - میری رائے میں، موضوع کی سب سے عام قسم۔ ان پٹ ڈیفالٹ قدر لیتا ہے۔ آخری شمارے کا ڈیٹا ہمیشہ محفوظ کرتا ہے، جو سبسکرائب کرتے وقت منتقل ہوتا ہے۔ اس کلاس میں ایک مفید قدر کا طریقہ بھی ہے، جو سٹریم کی موجودہ قدر واپس کرتا ہے۔

ری پلے سبجیکٹ new ReplaySubject(bufferSize?: number, windowTime?: number) - ان پٹ اختیاری طور پر پہلی دلیل کے طور پر اقدار کے بفر کے سائز کو لے سکتا ہے جسے یہ اپنے آپ میں ذخیرہ کرے گا، اور دوسرے وقت کے طور پر جس کے دوران ہمیں تبدیلیوں کی ضرورت ہے۔

AsyncSubject new AsyncSubject() - سبسکرائب کرنے پر کچھ نہیں ہوتا، اور قیمت صرف مکمل ہونے پر واپس کی جائے گی۔ سلسلہ کی صرف آخری قدر واپس کی جائے گی۔

ویب ساکٹ سبجیکٹ new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - دستاویزات اس کے بارے میں خاموش ہیں اور میں اسے پہلی بار دیکھ رہا ہوں۔ اگر کوئی جانتا ہے کہ وہ کیا کرتا ہے تو براہ کرم لکھیں اور ہم اسے شامل کریں گے۔

افف ٹھیک ہے، ہم نے ہر وہ چیز کا احاطہ کیا ہے جو میں آج آپ کو بتانا چاہتا تھا۔ مجھے امید ہے کہ یہ معلومات مفید تھی۔ آپ مفید معلومات والے ٹیب میں حوالہ جات کی فہرست خود پڑھ سکتے ہیں۔

مفید معلومات

• سلسلہ سے لنک کریں۔
• جے ایس کیسے کام کرتا ہے: انجن کا جائزہ، رن ٹائم میکانزم، کال اسٹیک
• جے ایس کیسے کام کرتا ہے: ایونٹ لوپ، اسینکرونی، اور async/انتظار کے ساتھ اپنے کوڈ کو بہتر بنانے کے پانچ طریقے
• جاوا اسکرپٹ میں ایونٹ لوپ کیسے کام کرتا ہے۔
• غیر مطابقت پذیر جاوا اسکرپٹ کا ارتقاء
• RxJS کیا ہے اور اس کے بارے میں جاننا کیوں مفید ہے؟
  
• RxJS کا عملی اطلاق
• RxJS آبزرویبلز ٹیوٹوریل - آبزرویبلز بنانا اور سبسکرائب کرنا
• RXJS: گرم اور سرد مشاہدات
• کلاسز، قابل مشاہدہ بنانے کے لیے افعال۔ آپریٹرز
• مثال کے طور پر RxJS آپریٹرز
• API کی فہرست۔
• RxJS میں موضوع اور نظام الاوقات کی اقسام

ماخذ: www.habr.com