জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনাস প্রোগ্রামিং (কলব্যাক, প্রতিশ্রুতি, RxJs)

হাই সব. স্পর্শে ওমেলনিটস্কি সের্গেই। এতদিন আগে, আমি প্রতিক্রিয়াশীল প্রোগ্রামিং-এ একটি স্ট্রিম হোস্ট করেছিলাম, যেখানে আমি জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনি সম্পর্কে কথা বলেছিলাম। আজ আমি এই উপাদান সংক্ষিপ্ত করতে চাই.

কিন্তু আমরা মূল উপাদান শুরু করার আগে, আমাদের একটি ভূমিকা তৈরি করতে হবে। সুতরাং এর সংজ্ঞা দিয়ে শুরু করা যাক: স্ট্যাক এবং সারি কি?

স্ট্যাক এমন একটি সংগ্রহ যার উপাদানগুলি "লাস্ট ইন, ফার্স্ট আউট" LIFO ভিত্তিতে পুনরুদ্ধার করা হয়

মোড় একটি সংগ্রহ যার উপাদান নীতি অনুযায়ী প্রাপ্ত করা হয় (“প্রথম মধ্যে, প্রথম আউট” FIFO

ঠিক আছে, এর চালিয়ে যাওয়া যাক।

জাভাস্ক্রিপ্ট একটি একক-থ্রেডেড প্রোগ্রামিং ভাষা। এর মানে হল যে এটিতে এক্সিকিউশনের একটি মাত্র থ্রেড এবং একটি স্ট্যাক রয়েছে যেখানে ফাংশনগুলি সম্পাদনের জন্য সারিবদ্ধ। অতএব, জাভাস্ক্রিপ্ট একবারে শুধুমাত্র একটি অপারেশন করতে পারে, যখন অন্যান্য অপারেশনগুলি তাদের কল না হওয়া পর্যন্ত স্ট্যাকের উপর তাদের পালা অপেক্ষা করবে।

কল স্ট্যাক একটি ডেটা স্ট্রাকচার যা, সহজ ভাষায়, আমরা যেখানে আছি সেই প্রোগ্রামে সেই জায়গা সম্পর্কে তথ্য রেকর্ড করে। আমরা যদি একটি ফাংশনে ঝাঁপিয়ে পড়ি, তাহলে আমরা এর এন্ট্রিটিকে স্ট্যাকের শীর্ষে ঠেলে দিই। যখন আমরা একটি ফাংশন থেকে ফিরে যাই, তখন আমরা স্ট্যাক থেকে শীর্ষস্থানীয় উপাদানটি পপ করি এবং যেখানে থেকে আমরা এই ফাংশনটিকে কল করি সেখানে শেষ করি। যে সব স্ট্যাক করতে পারেন. এবং এখন একটি খুব আকর্ষণীয় প্রশ্ন। তাহলে কিভাবে জাভাসস্ক্রিপ্টে অ্যাসিঙ্ক্রোনি কাজ করে?

আসলে, স্ট্যাক ছাড়াও, তথাকথিত 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) এখন সেটটাইমআউট(ফাংশন cb1() {… }) কমান্ডে যাওয়া যাক। এটি কল স্ট্যাকের সাথে যোগ করা হয়।

6) setTimeout(function cb1() {… }) কমান্ডটি কার্যকর করা হয়েছে। ব্রাউজারটি একটি টাইমার তৈরি করে যা ওয়েব API এর অংশ। এটি একটি গণনা সঞ্চালন করবে.

7) setTimeout(function cb1() {… }) কমান্ডটি তার কাজ শেষ করেছে এবং কল স্ট্যাক থেকে সরানো হয়েছে।

8) console.log('বাই') কমান্ডটি কল স্ট্যাকের সাথে যোগ করা হয়েছে।

9) console.log('বাই') কমান্ডটি কার্যকর করা হয়েছে।

10) console.log('Bye') কমান্ডটি কল স্ট্যাক থেকে সরানো হয়েছে।

