{"id":36774,"date":"2019-10-31T22:13:44","date_gmt":"2019-10-31T19:13:44","guid":{"rendered":"https:\/\/prohoster.info\/blog\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs\/"},"modified":"2019-10-31T22:13:44","modified_gmt":"2019-10-31T19:13:44","slug":"asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","status":"publish","type":"post","link":"https:\/\/prohoster.info\/da\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Asynkront programmering i JavaScript. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Hej alle sammen. Det er Omelnitsky Sergey her. For nylig havde jeg en stream om reaktiv programmering, hvor jeg talte om asynkronitet i JavaScript. I dag vil jeg gerne opsummere dette materiale. <\/p>\n

<\/p>\n

\"Asynkront<\/p>\n

<\/p>\n

Men f\u00f8r vi g\u00e5r i gang med hovedmaterialet, skal vi lave en introduktion. S\u00e5 lad os starte med definitioner: hvad er en stak og en k\u00f8?
\nStak <\/strong>\u2014 er en samling, hvis elementer bliver hentet efter princippet 'sidst ind, f\u00f8rst ud' LIFO
\nK\u00f8 <\/strong>\u2014 er en samling, hvis elementer bliver hentet efter princippet ('f\u00f8rst ind, f\u00f8rst ud' FIFO<\/p>\n

<\/p>\n

Okay, lad os forts\u00e6tte. <\/p>\n

<\/p>\n

\"Asynkront<\/p>\n

<\/p>\n

JavaScript er et enkelttr\u00e5det programmeringssprog. Det betyder, at der kun er \u00e9n udf\u00f8relsestr\u00e5d og \u00e9n stak, hvor funktioner bliver sat i k\u00f8 til udf\u00f8relse. Derfor kan JavaScript kun udf\u00f8re \u00e9n operation ad gangen, mens de andre operationer venter i stakken, indtil de bliver kaldt. <\/p>\n

<\/a><\/noindex><\/p>\n

Stak af kald<\/strong> \u2014 er en dataramme, der forenklet sagt gemmer oplysninger om, hvor vi befinder os i programmet. Hvis vi g\u00e5r ind i en funktion, placerer vi en post om den \u00f8verst i stakken. N\u00e5r vi vender tilbage fra funktionen, fjerner vi det \u00f8verste element fra stakken og befinder os der, hvor vi kaldte denne funktion fra. Det er alt, hvad stakken kan.<\/p>\n

<\/p>\n

\"Asynkront<\/p>\n

<\/p>\n

Og nu et meget interessant sp\u00f8rgsm\u00e5l. Hvordan fungerer asynkronitet i JavaScript s\u00e5? <\/p>\n

<\/p>\n

Faktisk, udover stakken, eksisterer der i browsere en s\u00e6rlig k\u00f8 til arbejde med s\u00e5kaldte WebAPI'er. Funktioner fra denne k\u00f8 udf\u00f8res i r\u00e6kkef\u00f8lge, f\u00f8rst efter at stakken er helt t\u00f8mt. F\u00f8rst derefter placeres de fra k\u00f8en til stakken til udf\u00f8relse. Hvis der i stakken i \u00f8jeblikket er mindst \u00e9t element, kan de ikke komme ind i stakken. Det er netop derfor, funktioner med timeout ofte ikke er tidsm\u00e6ssigt pr\u00e6cise, da funktionen ikke kan komme fra k\u00f8en til stakken, mens den er fyldt.<\/p>\n

<\/p>\n

Lad os overveje f\u00f8lgende eksempel og tage os af dets trin-for-trin 'udf\u00f8relse'. Vi vil ogs\u00e5 se, hvad der sker i systemet.<\/code><\/pre>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
console.log('Hi);\nsetTimeout(function cb1() {\n console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
2) Derefter tilf\u00f8jes kommandoen console.log('Hi') til opkaldsstakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
3) Og den udf\u00f8res<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
4) Dern\u00e6st fjernes console.log('Hi') fra opkaldsstakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
5) Nu g\u00e5r vi videre til kommandoen setTimeout(function cb1() {\u2026 }). Den tilf\u00f8jes til call-stakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
6) Kommandoen setTimeout(function cb1() {\u2026 }) udf\u00f8res. Browseren opretter en timer, som er en del af Web API. Den vil udf\u00f8re nedt\u00e6llingen.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
7) Kommandoen setTimeout(function cb1() {\u2026 }) er f\u00e6rdig og fjernes fra call-stakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
8) Kommandoen console.log('Bye') tilf\u00f8jes til opkaldsstakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
9) Kommandoen console.log('Bye') udf\u00f8res.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
10) Kommandoen console.log('Bye') fjernes fra opkaldsstakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
11) Efter mindst 5000 ms er g\u00e5et, afslutter timeren sit arbejde og placerer callback cb1 i callback-k\u00f8en.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
12) Event-loopet tager funktionen cb1 fra callback-k\u00f8en og placerer den i call-stakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
13) Funktionen cb1 udf\u00f8res og tilf\u00f8jer console.log('cb1') til opkaldsstakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
14) Kommandoen console.log('cb1') udf\u00f8res.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
15) Kommandoen console.log('cb1') fjernes fra opkaldsstakken.<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
16) Funktionen cb1 fjernes fra call-stakken.<\/p>\n
<\/p>\n
Lad os se p\u00e5 et eksempel i dynamik:<\/p>\n
<\/p>\n
\"Asynkront<\/p>\n
<\/p>\n
S\u00e5dan, nu har vi set, hvordan asynkronitet er implementeret i JavaScript. Lad os kort diskutere udviklingen af asynkron kode.<\/p>\n
<\/p>\n
Udviklingen af asynkron kode.<\/h2>\n
<\/p>\n
a(function (resultsFromA) {\n    b(resultsFromA, function (resultsFromB) {\n        c(resultsFromB, function (resultsFromC) {\n            d(resultsFromC, function (resultsFromD) {\n                e(resultsFromD, function (resultsFromE) {\n                    f(resultsFromE, function (resultsFromF) {\n                        console.log(resultsFromF);\n                    })\n                })\n            })\n        })\n    })\n});<\/code><\/pre>\n
<\/p>\n
Asynkront programmering, som vi kender det i JavaScript, kan kun implementeres ved hj\u00e6lp af funktioner. De kan gives som enhver anden variabel til andre funktioner. S\u00e5dan blev callbacks til. Og det er sjovt, livligt og underholdende, indtil det bliver trist, melankolsk og s\u00f8rgeligt. Hvorfor? Jo, alt er enkelt:<\/p>\n
<\/p>\n