JavaScript ਵਿੱਚ ਅਸਿੰਕਰੋਨਸ ਪ੍ਰੋਗਰਾਮਿੰਗ (ਕਾਲਬੈਕ, ਵਾਅਦਾ, RxJs)

ਸਾਰਿਆਂ ਨੂੰ ਸਤਿ ਸ਼੍ਰੀ ਅਕਾਲ. ਸਰਗੇਈ ਓਮਲਨੀਤਸਕੀ ਸੰਪਰਕ ਵਿੱਚ ਹੈ। ਕੁਝ ਸਮਾਂ ਪਹਿਲਾਂ ਮੈਂ ਪ੍ਰਤੀਕਿਰਿਆਸ਼ੀਲ ਪ੍ਰੋਗਰਾਮਿੰਗ 'ਤੇ ਇੱਕ ਸਟ੍ਰੀਮ ਦੀ ਮੇਜ਼ਬਾਨੀ ਕੀਤੀ ਸੀ, ਜਿੱਥੇ ਮੈਂ 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('ਬਾਈ') ਨੂੰ ਕਾਲ ਸਟੈਕ ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ ਹੈ।

9) console.log('ਬਾਈ') ਕਮਾਂਡ ਚਲਾਈ ਜਾਂਦੀ ਹੈ।

10) ਕਮਾਂਡ console.log('ਬਾਈ') ਨੂੰ ਕਾਲ ਸਟੈਕ ਤੋਂ ਹਟਾ ਦਿੱਤਾ ਗਿਆ ਹੈ।

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

ਅਸਿੰਕ੍ਰੋਨਸ ਪ੍ਰੋਗ੍ਰਾਮਿੰਗ ਜਿਵੇਂ ਕਿ ਅਸੀਂ ਇਸਨੂੰ 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)
);

ਚਲੋ ਕਲਪਨਾ ਕਰੀਏ ਕਿ ਸਾਡੇ ਕੋਲ ਇੱਕ ਇਨਪੁਟ ਖੇਤਰ ਹੈ। ਅਸੀਂ ਇੱਕ ਐਰੇ ਬਣਾ ਰਹੇ ਹਾਂ ਅਤੇ ਇਨਪੁਟ ਇਵੈਂਟ ਦੇ ਹਰ ਕੀਅਪ ਲਈ ਅਸੀਂ ਆਪਣੇ ਐਰੇ ਵਿੱਚ ਈਵੈਂਟ ਨੂੰ ਸਟੋਰ ਕਰਾਂਗੇ। ਉਸੇ ਸਮੇਂ, ਮੈਂ ਇਹ ਨੋਟ ਕਰਨਾ ਚਾਹਾਂਗਾ ਕਿ ਸਾਡੇ ਐਰੇ ਨੂੰ ਸਮੇਂ ਦੁਆਰਾ ਕ੍ਰਮਬੱਧ ਕੀਤਾ ਗਿਆ ਹੈ, i.e. ਬਾਅਦ ਦੀਆਂ ਘਟਨਾਵਾਂ ਦਾ ਸੂਚਕਾਂਕ ਪਹਿਲਾਂ ਦੇ ਸੂਚਕਾਂਕ ਨਾਲੋਂ ਵੱਡਾ ਹੁੰਦਾ ਹੈ। ਅਜਿਹੀ ਐਰੇ ਇੱਕ ਡੇਟਾ ਪ੍ਰਵਾਹ ਦਾ ਇੱਕ ਸਰਲ ਮਾਡਲ ਹੈ, ਪਰ ਇਹ ਅਜੇ ਇੱਕ ਪ੍ਰਵਾਹ ਨਹੀਂ ਹੈ। ਇਸ ਐਰੇ ਨੂੰ ਸੁਰੱਖਿਅਤ ਢੰਗ ਨਾਲ ਸਟ੍ਰੀਮ ਕਹੇ ਜਾਣ ਲਈ, ਇਹ ਕਿਸੇ ਤਰ੍ਹਾਂ ਗਾਹਕਾਂ ਨੂੰ ਸੂਚਿਤ ਕਰਨ ਦੇ ਯੋਗ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਕਿ ਇਸ ਵਿੱਚ ਨਵਾਂ ਡੇਟਾ ਆ ਗਿਆ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ ਅਸੀਂ ਪ੍ਰਵਾਹ ਦੀ ਪਰਿਭਾਸ਼ਾ 'ਤੇ ਆਉਂਦੇ ਹਾਂ।

ਡਾਟਾ ਸਟ੍ਰੀਮ

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