11) কমপক্ষে 5000ms অতিবাহিত হওয়ার পরে, টাইমার শেষ হয় এবং 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 বাস্তবায়নের প্রধান অংশ রয়েছে। এটি একটি পর্যবেক্ষণযোগ্য প্রবাহের সাথে যুক্ত, যা সাবস্ক্রাইব পদ্ধতি ব্যবহার করে সদস্যতা নেওয়া যেতে পারে।

পর্যবেক্ষণযোগ্য আপডেট তৈরি করার জন্য একটি সহায়ক প্রক্রিয়া প্রয়োগ করে, তথাকথিত পর্যবেক্ষক. একজন পর্যবেক্ষকের জন্য মানের উৎস বলা হয় সৃজনকর্তা. এটি একটি অ্যারে, একটি পুনরাবৃত্তিকারী, একটি ওয়েব সকেট, কোনো ধরনের ইভেন্ট ইত্যাদি হতে পারে। সুতরাং আমরা বলতে পারি যে পর্যবেক্ষণযোগ্য হল প্রযোজক এবং পর্যবেক্ষকের মধ্যে একটি পরিবাহী।

পর্যবেক্ষণযোগ্য তিনটি ধরণের পর্যবেক্ষক ইভেন্ট পরিচালনা করে:

• পরবর্তী - নতুন ডেটা
• ত্রুটি - একটি ত্রুটি যদি একটি ব্যতিক্রমের কারণে ক্রমটি বন্ধ হয়ে যায়। এই ঘটনাটি অনুক্রমের সমাপ্তিও বোঝায়।
• সম্পূর্ণ - ক্রম শেষ সম্পর্কে একটি সংকেত। এর মানে আর কোনো নতুন ডেটা থাকবে না

আসুন একটি ডেমো দেখি:

শুরুতে আমরা 1, 2, 3, এবং 1 সেকেন্ড পরে মানগুলি প্রক্রিয়া করব। আমরা 4 পাই এবং আমাদের থ্রেড শেষ করি।

গভীর চিন্তা

এবং তারপর আমি বুঝতে পেরেছি যে এটি সম্পর্কে লেখার চেয়ে বলা আরও আকর্ষণীয়। 😀

চাঁদা

যখন আমরা একটি স্ট্রীম সদস্যতা, আমরা একটি নতুন ক্লাস তৈরি চাঁদা, যা আমাদের পদ্ধতির সাথে সদস্যতা ত্যাগ করার বিকল্প দেয় আনসাবস্ক্রাইব. আমরা পদ্ধতিটি ব্যবহার করে সাবস্ক্রিপশন গ্রুপ করতে পারি যোগ. ওয়েল, এটা যৌক্তিক যে আমরা ব্যবহার করে থ্রেড আনগ্রুপ করতে পারি অপসারণ. যোগ এবং অপসারণ পদ্ধতি ইনপুট হিসাবে একটি ভিন্ন সদস্যতা গ্রহণ করে। আমি নোট করতে চাই যে যখন আমরা সদস্যতা ত্যাগ করি, তখন আমরা সমস্ত চাইল্ড সাবস্ক্রিপশন থেকে আনসাবস্ক্রাইব করি যেন তারা আনসাবস্ক্রাইব পদ্ধতিও বলে। এগিয়ে যান.

প্রবাহের প্রকারভেদ

গরম
ভয়ানক

প্রযোজক পর্যবেক্ষণযোগ্য বাইরে তৈরি করা হয়
প্রযোজক পর্যবেক্ষণযোগ্য ভিতরে তৈরি করা হয়

পর্যবেক্ষণযোগ্য তৈরি করার সময় ডেটা পাস হয়
সাবস্ক্রিপশনের সময় ডেটা দেওয়া হয়।

আনসাবস্ক্রাইব করার জন্য আরও যুক্তির প্রয়োজন
থ্রেড তার নিজের উপর শেষ

এক থেকে একাধিক সম্পর্ক ব্যবহার করে
এক-এক সম্পর্ক ব্যবহার করে

সমস্ত সদস্যতার একই মান আছে
সদস্যতা স্বাধীন

