ਜਾਵਾ ਸਕ੍ਰਿਪਟ - ਕਾਲਬੈਕਸ ਤੋਂ ਅਸਿੰਕ/ਉਡੀਕ ਤੱਕ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਸਮਕਾਲੀ ਹੈ. ਇਸਦਾ ਅਰਥ ਹੈ ਕਿ ਇਹ ਬਾਅਦ ਵਿੱਚ ਆਰਡਰ ਦੁਆਰਾ ਤੁਹਾਡੇ ਕੋਡ ਬਲਾਕ ਨੂੰ ਚਲਾਏਗਾ ਲਹਿਰਾਉਣਾ . ਕੋਡ ਦੇ ਲਾਗੂ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ, | _+_ | ਅਤੇ | _+_ | ਘੋਸ਼ਣਾਵਾਂ ਨੂੰ ਉਨ੍ਹਾਂ ਦੇ ਦਾਇਰੇ ਦੇ ਸਿਖਰ ਤੇ ਲਹਿਰਾਇਆ ਜਾਂਦਾ ਹੈ.

ਇਹ ਸਮਕਾਲੀ ਕੋਡ ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਹੈ:

var

ਇਹ ਕੋਡ ਭਰੋਸੇਯੋਗ 1 2 3 'ਤੇ ਲੌਗ ਇਨ ਕਰੇਗਾ.

ਅਸਿੰਕਰੋਨਸ ਬੇਨਤੀਆਂ ਇੱਕ ਟਾਈਮਰ ਦੇ ਖਤਮ ਹੋਣ ਜਾਂ ਜਵਾਬ ਦੇਣ ਦੀ ਬੇਨਤੀ ਦੀ ਉਡੀਕ ਕਰਦੀਆਂ ਹਨ ਜਦੋਂ ਕਿ ਬਾਕੀ ਕੋਡ ਲਾਗੂ ਹੁੰਦਾ ਰਹਿੰਦਾ ਹੈ. ਫਿਰ ਜਦੋਂ ਸਮਾਂ ਸਹੀ ਹੋਵੇ a ਵਾਪਸ ਫੋਨ ਮਲਾਓ ਇਹਨਾਂ ਅਸਿੰਕਰੋਨਸ ਬੇਨਤੀਆਂ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਿਆਏਗਾ.

ਇਹ ਅਸਿੰਕਰੋਨਸ ਕੋਡ ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਹੈ:

function

ਇਹ ਅਸਲ ਵਿੱਚ 1 3 2 ਨੂੰ ਲੌਗ ਕਰੇਗਾ, ਕਿਉਂਕਿ 2 ਇੱਕ | _+_ | 'ਤੇ ਹੈ ਜੋ ਸਿਰਫ ਦੋ ਸਕਿੰਟਾਂ ਬਾਅਦ, ਇਸ ਉਦਾਹਰਣ ਦੁਆਰਾ, ਚਲਾਏਗਾ. ਤੁਹਾਡੀ ਅਰਜ਼ੀ ਦੋ ਸਕਿੰਟਾਂ ਦੇ ਖਤਮ ਹੋਣ ਦੀ ਉਡੀਕ ਵਿੱਚ ਨਹੀਂ ਲਟਕਦੀ. ਇਸਦੀ ਬਜਾਏ ਇਹ ਬਾਕੀ ਦੇ ਕੋਡ ਨੂੰ ਲਾਗੂ ਕਰਦਾ ਰਹਿੰਦਾ ਹੈ ਅਤੇ ਜਦੋਂ ਸਮਾਂ ਸਮਾਪਤ ਹੋ ਜਾਂਦਾ ਹੈ ਤਾਂ ਇਹ ਦੁਬਾਰਾ ਸਕਿੰਟ ਤੇ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ.

ਤੁਸੀਂ ਪੁੱਛ ਸਕਦੇ ਹੋ ਕਿ ਇਹ ਲਾਭਦਾਇਕ ਕਿਉਂ ਹੈ? ਜਾਂ ਸਿੰਕ ਬਣਨ ਲਈ ਮੈਂ ਆਪਣਾ ਅਸਿੰਕ ਕੋਡ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਾਂ? ਉਮੀਦ ਹੈ ਕਿ ਮੈਂ ਤੁਹਾਨੂੰ ਜਵਾਬ ਦਿਖਾ ਸਕਦਾ ਹਾਂ.

ਸਮੱਸਿਆ

ਦੱਸ ਦੇਈਏ ਕਿ ਸਾਡਾ ਟੀਚਾ ਇੱਕ GitHub ਉਪਭੋਗਤਾ ਦੀ ਖੋਜ ਕਰਨਾ ਅਤੇ ਉਸ ਉਪਭੋਗਤਾ ਦੇ ਸਾਰੇ ਭੰਡਾਰ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ. ਗੱਲ ਇਹ ਹੈ ਕਿ ਅਸੀਂ ਉਪਭੋਗਤਾ ਦਾ ਸਹੀ ਨਾਮ ਨਹੀਂ ਜਾਣਦੇ. ਇਸ ਲਈ ਸਾਨੂੰ ਸਾਰੇ ਉਪਭੋਗਤਾਵਾਂ ਦੇ ਸਮਾਨ ਨਾਮ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਸੰਬੰਧਤ ਭੰਡਾਰਾਂ ਦੀ ਸੂਚੀ ਬਣਾਉਣੀ ਪਏਗੀ.