ਓਪਰੇਟਰ ਸਾਨੂੰ ਸਟ੍ਰੀਮ ਦੇ ਨਾਲ ਕੰਮ ਕਰਨ ਦੀ ਸਾਡੀ ਸਮਰੱਥਾ ਨੂੰ ਵਧਾਉਣ ਦੀ ਸਮਰੱਥਾ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਉਹ ਆਬਜ਼ਰਵੇਬਲ ਵਿੱਚ ਹੋਣ ਵਾਲੀਆਂ ਘਟਨਾਵਾਂ ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ। ਅਸੀਂ ਕੁਝ ਸਭ ਤੋਂ ਵੱਧ ਪ੍ਰਸਿੱਧ ਲੋਕਾਂ ਨੂੰ ਦੇਖਾਂਗੇ, ਅਤੇ ਓਪਰੇਟਰਾਂ ਬਾਰੇ ਹੋਰ ਵੇਰਵੇ ਉਪਯੋਗੀ ਜਾਣਕਾਰੀ ਵਿੱਚ ਦਿੱਤੇ ਲਿੰਕਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਲੱਭੇ ਜਾ ਸਕਦੇ ਹਨ।

ਓਪਰੇਟਰ - ਦਾ

ਦੇ ਸਹਾਇਕ ਆਪਰੇਟਰ ਨਾਲ ਸ਼ੁਰੂ ਕਰੀਏ. ਇਹ ਇੱਕ ਸਧਾਰਨ ਮੁੱਲ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਨਿਰੀਖਣਯੋਗ ਬਣਾਉਂਦਾ ਹੈ।

ਓਪਰੇਟਰ - ਫਿਲਟਰ

ਫਿਲਟਰ ਆਪਰੇਟਰ, ਜਿਵੇਂ ਕਿ ਨਾਮ ਤੋਂ ਪਤਾ ਲੱਗਦਾ ਹੈ, ਸਟ੍ਰੀਮ ਸਿਗਨਲ ਨੂੰ ਫਿਲਟਰ ਕਰਦਾ ਹੈ। ਜੇਕਰ ਆਪਰੇਟਰ ਸਹੀ ਵਾਪਸ ਕਰਦਾ ਹੈ, ਤਾਂ ਇਹ ਅੱਗੇ ਛੱਡ ਜਾਂਦਾ ਹੈ।

ਸੰਚਾਲਕ - ਲੈ

take — emitters ਦੀ ਸੰਖਿਆ ਦਾ ਮੁੱਲ ਲੈਂਦਾ ਹੈ, ਜਿਸ ਤੋਂ ਬਾਅਦ ਧਾਗਾ ਖਤਮ ਹੁੰਦਾ ਹੈ।

ਓਪਰੇਟਰ - 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)
);  

ਓਪਰੇਟਰ - 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 ਆਪਰੇਟਰ ਕੁਝ ਹੱਦ ਤੱਕ ਵਾਅਦਾ.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));

ਓਪਰੇਟਰ - ਜ਼ਿਪ

ਜ਼ਿਪ - ਹਰੇਕ ਥ੍ਰੈਡ ਤੋਂ ਇੱਕ ਮੁੱਲ ਦੀ ਉਡੀਕ ਕਰਦਾ ਹੈ ਅਤੇ ਇਹਨਾਂ ਮੁੱਲਾਂ ਦੇ ਅਧਾਰ ਤੇ ਇੱਕ ਐਰੇ ਬਣਾਉਂਦਾ ਹੈ। ਜੇਕਰ ਮੁੱਲ ਕਿਸੇ ਧਾਗੇ ਤੋਂ ਨਹੀਂ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਗਰੁੱਪ ਨਹੀਂ ਬਣੇਗਾ।

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) - ਇੰਪੁੱਟ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਮੁੱਲਾਂ ਦੇ ਬਫਰ ਦੇ ਆਕਾਰ ਨੂੰ ਪਹਿਲੀ ਦਲੀਲ ਦੇ ਤੌਰ 'ਤੇ ਲੈ ਸਕਦਾ ਹੈ, ਜੋ ਕਿ ਇਹ ਆਪਣੇ ਆਪ ਵਿੱਚ ਸਟੋਰ ਕਰੇਗਾ, ਅਤੇ ਦੂਜੀ ਵਾਰ ਜਦੋਂ ਸਾਨੂੰ ਤਬਦੀਲੀਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