সাবস্ক্রিপশন না থাকলে ডেটা হারিয়ে যেতে পারে
একটি নতুন সাবস্ক্রিপশনের জন্য সমস্ত স্ট্রিম মান পুনরায় জারি করে

একটি উপমা দিতে, আমি একটি সিনেমা একটি সিনেমার মত একটি উত্তপ্ত স্রোত কল্পনা করা হবে. কোন সময়ে এসেছ, সেই মুহূর্ত থেকেই তুমি দেখতে শুরু কর। আমি তাদের মধ্যে একটি কল সঙ্গে একটি ঠান্ডা স্রোত তুলনা করবে. সমর্থন যেকোনো কলার শুরু থেকে শেষ পর্যন্ত উত্তর দেওয়ার মেশিনের রেকর্ডিং শোনে, কিন্তু আপনি আনসাবস্ক্রাইব করে হ্যাং আপ করতে পারেন।

আমি লক্ষ্য করতে চাই যে তথাকথিত উষ্ণ প্রবাহগুলিও রয়েছে (আমি এই জাতীয় সংজ্ঞাটি অত্যন্ত বিরল এবং শুধুমাত্র বিদেশী সম্প্রদায়গুলিতে পূরণ করেছি) - এটি এমন একটি প্রবাহ যা ঠান্ডা স্রোত থেকে গরমে রূপান্তরিত হয়। প্রশ্ন উঠেছে - কোথায় ব্যবহার করবেন)) আমি অনুশীলন থেকে একটি উদাহরণ দেব।

আমি 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

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)
);  

অপারেটর-টেকওয়াইলে

যতক্ষণ না পর্যন্ত মান নির্গত করে, মিথ্যা ফেরত দেয়, তারপর স্ট্রীম থেকে আনসাবস্ক্রাইব করে।

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 কিছুটা promise.all এর মতো। এটি একাধিক প্রবাহকে একত্রিত করে। প্রতিটি থ্রেড কমপক্ষে একটি নির্গত করার পরে, আমরা একটি অ্যারে হিসাবে প্রতিটি থেকে সর্বশেষ মানগুলি পাই। আরও, সম্মিলিত স্ট্রীম থেকে নির্গত হওয়ার পরে, এটি নতুন মান দেবে।

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));

অপারেটর-জিপ

Zip - প্রতিটি স্ট্রিম থেকে একটি মানের জন্য অপেক্ষা করে এবং এই মানগুলির উপর ভিত্তি করে একটি অ্যারে গঠন করে। যদি মান কোন থ্রেড থেকে না আসে, তাহলে গ্রুপ গঠিত হবে না।

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)
);

অপারেটর - ভাগ করুন, আলতো চাপুন

ট্যাপ অপারেটর আপনাকে পার্শ্ব প্রতিক্রিয়া করতে দেয়, অর্থাৎ, ক্রমকে প্রভাবিত করে না এমন কোনো কাজ।

শেয়ার ইউটিলিটি অপারেটর একটি ঠান্ডা স্রোতকে গরম স্রোতে পরিণত করতে পারে।

অপারেটরদের করা হয়. এর সাবজেক্টে যাওয়া যাক।

গভীর চিন্তা

তারপর চা খেতে গেলাম। আমি এই উদাহরণগুলি ক্লান্ত 😀

বিষয় পরিবার

বিষয় পরিবার হট থ্রেড একটি প্রধান উদাহরণ. এই শ্রেণীগুলি হল এক ধরণের হাইব্রিড যা একই সাথে পর্যবেক্ষণযোগ্য এবং পর্যবেক্ষক হিসাবে কাজ করে। যেহেতু বিষয় একটি হট স্ট্রিম, এটি থেকে সদস্যতা ত্যাগ করা আবশ্যক. যদি আমরা প্রধান পদ্ধতি সম্পর্কে কথা বলি, তাহলে এইগুলি হল:

• পরবর্তী - স্ট্রীমে নতুন ডেটা পাস করা
• ত্রুটি - ত্রুটি এবং থ্রেড সমাপ্তি
• সম্পূর্ণ - থ্রেডের শেষ
• সদস্যতা - একটি স্ট্রিম সদস্যতা
• আনসাবস্ক্রাইব - স্ট্রীম থেকে আনসাবস্ক্রাইব করুন
• asObservable - একটি পর্যবেক্ষক মধ্যে রূপান্তর
• প্রতিশ্রুতি - একটি প্রতিশ্রুতিতে রূপান্তরিত হয়