ਇਸ ਨੂੰ ਬਹੁਤ ਵਧੀਆ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਨਹੀਂ ਹੈ, ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ

ਇਹਨਾਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਬੇਨਤੀ ਕੋਡ XHR ( XMLHttpRequest ). ਤੁਸੀਂ ਇਸਨੂੰ jQuery | _+_ | ਨਾਲ ਬਦਲ ਸਕਦੇ ਹੋ ਜਾਂ ਸਭ ਤੋਂ ਤਾਜ਼ਾ ਮੂਲ ਪਹੁੰਚ | _+_ | ਕਿਹਾ ਜਾਂਦਾ ਹੈ. ਦੋਵੇਂ ਤੁਹਾਨੂੰ ਗੇਟ ਦੇ ਬਾਹਰ ਵਾਅਦਿਆਂ ਦੀ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਨਗੇ.

ਤੁਹਾਡੀ ਪਹੁੰਚ ਦੇ ਅਧਾਰ ਤੇ ਇਸਨੂੰ ਥੋੜ੍ਹਾ ਬਦਲਿਆ ਜਾਵੇਗਾ ਪਰ ਇੱਕ ਸਟਾਰਟਰ ਵਜੋਂ:

console.log('1') console.log('2') console.log('3')

ਯਾਦ ਰੱਖੋ ਕਿ ਇਹਨਾਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ ਮਹੱਤਵਪੂਰਣ ਹਿੱਸਾ ਉਹ ਨਹੀਂ ਹੈ ਜੋ ਕੋਡ ਦਾ ਅੰਤਮ ਨਤੀਜਾ ਹੁੰਦਾ ਹੈ. ਇਸਦੀ ਬਜਾਏ ਤੁਹਾਡਾ ਟੀਚਾ ਪਹੁੰਚਾਂ ਦੇ ਅੰਤਰਾਂ ਨੂੰ ਸਮਝਣਾ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਤੁਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਵਿਕਾਸ ਲਈ ਕਿਵੇਂ ਵਰਤ ਸਕਦੇ ਹੋ.

ਵਾਪਸ ਫੋਨ ਮਲਾਓ

ਤੁਸੀਂ ਜਾਵਾ ਸਕ੍ਰਿਪਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਇੱਕ ਫੰਕਸ਼ਨ ਦਾ ਇੱਕ ਹਵਾਲਾ ਇੱਕ ਵੇਰੀਏਬਲ ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਕਰ ਸਕਦੇ ਹੋ. ਫਿਰ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਚਲਾਉਣ ਲਈ ਕਿਸੇ ਹੋਰ ਫੰਕਸ਼ਨ ਦੇ ਦਲੀਲਾਂ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹੋ. ਇਹ ਸਾਡੀ ਕਾਲਬੈਕ ਹੈ.

ਇੱਕ ਉਦਾਹਰਣ ਇਹ ਹੋਵੇਗੀ:

console.log('1') setTimeout(function afterTwoSeconds() { console.log('2') }, 2000) console.log('3')

| _+_ | ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਸਾਡੀ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਸਾਨੂੰ | _+_ | ਨਾਲ ਅਜਿਹਾ ਕੁਝ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਫੰਕਸ਼ਨ ਜੋ ਅਸੀਂ ਪਹਿਲਾਂ ਪਰਿਭਾਸ਼ਤ ਕੀਤਾ ਹੈ:

setTimeout

ਬੇਨਤੀ ਲਈ ਸਾਡਾ ਕਾਰਜ ਹੁਣ a | _+_ | ਨੂੰ ਸਵੀਕਾਰ ਕਰੇਗਾ ਤਾਂ ਜੋ ਜਦੋਂ a | _+_ | ਇਸ ਨੂੰ ਗਲਤੀ ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਅਤੇ ਸਫਲਤਾ ਦੇ ਮਾਮਲੇ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਵੇਗਾ.

$.ajax

ਇਸ ਨੂੰ ਤੋੜਨਾ:

