JavaScript માં અસુમેળ પ્રોગ્રામિંગ (કૉલબેક, પ્રોમિસ, RxJs)

કેમ છો બધા. Omelnitsky Sergey સંપર્કમાં. થોડા સમય પહેલા, મેં રિએક્ટિવ પ્રોગ્રામિંગ પર એક સ્ટ્રીમ હોસ્ટ કરી હતી, જ્યાં મેં JavaScript માં અસિંક્રોની વિશે વાત કરી હતી. આજે હું આ સામગ્રીનો સારાંશ આપવા માંગુ છું.

પરંતુ આપણે મુખ્ય સામગ્રી શરૂ કરતા પહેલા, આપણે પરિચય બનાવવાની જરૂર છે. તો ચાલો વ્યાખ્યાઓથી શરૂઆત કરીએ: સ્ટેક અને કતાર શું છે?

સ્ટેક એક એવો સંગ્રહ છે કે જેના તત્વો "લાસ્ટ ઇન, ફર્સ્ટ આઉટ" 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) ઓછામાં ઓછા 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);
                    })
                })
            })
        })
    })
});

અસિંક્રોનસ પ્રોગ્રામિંગ જેમ આપણે જાણીએ છીએ તે JavaScript માં ફંકશન સાથે જ કરી શકાય છે. તેઓ અન્ય ચલોની જેમ અન્ય કાર્યોમાં પસાર કરી શકાય છે. આ રીતે કોલબેકનો જન્મ થયો. અને તે ઉદાસી, ખિન્નતા અને ઉદાસીમાં ફેરવાય ત્યાં સુધી તે ઠંડી, મનોરંજક અને ઉત્સાહી છે. શા માટે? હા, તે સરળ છે:

• જેમ જેમ કોડની જટિલતા વધે છે તેમ, પ્રોજેક્ટ ઝડપથી અસ્પષ્ટ બહુવિધ નેસ્ટેડ બ્લોક્સમાં ફેરવાય છે - "કોલબેક હેલ".
• ભૂલ હેન્ડલિંગ સરળતાથી અવગણી શકાય છે.
• તમે વળતર સાથે અભિવ્યક્તિઓ પરત કરી શકતા નથી.

પ્રોમિસના આગમનથી સ્થિતિ થોડી સારી બની છે.

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 એરેમાંથી સમાન).

ચાલો આ પુસ્તકાલયના મૂળભૂત ખ્યાલોને સમજીએ.

અવલોકનક્ષમ, નિરીક્ષક, નિર્માતા

અવલોકનક્ષમ એ પ્રથમ આધાર પ્રકાર છે જે આપણે જોઈશું. આ વર્ગમાં RxJs અમલીકરણનો મુખ્ય ભાગ છે. તે અવલોકનક્ષમ સ્ટ્રીમ સાથે સંકળાયેલ છે, જે સબસ્ક્રાઇબ પદ્ધતિનો ઉપયોગ કરીને સબ્સ્ક્રાઇબ કરી શકાય છે.

અવલોકનક્ષમ અપડેટ્સ બનાવવા માટે સહાયક મિકેનિઝમ લાગુ કરે છે, કહેવાતા ધી ઓબ્ઝર્વર. નિરીક્ષક માટે મૂલ્યોનો સ્ત્રોત કહેવામાં આવે છે નિર્માતા. તે એરે, ઇટરરેટર, વેબ સોકેટ, અમુક પ્રકારની ઇવેન્ટ વગેરે હોઈ શકે છે. તેથી આપણે કહી શકીએ કે અવલોકનક્ષમ એ નિર્માતા અને નિરીક્ષક વચ્ચે વાહક છે.

અવલોકનક્ષમ ત્રણ પ્રકારની ઓબ્ઝર્વર ઇવેન્ટ્સને હેન્ડલ કરે છે:

• આગામી - નવો ડેટા
• ભૂલ - જો અપવાદને કારણે ક્રમ સમાપ્ત થાય તો ભૂલ. આ ઘટના ક્રમનો અંત પણ સૂચવે છે.
• પૂર્ણ - ક્રમના અંત વિશેનો સંકેત. આનો અર્થ એ છે કે હવે કોઈ નવો ડેટા રહેશે નહીં