4 5 ধরণের বিষয় বরাদ্দ করুন।

গভীর চিন্তা

আমি স্রোতে 4 বলেছি, কিন্তু দেখা গেল তারা আরও একটি যোগ করেছে। কথায় আছে, বাঁচুন এবং শিখুন।

সরল বিষয় new Subject()- সহজ ধরনের বিষয়। প্যারামিটার ছাড়াই তৈরি করা হয়েছে। সাবস্ক্রিপশনের পরেই যে মানগুলি এসেছে তা পাস করে।

আচরণ বিষয় new BehaviorSubject( defaultData<T> ) - আমার মতে সাবজেক্ট-এর সবচেয়ে সাধারণ প্রকার। ইনপুট ডিফল্ট মান নেয়। সর্বদা সর্বশেষ সংখ্যার ডেটা সংরক্ষণ করে, যা সদস্যতা নেওয়ার সময় প্রেরণ করা হয়। এই শ্রেণীর একটি দরকারী মান পদ্ধতিও রয়েছে যা স্ট্রিমের বর্তমান মান প্রদান করে।

রিপ্লে সাবজেক্ট new ReplaySubject(bufferSize?: number, windowTime?: number) - ঐচ্ছিকভাবে, এটি প্রথম যুক্তি হিসাবে মানগুলির বাফারের আকার নিতে পারে যা এটি নিজের মধ্যে সঞ্চয় করবে, এবং দ্বিতীয়বার যখন আমাদের পরিবর্তনের প্রয়োজন হবে৷

অ্যাসিঙ্ক বিষয় new AsyncSubject() - সাবস্ক্রাইব করার সময় কিছুই ঘটে না, এবং মান সম্পূর্ণ হলেই ফেরত দেওয়া হবে। শুধুমাত্র স্ট্রীমের শেষ মান ফেরত দেওয়া হবে।

ওয়েবসকেট বিষয় new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - ডকুমেন্টেশন এটি সম্পর্কে নীরব এবং আমি নিজেই এটি প্রথমবারের মতো দেখতে পাচ্ছি। সে কি করে কে জানে, লিখুন, আমরা যোগ করব।

ওফ ঠিক আছে, আমরা আজ যা বলতে চেয়েছিলাম তার সবকিছু বিবেচনা করেছি। এই তথ্য সহায়ক ছিল আশা করি. দরকারী তথ্য ট্যাবে আপনি নিজে থেকে সাহিত্যের তালিকা পড়তে পারেন।

সহায়ক তথ্য

• স্ট্রিম লিঙ্ক
• কিভাবে JS কাজ করে: ইঞ্জিনের একটি ওভারভিউ, রানটাইম মেকানিজম, কল স্ট্যাক
• কীভাবে JS কাজ করে: ইভেন্ট লুপ, অ্যাসিঙ্ক এবং অ্যাসিঙ্ক/অপেক্ষা করে আপনার কোড উন্নত করার পাঁচটি উপায়
• কিভাবে ইভেন্ট লুপ জাভাস্ক্রিপ্টে কাজ করে
• অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্টের বিবর্তন
• RxJS কি এবং কেন এটি সম্পর্কে জানা দরকারী
  
• RxJS এর ​​ব্যবহারিক প্রয়োগ
• RxJS অবজারভেবলস টিউটোরিয়াল — তৈরি করা এবং অবজারভেবলে সাবস্ক্রাইব করা
• RXJS: গরম এবং ঠান্ডা পর্যবেক্ষণযোগ্য
• একটি পর্যবেক্ষণযোগ্য তৈরি করার জন্য ক্লাস, ফাংশন। অপারেটর
• উদাহরণ দ্বারা RxJS অপারেটর
• API তালিকা
• RxJS-এ বিষয় এবং সময়সূচির ভিন্নতা

উত্স: www.habr.com