ਅਸੀਂ ਇੱਕ ਉਪਭੋਗਤਾ ਦੇ ਭੰਡਾਰ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਬੇਨਤੀ ਕਰਦੇ ਹਾਂ
ਬੇਨਤੀ ਪੂਰੀ ਹੋਣ ਤੋਂ ਬਾਅਦ ਅਸੀਂ ਕਾਲਬੈਕ | _+_ | ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ
ਜੇ ਕੋਈ ਗਲਤੀ ਨਹੀਂ ਹੈ ਤਾਂ ਅਸੀਂ ਆਪਣੇ ਸਰਵਰ ਦੇ ਜਵਾਬ ਨੂੰ _ _+_ | ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ ਕਿਸੇ ਵਸਤੂ ਵਿੱਚ ਪਾਰਸ ਕਰਦੇ ਹਾਂ
ਫਿਰ ਅਸੀਂ ਆਪਣੀ ਉਪਭੋਗਤਾ ਸੂਚੀ ਨੂੰ ਦੁਹਰਾਉਂਦੇ ਹਾਂ ਕਿਉਂਕਿ ਇਸ ਵਿੱਚ ਇੱਕ ਤੋਂ ਵੱਧ ਹੋ ਸਕਦੇ ਹਨ
ਹਰੇਕ ਉਪਭੋਗਤਾ ਲਈ ਅਸੀਂ ਉਨ੍ਹਾਂ ਦੀ ਰਿਪੋਜ਼ਟਰੀਆਂ ਦੀ ਸੂਚੀ ਦੀ ਬੇਨਤੀ ਕਰਦੇ ਹਾਂ.
ਅਸੀਂ ਉਸ ਯੂਆਰਐਲ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ ਜੋ ਪ੍ਰਤੀ ਉਪਭੋਗਤਾ ਨੂੰ ਸਾਡੇ ਪਹਿਲੇ ਜਵਾਬ ਵਿੱਚ ਵਾਪਸ ਆਇਆ
ਅਸੀਂ | _+_ | ਨੂੰ ਆਪਣੀਆਂ ਅਗਲੀਆਂ ਬੇਨਤੀਆਂ ਲਈ ਜਾਂ ਪਹਿਲੇ ਜਵਾਬ ਤੋਂ url ਦੇ ਤੌਰ ਤੇ ਕਾਲ ਕਰਦੇ ਹਾਂ
ਜਦੋਂ ਬੇਨਤੀ ਨੇ ਕਾਲਬੈਕ ਪੂਰਾ ਕਰ ਲਿਆ, ਅਸੀਂ ਕਾਲ ਕਰਾਂਗੇ
ਇਹ ਜਾਂ ਤਾਂ ਇਸਦੀ ਗਲਤੀ ਜਾਂ ਉਸ ਉਪਭੋਗਤਾ ਲਈ ਰਿਪੋਜ਼ਟਰੀਆਂ ਦੀ ਸੂਚੀ ਦੇ ਨਾਲ ਪ੍ਰਤੀਕਿਰਿਆ ਨੂੰ ਸੰਭਾਲ ਦੇਵੇਗਾ

ਨੋਟ : ਗਲਤੀ ਨੂੰ ਪਹਿਲਾਂ ਪੈਰਾਮੀਟਰ ਦੇ ਰੂਪ ਵਿੱਚ ਭੇਜਣਾ ਇੱਕ ਆਮ ਅਭਿਆਸ ਹੈ ਖਾਸ ਕਰਕੇ ਜਦੋਂ Node.js ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ.

ਇੱਕ ਵਧੇਰੇ ਸੰਪੂਰਨ ਅਤੇ ਪੜ੍ਹਨਯੋਗ ਪਹੁੰਚ ਵਿੱਚ ਕੁਝ ਗਲਤੀ ਨਾਲ ਨਜਿੱਠਣਾ ਹੋਵੇਗਾ. ਅਸੀਂ ਕਾਲਬੈਕ ਨੂੰ ਬੇਨਤੀ ਅਮਲ ਤੋਂ ਵੱਖ ਰੱਖਾਂਗੇ.

ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੈ:

fetch

ਇਸ ਨਾਲ ਰੇਸਿੰਗ ਅਤੇ ਐਰਰ ਹੈਂਡਲਿੰਗ ਮੁੱਦਿਆਂ ਵਰਗੀਆਂ ਸਮੱਸਿਆਵਾਂ ਖਤਮ ਹੋ ਜਾਂਦੀਆਂ ਹਨ. ਰੇਸਿੰਗ ਉਦੋਂ ਹੁੰਦੀ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਨਿਯੰਤਰਣ ਨਹੀਂ ਕਰਦੇ ਕਿ ਤੁਹਾਨੂੰ ਕਿਹੜਾ ਉਪਭੋਗਤਾ ਪਹਿਲਾਂ ਮਿਲੇਗਾ. ਅਸੀਂ ਉਨ੍ਹਾਂ ਸਾਰਿਆਂ ਲਈ ਜਾਣਕਾਰੀ ਦੀ ਬੇਨਤੀ ਕਰ ਰਹੇ ਹਾਂ ਜੇ ਇੱਕ ਤੋਂ ਵੱਧ ਹੋਣ. ਅਸੀਂ ਕਿਸੇ ਆਰਡਰ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਨਹੀਂ ਰੱਖ ਰਹੇ ਹਾਂ. ਉਦਾਹਰਣ ਦੇ ਲਈ, ਉਪਭੋਗਤਾ 10 ਪਹਿਲਾਂ ਆ ਸਕਦਾ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾ 2 ਆਖਰੀ. ਸਾਡੇ ਕੋਲ ਲੇਖ ਵਿੱਚ ਬਾਅਦ ਵਿੱਚ ਇੱਕ ਸੰਭਵ ਹੱਲ ਹੈ.

ਕਾਲਬੈਕਸ ਨਾਲ ਮੁੱਖ ਸਮੱਸਿਆ ਇਹ ਹੈ ਕਿ ਸਾਂਭ -ਸੰਭਾਲ ਅਤੇ ਪੜ੍ਹਨਯੋਗਤਾ ਇੱਕ ਦਰਦ ਬਣ ਸਕਦੀ ਹੈ. ਇਹ ਪਹਿਲਾਂ ਤੋਂ ਹੀ ਹੈ ਅਤੇ ਕੋਡ ਸ਼ਾਇਦ ਹੀ ਕੁਝ ਕਰਦਾ ਹੈ. ਇਸ ਵਜੋਂ ਜਾਣਿਆ ਜਾਂਦਾ ਹੈ ਕਾਲਬੈਕ ਨਰਕ ਜਿਸ ਨੂੰ ਸਾਡੀ ਅਗਲੀ ਪਹੁੰਚ ਨਾਲ ਬਚਿਆ ਜਾ ਸਕਦਾ ਹੈ.