AsyncSubject new AsyncSubject() - ਸਬਸਕ੍ਰਾਈਬ ਕਰਨ ਵੇਲੇ ਕੁਝ ਨਹੀਂ ਹੁੰਦਾ, ਅਤੇ ਪੂਰਾ ਹੋਣ 'ਤੇ ਹੀ ਮੁੱਲ ਵਾਪਸ ਕੀਤਾ ਜਾਵੇਗਾ। ਸਟ੍ਰੀਮ ਦਾ ਸਿਰਫ਼ ਆਖਰੀ ਮੁੱਲ ਵਾਪਸ ਕੀਤਾ ਜਾਵੇਗਾ।

WebSocket ਵਿਸ਼ਾ new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - ਦਸਤਾਵੇਜ਼ ਉਸਦੇ ਬਾਰੇ ਚੁੱਪ ਹਨ ਅਤੇ ਮੈਂ ਉਸਨੂੰ ਪਹਿਲੀ ਵਾਰ ਦੇਖ ਰਿਹਾ ਹਾਂ. ਜੇ ਕੋਈ ਜਾਣਦਾ ਹੈ ਕਿ ਉਹ ਕੀ ਕਰਦਾ ਹੈ, ਕਿਰਪਾ ਕਰਕੇ ਲਿਖੋ ਅਤੇ ਅਸੀਂ ਇਸਨੂੰ ਜੋੜਾਂਗੇ.

ਫੂ. ਖੈਰ, ਅਸੀਂ ਉਹ ਸਭ ਕੁਝ ਕਵਰ ਕੀਤਾ ਹੈ ਜੋ ਮੈਂ ਤੁਹਾਨੂੰ ਅੱਜ ਦੱਸਣਾ ਚਾਹੁੰਦਾ ਸੀ। ਮੈਨੂੰ ਉਮੀਦ ਹੈ ਕਿ ਇਹ ਜਾਣਕਾਰੀ ਲਾਭਦਾਇਕ ਸੀ. ਤੁਸੀਂ ਲਾਭਦਾਇਕ ਜਾਣਕਾਰੀ ਟੈਬ ਵਿੱਚ ਹਵਾਲਿਆਂ ਦੀ ਸੂਚੀ ਨੂੰ ਖੁਦ ਪੜ੍ਹ ਸਕਦੇ ਹੋ।

ਮਦਦਗਾਰ ਜਾਣਕਾਰੀ

• ਸਟ੍ਰੀਮ ਲਈ ਲਿੰਕ
• ਜੇਐਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ: ਇੰਜਣ ਦੀ ਸੰਖੇਪ ਜਾਣਕਾਰੀ, ਰਨਟਾਈਮ ਵਿਧੀ, ਕਾਲ ਸਟੈਕ
• ਜੇਐਸ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ: ਇਵੈਂਟ ਲੂਪ, ਅਸਿੰਕ੍ਰੋਨੀ, ਅਤੇ ਅਸਿੰਕ/ਉਡੀਕ ਨਾਲ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਦੇ ਪੰਜ ਤਰੀਕੇ
• JavaSript ਵਿੱਚ ਇਵੈਂਟ ਲੂਪ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
• ਅਸਿੰਕ੍ਰੋਨਸ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦਾ ਵਿਕਾਸ
• RxJS ਕੀ ਹੈ ਅਤੇ ਇਸ ਬਾਰੇ ਜਾਣਨਾ ਲਾਭਦਾਇਕ ਕਿਉਂ ਹੈ?
  
• RxJS ਦੀ ਪ੍ਰੈਕਟੀਕਲ ਐਪਲੀਕੇਸ਼ਨ
• RxJS ਆਬਜ਼ਰਵੇਬਲਸ ਟਿਊਟੋਰਿਅਲ — ਆਬਜ਼ਰਵੇਬਲਸ ਬਣਾਉਣਾ ਅਤੇ ਸਬਸਕ੍ਰਾਈਬ ਕਰਨਾ
• RXJS: ਗਰਮ ਅਤੇ ਠੰਡੇ ਨਿਰੀਖਣਯੋਗ
• ਕਲਾਸਾਂ, ਨਿਰੀਖਣਯੋਗ ਬਣਾਉਣ ਲਈ ਫੰਕਸ਼ਨ। ਆਪਰੇਟਰ।
• ਉਦਾਹਰਨ ਦੁਆਰਾ RxJS ਆਪਰੇਟਰ
• API ਸੂਚੀ
• RxJS ਵਿੱਚ ਵਿਸ਼ੇ ਅਤੇ ਅਨੁਸੂਚੀ ਦੀਆਂ ਕਿਸਮਾਂ

ਸਰੋਤ: www.habr.com