ચાલો એક ડેમો જોઈએ:

શરૂઆતમાં આપણે 1, 2, 3 અને 1 સેકન્ડ પછી મૂલ્યો પર પ્રક્રિયા કરીશું. આપણને 4 મળે છે અને આપણો થ્રેડ સમાપ્ત થાય છે.

મોટેથી વિચારવું

અને પછી મને સમજાયું કે તેના વિશે લખવા કરતાં કહેવું વધુ રસપ્રદ છે. 😀

ઉમેદવારી

જ્યારે આપણે સ્ટ્રીમમાં સબ્સ્ક્રાઇબ કરીએ છીએ, ત્યારે અમે એક નવો વર્ગ બનાવીએ છીએ ઉમેદવારી, જે અમને પદ્ધતિ સાથે અનસબ્સ્ક્રાઇબ કરવાનો વિકલ્પ આપે છે અનસબ્સ્ક્રાઇબ કરો. અમે પદ્ધતિનો ઉપયોગ કરીને જૂથ સબ્સ્ક્રિપ્શન પણ કરી શકીએ છીએ ઉમેરવું. ઠીક છે, તે તાર્કિક છે કે આપણે થ્રેડોનો ઉપયોગ કરીને અનગ્રુપ કરી શકીએ છીએ દૂર. ઉમેરો અને દૂર કરવાની પદ્ધતિઓ ઇનપુટ તરીકે અલગ સબ્સ્ક્રિપ્શન સ્વીકારે છે. હું નોંધવા માંગુ છું કે જ્યારે અમે અનસબ્સ્ક્રાઇબ કરીએ છીએ, ત્યારે અમે તમામ ચાઇલ્ડ સબ્સ્ક્રિપ્શન્સમાંથી અનસબ્સ્ક્રાઇબ કરીએ છીએ જેમ કે તેઓ અનસબ્સ્ક્રાઇબ પદ્ધતિ પણ કહે છે. આગળ વધો.

પ્રવાહોના પ્રકાર

HOT
કોલ્ડ

નિર્માતા અવલોકનક્ષમ બહાર બનાવવામાં આવે છે
નિર્માતા અવલોકનક્ષમ અંદર બનાવવામાં આવે છે

અવલોકનક્ષમ બનાવતી વખતે ડેટા પસાર થાય છે
સબ્સ્ક્રિપ્શન સમયે ડેટા આપવામાં આવે છે.

અનસબ્સ્ક્રાઇબ કરવા માટે વધુ તર્કની જરૂર છે
થ્રેડ તેના પોતાના પર સમાપ્ત થાય છે

એક-થી-ઘણા સંબંધનો ઉપયોગ કરે છે
વન-ટુ-વન સંબંધનો ઉપયોગ કરે છે

બધા સબ્સ્ક્રિપ્શન્સનું મૂલ્ય સમાન છે
સબ્સ્ક્રિપ્શન્સ સ્વતંત્ર છે

જો સબ્સ્ક્રિપ્શન ન હોય તો ડેટા ગુમ થઈ શકે છે
નવા સબ્સ્ક્રિપ્શન માટે તમામ સ્ટ્રીમ મૂલ્યો ફરીથી જારી કરે છે

સામ્યતા આપવા માટે, હું સિનેમામાં મૂવી જેવા ગરમ પ્રવાહની કલ્પના કરીશ. તમે કયા સમયે આવ્યા છો, તે ક્ષણથી તમે જોવાનું શરૂ કર્યું. હું તેમાંના કોલ સાથે ઠંડા પ્રવાહની તુલના કરીશ. આધાર કોઈપણ કોલર આન્સરિંગ મશીન રેકોર્ડિંગને શરૂઆતથી અંત સુધી સાંભળે છે, પરંતુ તમે અનસબ્સ્ક્રાઇબ કરીને અટકી શકો છો.