ਫੋਨ ਨੰਬਰ ਤੋਂ ਬਿਨਾਂ ਕੈਸ਼ ਐਪ ਵਿੱਚ ਕਿਵੇਂ ਪ੍ਰਾਪਤ ਕਰਨਾ ਹੈ

ਵਾਅਦੇ

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

ਇੱਕ ਵਾਅਦਾ ਬਣਾਉਣ ਲਈ ਜੋ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ:

// url argument can be something like 'https://api.github.com/users/daspinola/repos' function request(url) { const xhr = new XMLHttpRequest(); xhr.timeout = 2000; xhr.onreadystatechange = function(e) { if (xhr.readyState === 4) { if (xhr.status === 200) { // Code here for the server answer when successful } else { // Code here for the server answer when not successful } } } xhr.ontimeout = function () { // Well, it took to long do some code here to handle that } xhr.open('get', url, true) xhr.send(); }

ਆਓ ਇਸ ਨੂੰ ਵਿਘਨ ਕਰੀਏ:

ਇੱਕ ਵਾਅਦਾ a | _+_ | ਨਾਲ ਅਰੰਭ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਇਸ ਕੋਲ ਹੈ | _+_ | ਅਤੇ | _+_ | ਬਿਆਨ
ਆਪਣਾ ਅਸਿੰਕ ਕੋਡ | _+_ | ਦੇ ਅੰਦਰ ਬਣਾਉ ਫੰਕਸ਼ਨ
| _+_ | ਜਦੋਂ ਸਭ ਕੁਝ ਇੱਛਾ ਅਨੁਸਾਰ ਵਾਪਰਦਾ ਹੈ
ਨਹੀਂ ਤਾਂ | _+_ |
ਜਦੋਂ a | _+_ | ਪਾਇਆ ਜਾਂਦਾ ਹੈ | _+_ | thatੰਗ ਉਸ ਲਈ ਚਲਾਇਆ ਜਾਵੇਗਾ | _+_ | ਜਦੋਂ a | _+_ | ਪਾਇਆ ਜਾਂਦਾ ਹੈ | _+_ | ਚਾਲੂ ਕੀਤਾ ਜਾਵੇਗਾ

ਧਿਆਨ ਵਿੱਚ ਰੱਖਣ ਵਾਲੀਆਂ ਗੱਲਾਂ:

| _+_ | ਅਤੇ | _+_ | ਸਿਰਫ ਇੱਕ ਪੈਰਾਮੀਟਰ ਸਵੀਕਾਰ ਕਰੋ
| _+_ | | _+_ | ਨੂੰ ਸਿਰਫ 'ਯੇਯ' ਹੀ ਭੇਜੇਗਾ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ
ਜੇ ਤੁਸੀਂ ਮਲਟੀਪਲ ਚੇਨ ਕਰਦੇ ਹੋ | _+_ | A | _+_ | ਜੋੜੋ ਜੇ ਤੁਸੀਂ ਅਗਲਾ ਚਾਹੁੰਦੇ ਹੋ | _+_ | ਮੁੱਲ ਨਾ ਹੋਣਾ | _+_ |
ਜਦੋਂ a | _+_ | | _+_ | ਨਾਲ ਫੜਿਆ ਗਿਆ ਹੈ ਜੇ ਤੁਹਾਡੇ ਕੋਲ | _+_ | ਹੈ ਇਸ ਨਾਲ ਜੰਜੀਰ
ਇਹ ਅਜੇ ਵੀ ਇਸ ਨੂੰ ਲਾਗੂ ਕਰੇਗਾ | _+_ | ਤੁਸੀਂ | _+_ | ਵੇਖ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ ਹਮੇਸ਼ਾਂ ਚੱਲਦਾ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸ ਵਿੱਚ ਇੱਕ ਉਦਾਹਰਣ ਦੀ ਜਾਂਚ ਕਰ ਸਕਦੇ ਹੋ ਟਿੱਪਣੀ
| _+_ | 'ਤੇ ਚੇਨ ਦੇ ਨਾਲ ਜੇ ਪਹਿਲੇ ਵਿੱਚ ਕੋਈ ਗਲਤੀ ਹੁੰਦੀ ਹੈ
ਇਹ ਬਾਅਦ ਵਿੱਚ ਛੱਡ ਦੇਵੇਗਾ | _+_ | ਜਦੋਂ ਤੱਕ ਇਹ a | _+_ | ਨਹੀਂ ਲੱਭ ਲੈਂਦਾ
ਇੱਕ ਵਾਅਦੇ ਦੇ ਤਿੰਨ ਰਾਜ ਹੁੰਦੇ ਹਨ
ਬਕਾਇਆ
ਜਦੋਂ ਇੱਕ | _+_ | ਦੀ ਉਡੀਕ ਕੀਤੀ ਜਾ ਰਹੀ ਹੈ ਜਾਂ | _+_ | ਹੋਣ ਲਈ
ਹੱਲ ਕੀਤਾ
ਰੱਦ ਕਰ ਦਿੱਤਾ
ਇੱਕ ਵਾਰ ਇਹ | _+_ | ਵਿੱਚ ਹੈ ਜਾਂ | _+_ | ਰਾਜ
ਇਸ ਨੂੰ ਬਦਲਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ

ਨੋਟ : ਤੁਸੀਂ ਘੋਸ਼ਣਾਵਾਂ ਦੇ ਸਮੇਂ ਫੰਕਸ਼ਨ ਤੋਂ ਬਿਨਾਂ ਵਾਅਦੇ ਬਣਾ ਸਕਦੇ ਹੋ. ਜਿਸ ਤਰੀਕੇ ਨਾਲ ਮੈਂ ਇਸਨੂੰ ਦਿਖਾ ਰਿਹਾ ਹਾਂ ਉਹ ਇਸ ਨੂੰ ਕਰਨ ਦਾ ਸਿਰਫ ਇੱਕ ਆਮ ਤਰੀਕਾ ਹੈ.

ਸਿਧਾਂਤ, ਸਿਧਾਂਤ, ਸਿਧਾਂਤ… ਮੈਂ ਉਲਝਣ ਵਿੱਚ ਹਾਂ ਤੁਸੀਂ ਸ਼ਾਇਦ ਕਹੋ.

ਆਓ ਆਪਣੀ ਬੇਨਤੀ ਦੀ ਉਦਾਹਰਣ ਨੂੰ ਚੀਜ਼ਾਂ ਨੂੰ ਸਾਫ਼ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਨ ਦੇ ਵਾਅਦੇ ਨਾਲ ਇਸਤੇਮਾਲ ਕਰੀਏ:

// Execute the function 'doThis' with another function as parameter, in this case 'andThenThis'. doThis will execute whatever code it has and when it finishes it should have 'andThenThis' being executed. doThis(andThenThis) // Inside of 'doThis' it's referenced as 'callback' which is just a variable that is holding the reference to this function function andThenThis() { console.log('and then this') } // You can name it whatever you want, 'callback' is common approach function doThis(callback) { console.log('this first') // the '()' is when you are telling your code to execute the function reference else it will just log the reference callback() }

ਇਸ ਦ੍ਰਿਸ਼ ਵਿੱਚ ਜਦੋਂ ਤੁਸੀਂ | _+_ | ਚਲਾਉਂਦੇ ਹੋ ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਕੁਝ ਵਾਪਸ ਕਰ ਦੇਵੇਗਾ:

ਇੱਕ ਵਾਅਦਾ ਜਿਸਦਾ ਹੱਲ ਜਾਂ ਅਸਵੀਕਾਰ ਕੀਤਾ ਜਾਣਾ ਬਾਕੀ ਹੈ

callback

ਇਸ ਤਰ੍ਹਾਂ ਅਸੀਂ ਰੇਸਿੰਗ ਅਤੇ ਕੁਝ ਗਲਤੀਆਂ ਨੂੰ ਸੰਭਾਲਣ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਹੱਲ ਕਰਦੇ ਹਾਂ. ਕੋਡ ਅਜੇ ਵੀ ਥੋੜਾ ਉਲਝਿਆ ਹੋਇਆ ਹੈ. ਪਰ ਇਹ ਤੁਹਾਨੂੰ ਦਿਖਾਉਣ ਦਾ ਇੱਕ ਤਰੀਕਾ ਹੈ ਕਿ ਇਹ ਪਹੁੰਚ ਪੜ੍ਹਨਯੋਗਤਾ ਸਮੱਸਿਆਵਾਂ ਵੀ ਪੈਦਾ ਕਰ ਸਕਦੀ ਹੈ.

ਕਾਲਬੈਕਸ ਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਵੱਖ ਕਰਨਾ ਇੱਕ ਤੇਜ਼ ਫਿਕਸ ਹੋਵੇਗਾ:

request

ਕੀ ਦੇਖ ਕੇ | _+_ | | _+_ | ਦੇ ਨਾਲ ਕ੍ਰਮ ਵਿੱਚ ਉਡੀਕ ਕਰ ਰਿਹਾ ਹੈ ਤੁਸੀਂ ਇਹ ਸਮਝ ਸਕਦੇ ਹੋ ਕਿ ਅਸੀਂ ਇਸ ਕੋਡ ਬਲਾਕ ਤੋਂ ਕੀ ਉਮੀਦ ਕਰਦੇ ਹਾਂ. ਹਰ ਚੀਜ਼ ਜ਼ਿੰਮੇਵਾਰੀ ਦੁਆਰਾ ਘੱਟ ਜਾਂ ਘੱਟ ਵੱਖਰੀ ਹੁੰਦੀ ਹੈ.

ਇਹ ਵਾਅਦੇ ਕੀ ਹਨ ਦੀ ਸਤਹ ਨੂੰ ਖੁਰਚ ਰਿਹਾ ਹੈ. ਉਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਇਸ ਬਾਰੇ ਬਹੁਤ ਜ਼ਿਆਦਾ ਸਮਝ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਮੈਂ ਇਸ ਦੀ ਕਾਫ਼ੀ ਸਿਫਾਰਸ਼ ਨਹੀਂ ਕਰ ਸਕਦਾ ਲੇਖ .

ਜਨਰੇਟਰ

ਇਕ ਹੋਰ ਪਹੁੰਚ ਜਨਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਹੈ. ਇਹ ਥੋੜਾ ਹੋਰ ਅਗਾ advanceਂ ਹੈ ਇਸ ਲਈ ਜੇ ਤੁਸੀਂ ਅਰੰਭ ਕਰ ਰਹੇ ਹੋ ਤਾਂ ਅਗਲੇ ਵਿਸ਼ੇ ਤੇ ਜਾਣ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ.