હું એ નોંધવા માંગુ છું કે ત્યાં કહેવાતા ગરમ પ્રવાહો પણ છે (હું આવી વ્યાખ્યા અત્યંત ભાગ્યે જ અને ફક્ત વિદેશી સમુદાયોમાં જ મળ્યો છું) - આ એક પ્રવાહ છે જે ઠંડા પ્રવાહમાંથી ગરમ પ્રવાહમાં પરિવર્તિત થાય છે. પ્રશ્ન ઊભો થાય છે - ક્યાં ઉપયોગ કરવો)) હું પ્રેક્ટિસમાંથી એક ઉદાહરણ આપીશ.

હું કોણીય સાથે કામ કરું છું. તે સક્રિયપણે 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)
    );

ઓપરેટર્સ અમને સ્ટ્રીમ્સ સાથે કામ કરવાની તક પૂરી પાડે છે. તેઓ અવલોકનક્ષમમાં વહેતી ઘટનાઓને નિયંત્રિત કરવામાં મદદ કરે છે. અમે કેટલાક સૌથી લોકપ્રિય મુદ્દાઓ પર વિચાર કરીશું, અને ઓપરેટરો વિશે વધુ માહિતી ઉપયોગી માહિતીની લિંક્સ પર મળી શકે છે.

ઓપરેટર્સ-ઓફ

ના હેલ્પર ઓપરેટરથી શરૂઆત કરીએ. તે સરળ મૂલ્યના આધારે અવલોકનક્ષમ બનાવે છે.

ઓપરેટર્સ-ફિલ્ટર

ફિલ્ટર ઓપરેટર, નામ સૂચવે છે તેમ, સ્ટ્રીમ સિગ્નલને ફિલ્ટર કરે છે. જો ઑપરેટર સાચું પાછું આપે છે, તો તે આગળ નીકળી જાય છે.

ઓપરેટરો - લો

લે - ઉત્સર્જનની સંખ્યાનું મૂલ્ય લે છે, જેના પછી પ્રવાહ સમાપ્ત થાય છે.

ઓપરેટર્સ-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)
);

ઓપરેટર્સ - શેર કરો, ટેપ કરો

ટેપ ઓપરેટર તમને આડઅસર કરવાની પરવાનગી આપે છે, એટલે કે, કોઈપણ ક્રિયાઓ જે ક્રમને અસર કરતી નથી.

શેર યુટિલિટી ઓપરેટર ઠંડા પ્રવાહને ગરમ પ્રવાહમાં ફેરવી શકે છે.

ઓપરેટરો થઈ ગયા છે. ચાલો વિષય તરફ આગળ વધીએ.

મોટેથી વિચારવું

અને પછી હું ચા પીવા ગયો. હું આ ઉદાહરણોથી કંટાળી ગયો છું 😀

વિષય કુટુંબ

વિષય કુટુંબ ગરમ થ્રેડોનું મુખ્ય ઉદાહરણ છે. આ વર્ગો એક પ્રકારનો સંકર છે જે એક જ સમયે અવલોકનક્ષમ અને નિરીક્ષક તરીકે કાર્ય કરે છે. વિષય એક હોટ સ્ટ્રીમ હોવાથી, તેમાંથી અનસબ્સ્ક્રાઇબ કરવું આવશ્યક છે. જો આપણે મુખ્ય પદ્ધતિઓ વિશે વાત કરીએ, તો આ છે:

• આગળ - સ્ટ્રીમમાં નવો ડેટા પસાર કરવો
• ભૂલ - ભૂલ અને થ્રેડ સમાપ્તિ
• પૂર્ણ - થ્રેડનો અંત
• સબ્સ્ક્રાઇબ કરો - સ્ટ્રીમ પર સબ્સ્ક્રાઇબ કરો
• અનસબ્સ્ક્રાઇબ કરો - સ્ટ્રીમમાંથી અનસબ્સ્ક્રાઇબ કરો
• અવલોકનક્ષમ તરીકે - નિરીક્ષકમાં રૂપાંતરિત કરો
• વચન - વચનમાં પરિવર્તિત થાય છે

4 5 પ્રકારના વિષયો ફાળવો.