ਜਨਰੇਟਰਾਂ ਦੀ ਇੱਕ ਵਰਤੋਂ ਇਹ ਹੈ ਕਿ ਉਹ ਤੁਹਾਨੂੰ ਅਸਿੰਕ ਕੋਡ ਨੂੰ ਸਿੰਕ ਵਰਗਾ ਵੇਖਣ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ.

ਉਹਨਾਂ ਨੂੰ a | _+_ | ਦੁਆਰਾ ਦਰਸਾਇਆ ਗਿਆ ਹੈ ਇੱਕ ਫੰਕਸ਼ਨ ਵਿੱਚ ਅਤੇ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਵੇਖੋ:

function request(url, callback) { const xhr = new XMLHttpRequest(); xhr.timeout = 2000; xhr.onreadystatechange = function(e) { if (xhr.readyState === 4) { if (xhr.status === 200) { callback(null, xhr.response) } else { callback(xhr.status, null) } } } xhr.ontimeout = function () { console.log('Timeout') } xhr.open('get', url, true) xhr.send(); }

| _+_ | ਨਾਲ ਵਾਪਸ ਆਉਣ ਦੀ ਬਜਾਏ, ਜਨਰੇਟਰਾਂ ਕੋਲ ਇੱਕ | _+_ | ਹੈ ਬਿਆਨ. ਇਹ ਇੱਕ | _+_ | ਤੱਕ ਫੰਕਸ਼ਨ ਐਗਜ਼ੀਕਿਸ਼ਨ ਨੂੰ ਰੋਕਦਾ ਹੈ ਉਸ ਕਾਰਜ ਨੂੰ ਦੁਹਰਾਉਣ ਲਈ ਬਣਾਇਆ ਗਿਆ ਹੈ. ਇਹ | _+_ | ਦੇ ਸਮਾਨ ਹੈ ਵਾਅਦਾ ਕਰਦਾ ਹੈ ਕਿ ਸਿਰਫ ਉਦੋਂ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਹੱਲ ਹੋ ਜਾਂਦਾ ਹੈ.

ਸਾਡੀ ਬੇਨਤੀ ਫੰਕਸ਼ਨ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦੇਵੇਗੀ:

vtech ਫੋਨ ਐਡ ਹੈਂਡਸੈੱਟ

callback

ਅਸੀਂ | _+_ | ਲੈਣਾ ਚਾਹੁੰਦੇ ਹਾਂ ਇੱਕ ਦਲੀਲ ਦੇ ਰੂਪ ਵਿੱਚ. ਪਰ ਗੇਟ ਦੇ ਬਾਹਰ ਬੇਨਤੀ ਨੂੰ ਅਮਲ ਵਿੱਚ ਲਿਆਉਣ ਦੀ ਬਜਾਏ ਅਸੀਂ ਇਸਨੂੰ ਉਦੋਂ ਹੀ ਚਾਹੁੰਦੇ ਹਾਂ ਜਦੋਂ ਸਾਡੇ ਕੋਲ ਜਵਾਬ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਕਾਲਬੈਕ ਹੋਵੇ.

ਸਾਡਾ | _+_ | ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਹੋਵੇਗਾ:

request

ਇਹ ਹੋਵੇਗਾ:

ਪਹਿਲੇ | _+_ | ਦੀ ਉਡੀਕ ਕਰੋ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ
A | _+_ | ਵਾਪਸ ਕਰੋ a | _+_ | ਦੀ ਉਮੀਦ ਦੇ ਹਵਾਲੇ ਪਹਿਲੇ ਲਈ | _+_ | ਸਾਡਾ | _+_ | ਫੰਕਸ਼ਨ a | _+_ | ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ ਅਤੇ a | _+_ | ਵਾਪਸ ਕਰਦਾ ਹੈ ਜੋ a | _+_ | ਦੀ ਉਮੀਦ ਕਰਦਾ ਹੈ
A | _+_ | ਦੀ ਉਮੀਦ ਰੱਖੋ ਅਗਲੇ ਵਿੱਚ ਭੇਜਿਆ ਜਾਏਗਾ | _+_ |
ਦੁਹਰਾਓ | _+_ |
ਏ | _+_ | ਦੀ ਉਡੀਕ ਕਰੋ ਹਰੇਕ ਲਈ | _+_ |
ਉਨ੍ਹਾਂ ਦੇ ਸੰਬੰਧਤ ਕਾਲਬੈਕ ਫੰਕਸ਼ਨ ਵਾਪਸ ਕਰੋ

ਇਸ ਲਈ ਇਸਦਾ ਅਮਲ ਇਹ ਹੋਵੇਗਾ:

const userGet = `https://api.github.com/search/users?page=1&q=daspinola&type=Users` request(userGet, function handleUsersList(error, users) { if (error) throw error const list = JSON.parse(users).items list.forEach(function(user) { request(user.repos_url, function handleReposList(err, repos) { if (err) throw err // Handle the repositories list here }) }) })

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

ਮੈਂ ਜਨਰੇਟਰਾਂ ਬਾਰੇ ਮਿਕਸਡ ਫਾਲਿੰਗ ਕੀਤੀ ਹੈ. ਇੱਕ ਪਾਸੇ ਮੈਂ ਜਨਰੇਟਰ ਨੂੰ ਵੇਖ ਕੇ ਕੋਡ ਤੋਂ ਕੀ ਉਮੀਦ ਕੀਤੀ ਜਾਂਦੀ ਹੈ ਇਸਦੀ ਸਮਝ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦਾ ਹਾਂ.

ਪਰ ਇਸ ਦੇ ਚੱਲਣ ਨਾਲ ਕਾਲਬੈਕ ਨਰਕ ਵਰਗੀ ਸਮੱਸਿਆਵਾਂ ਖਤਮ ਹੋ ਜਾਂਦੀਆਂ ਹਨ.

ਸਾਡੇ ਵਿੱਚ ਸ਼ੀਬਾ ਸਿੱਕਾ ਕਿਵੇਂ ਖਰੀਦਣਾ ਹੈ

ਪਸੰਦ ਹੈ async/ਉਡੀਕ ਕਰੋ , ਇੱਕ ਕੰਪਾਈਲਰ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ. ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਇਹ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਸਮਰਥਤ ਨਹੀਂ ਹੈ.

ਮੇਰੇ ਤਜ਼ਰਬੇ ਵਿੱਚ ਇਹ ਆਮ ਨਹੀਂ ਹੈ. ਇਸ ਲਈ ਇਹ ਵੱਖ -ਵੱਖ ਡਿਵੈਲਪਰਾਂ ਦੁਆਰਾ ਰੱਖੇ ਗਏ ਕੋਡਬੇਸਾਂ ਵਿੱਚ ਉਲਝਣ ਪੈਦਾ ਕਰ ਸਕਦਾ ਹੈ.

ਇਸ ਵਿੱਚ ਜਨਰੇਟਰ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ ਇਸ ਬਾਰੇ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਮਝ ਪ੍ਰਾਪਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ ਲੇਖ. ਅਤੇ ਇੱਥੇ ਇੱਕ ਹੋਰ ਮਹਾਨ ਹੈ ਸਰੋਤ .

ਅਸਿੰਕ/ਉਡੀਕ

ਇਹ ਤਰੀਕਾ ਵਾਅਦਿਆਂ ਦੇ ਨਾਲ ਜਨਰੇਟਰਾਂ ਦੇ ਮਿਸ਼ਰਣ ਵਰਗਾ ਜਾਪਦਾ ਹੈ. ਤੁਹਾਨੂੰ ਸਿਰਫ ਆਪਣਾ ਕੋਡ ਦੱਸਣਾ ਪਏਗਾ ਕਿ ਕਿਹੜੇ ਕਾਰਜ ਹੋਣੇ ਹਨ | _+_ |. ਅਤੇ ਕੋਡ ਦਾ ਕਿਹੜਾ ਹਿੱਸਾ ਹੋਵੇਗਾ | _+_ | ਇਸਦੇ ਲਈ | _+_ | ਖਤਮ ਕਰਨਾ.

handleUsersList

ਇਸ ਦ੍ਰਿਸ਼ ਵਿੱਚ:

ਸਾਡੇ ਕੋਲ | _+_ | async ਫੰਕਸ਼ਨ ਹੋਣ ਦੇ ਨਾਤੇ
ਅਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ | _+_ | ਦੀ ਉਡੀਕ ਕਰਨ ਲਈ ਕਹਿੰਦੇ ਹਾਂ ਜਾਂ | _+_ | ਸਾਡੇ ਵਾਅਦੇ ਫੰਕਸ਼ਨ ਲਈ | _+_ |
ਇਹ ਸਿਰਫ | _+_ | ਵਿੱਚ ਖਤਮ ਹੋਵੇਗਾ ਜਦੋਂ | _+_ | ਕਾਰਜ ਸਮਾਪਤ
ਇਸ ਮਾਮਲੇ ਵਿੱਚ ਸਿਰਫ ਇੱਕ ਹੀ ਹੈ

ਇਸ ਨੂੰ ਸਾਡੇ | _+_ | ਤੇ ਲਾਗੂ ਕਰਨਾ ਅਸੀਂ ਇਸਨੂੰ | _+_ | ਦੇ ਰੂਪ ਵਿੱਚ ਛੱਡ ਦਿੰਦੇ ਹਾਂ ਜਿਵੇਂ ਕਿ ਪਹਿਲਾਂ ਵੇਖਿਆ ਗਿਆ:

JSON.parse

ਅਸੀਂ ਆਪਣਾ | _+_ | ਬਣਾਉਂਦੇ ਹਾਂ ਇਸ ਤਰ੍ਹਾਂ ਲੋੜੀਂਦੇ ਇੰਤਜ਼ਾਰਾਂ ਦੇ ਨਾਲ ਕੰਮ ਕਰੋ:

repos_url

ਇਸ ਲਈ ਹੁਣ ਸਾਡੇ ਕੋਲ ਇੱਕ ਅਸਿੰਕ ਹੈ | _+_ | ਫੰਕਸ਼ਨ ਜੋ ਬੇਨਤੀਆਂ ਨੂੰ ਸੰਭਾਲਦਾ ਹੈ. | _+_ | ਵਿੱਚ ਇੱਕ ਹੋਰ ਅਸਿੰਕ ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਜੋ ਸਾਡੇ ਕੋਲ | _+_ | ਦੀ ਸੂਚੀ ਹੋਵੇ ਹਰੇਕ ਉਪਭੋਗਤਾ ਨੂੰ ਹੇਰਾਫੇਰੀ ਕਰਨ ਲਈ.

ਅਸੀਂ ਇਸਨੂੰ ਇਸ ਤਰ੍ਹਾਂ ਕਹਿੰਦੇ ਹਾਂ:

try { request(userGet, handleUsersList) } catch (e) { console.error('Request boom! ', e) } function handleUsersList(error, users) { if (error) throw error const list = JSON.parse(users).items list.forEach(function(user) { request(user.repos_url, handleReposList) }) } function handleReposList(err, repos) { if (err) throw err // Handle the repositories list here console.log('My very few repos', repos) }

ਇਹ ਅਤੇ ਵਾਅਦਿਆਂ ਦੀ ਪਹੁੰਚ ਮੇਰੇ ਮਨਪਸੰਦ ਹਨ ਕਿਉਂਕਿ ਕੋਡ ਪੜ੍ਹਨਾ ਅਤੇ ਬਦਲਣਾ ਅਸਾਨ ਹੈ. ਤੁਸੀਂ ਅਸਿੰਕ ਬਾਰੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ/ਹੋਰ ਡੂੰਘਾਈ ਨਾਲ ਉਡੀਕ ਕਰ ਸਕਦੇ ਹੋ ਇਥੇ .

ਅਸਿੰਕ/ਉਡੀਕ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਇੱਕ ਨਨੁਕਸਾਨ ਇਹ ਹੈ ਕਿ ਇਹ ਪੁਰਾਣੇ ਬ੍ਰਾਉਜ਼ਰ ਦੁਆਰਾ ਫਰੰਟ-ਐਂਡ ਜਾਂ ਬੈਕ-ਐਂਡ ਵਿੱਚ ਸਮਰਥਤ ਨਹੀਂ ਹੈ. ਤੁਹਾਨੂੰ ਨੋਡ 8 ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਪਏਗੀ.

ਤੁਸੀਂ ਇੱਕ ਕੰਪਾਈਲਰ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਬੱਬਲ ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਨ ਲਈ.

ਦਾ ਹੱਲ

ਤੁਸੀਂ ਵੇਖ ਸਕਦੇ ਹੋ ਅੰਤ ਕੋਡ ਇਸ ਸਨਿੱਪਟ ਵਿੱਚ ਅਸਿੰਕ/ਉਡੀਕ ਦੀ ਵਰਤੋਂ ਕਰਦਿਆਂ ਸਾਡੇ ਸ਼ੁਰੂਆਤੀ ਟੀਚੇ ਨੂੰ ਪੂਰਾ ਕਰਨਾ.

ਇਸ ਲੇਖ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਵੱਖੋ ਵੱਖਰੇ ਰੂਪਾਂ ਵਿੱਚ ਆਪਣੇ ਆਪ ਨੂੰ ਅਜ਼ਮਾਉਣਾ ਇੱਕ ਚੰਗੀ ਗੱਲ ਹੈ.

ਸਿੱਟਾ

ਦ੍ਰਿਸ਼ 'ਤੇ ਨਿਰਭਰ ਕਰਦਿਆਂ ਤੁਸੀਂ ਆਪਣੇ ਆਪ ਨੂੰ ਇਸਤੇਮਾਲ ਕਰਦੇ ਹੋਏ ਪਾ ਸਕਦੇ ਹੋ:

async/ਉਡੀਕ ਕਰੋ
ਕਾਲਬੈਕਸ
ਰਲਾਉ

ਇਹ ਤੁਹਾਡੇ ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਉਦੇਸ਼ਾਂ ਦੇ ਅਨੁਕੂਲ ਕੀ ਹੈ. ਅਤੇ ਕਿਹੜੀ ਚੀਜ਼ ਤੁਹਾਨੂੰ ਕੋਡ ਨੂੰ ਕਾਇਮ ਰੱਖਣ ਦਿੰਦੀ ਹੈ ਤਾਂ ਜੋ ਇਹ ਦੂਜਿਆਂ ਅਤੇ ਤੁਹਾਡੇ ਭਵਿੱਖ ਦੇ ਸਵੈ ਨੂੰ ਸਮਝਣ ਯੋਗ ਹੋਵੇ.

ਨੋਟ: | _+_ | ਵਰਗੀਆਂ ਬੇਨਤੀਆਂ ਦੇ ਵਿਕਲਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਕੋਈ ਵੀ ਪਹੁੰਚ ਥੋੜ੍ਹੀ ਘੱਟ ਕਿਰਿਆਸ਼ੀਲ ਹੋ ਜਾਂਦੀ ਹੈ ਅਤੇ | _+_ |.

ਮੈਨੂੰ ਦੱਸੋ ਕਿ ਤੁਸੀਂ ਹਰੇਕ ਪਹੁੰਚ ਨੂੰ ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਬਣਾਉਣ ਲਈ ਵੱਖਰੇ ਅਤੇ ਵੱਖਰੇ ਤਰੀਕਿਆਂ ਨਾਲ ਕੀ ਕਰੋਗੇ.

#ਜਾਵਾਸਕ੍ਰਿਪਟ #ਵੈਬ-ਵਿਕਾਸ

medium.freecodecamp.org