મોટેથી વિચારવું

મેં સ્ટ્રીમ પર 4 કહ્યું, પરંતુ તે બહાર આવ્યું કે તેઓએ એક વધુ ઉમેર્યું. જેમ કહેવત છે, જીવો અને શીખો.

સરળ વિષય new Subject()- વિષયોનો સૌથી સરળ પ્રકાર. પરિમાણો વિના બનાવેલ છે. સબ્સ્ક્રિપ્શન પછી જ આવતા મૂલ્યો પસાર કરે છે.

બિહેવિયરનો વિષય new BehaviorSubject( defaultData<T> ) - મારા મતે વિષયનો સૌથી સામાન્ય પ્રકાર-s. ઇનપુટ ડિફોલ્ટ મૂલ્ય લે છે. છેલ્લા અંકનો ડેટા હંમેશા સાચવે છે, જે સબ્સ્ક્રાઇબ કરતી વખતે ટ્રાન્સમિટ થાય છે. આ વર્ગમાં ઉપયોગી મૂલ્ય પદ્ધતિ પણ છે જે સ્ટ્રીમનું વર્તમાન મૂલ્ય પરત કરે છે.

રીપ્લે વિષય new ReplaySubject(bufferSize?: number, windowTime?: number) - વૈકલ્પિક રીતે, તે પ્રથમ દલીલ તરીકે મૂલ્યોના બફરનું કદ લઈ શકે છે જે તે પોતે જ સંગ્રહિત કરશે, અને બીજી વખત જે દરમિયાન આપણને ફેરફારોની જરૂર છે.

અસિંક વિષય new AsyncSubject() - સબ્સ્ક્રાઇબ કરતી વખતે કંઈ થતું નથી, અને જ્યારે પૂર્ણ થાય ત્યારે જ મૂલ્ય પરત કરવામાં આવશે. સ્ટ્રીમનું માત્ર છેલ્લું મૂલ્ય પરત કરવામાં આવશે.

વેબસોકેટ વિષય new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - દસ્તાવેજીકરણ તેના વિશે મૌન છે અને હું જાતે તેને પ્રથમ વખત જોઉં છું. કોણ જાણે તે શું કરે છે, લખો, અમે ઉમેરીશું.

ફફ. ઠીક છે, અમે આજે હું જે કહેવા માંગતો હતો તે બધું ધ્યાનમાં લીધું છે. આશા છે કે આ માહિતી મદદરૂપ હતી. તમે ઉપયોગી માહિતી ટૅબમાં તમારી જાતે સાહિત્યની સૂચિ વાંચી શકો છો.

ઉપયોગી માહિતી

• સ્ટ્રીમ માટે લિંક
• JS કેવી રીતે કામ કરે છે: એન્જિનનું વિહંગાવલોકન, રનટાઇમ મિકેનિઝમ્સ, કૉલ સ્ટેક
• JS કેવી રીતે કામ કરે છે: ઇવેન્ટ લૂપ, Async અને async/પ્રતીક્ષા સાથે તમારા કોડને સુધારવાની પાંચ રીતો
• JavaSript માં ઇવેન્ટ લૂપ કેવી રીતે કામ કરે છે
• અસુમેળ JavaScript ની ઉત્ક્રાંતિ
• RxJS શું છે અને તેના વિશે જાણવું શા માટે ઉપયોગી છે
  
• RxJS ની પ્રાયોગિક એપ્લિકેશન
• RxJS ઓબ્ઝર્વેબલ્સ ટ્યુટોરીયલ — ઓબ્ઝર્વેબલ્સ બનાવવા અને સબ્સ્ક્રાઇબ કરવું
• RXJS: ગરમ અને ઠંડા અવલોકનક્ષમ
• અવલોકનક્ષમ બનાવવા માટે વર્ગો, કાર્યો. ઓપરેટરો.
• ઉદાહરણ દ્વારા RxJS ઓપરેટર્સ
• API યાદી
• RxJS માં વિષય અને સમયપત્રકની ભિન્નતા

સોર્સ: www.habr.com