{"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\/sv\/blog\/news\/asinhronnoe-programmirovanie-v-javascript-callback-promise-rxjs","title":{"rendered":"Asynkron programmering i JavaScript. (Callback, Promise, RxJs)","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"

Hej alla. Det \u00e4r Omlnytsky Sergey h\u00e4r. F\u00f6r inte s\u00e5 l\u00e4nge sedan h\u00f6ll jag en str\u00f6m om reaktiv programmering, d\u00e4r jag pratade om asynkronitet i JavaScript. Idag skulle jag vilja sammanfatta detta material. <\/p>\n

<\/p>\n

\"Asynkron<\/p>\n

<\/p>\n

Men innan vi b\u00f6rjar med huvuddelen av materialet beh\u00f6ver vi g\u00f6ra en introduktion. S\u00e5, l\u00e5t oss b\u00f6rja med definitionerna: vad \u00e4r en stack och en k\u00f6?
\nStack <\/strong>\u2014 \u00e4r en samling d\u00e4r elementen h\u00e4mtas enligt principen \"senast in, f\u00f6rst ut\" LIFO.
\nK\u00f6 <\/strong>\u2014 \u00e4r en samling d\u00e4r elementen h\u00e4mtas enligt principen \"f\u00f6rst in, f\u00f6rst ut\" FIFO.<\/p>\n

<\/p>\n

Okej, vi forts\u00e4tter. <\/p>\n

<\/p>\n

\"Asynkron<\/p>\n

<\/p>\n

JavaScript \u00e4r ett enskilt tr\u00e5dat programmeringsspr\u00e5k. Det betyder att det bara finns en k\u00f6rtr\u00e5d och en stack d\u00e4r funktionerna placeras i k\u00f6 f\u00f6r utf\u00f6rande. F\u00f6ljaktligen kan JavaScript vid ett givet \u00f6gonblick bara utf\u00f6ra en operation, medan andra operationer v\u00e4ntar p\u00e5 sin tur i stacken tills de kallas. <\/p>\n

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

Anropsstack<\/strong> \u2014 \u00e4r en databasstruktur som, f\u00f6renklat sagt, registrerar information om var vi befinner oss i programmet. N\u00e4r vi g\u00e5r in i en funktion, placerar vi en post om den h\u00f6gst upp i stacken. N\u00e4r vi \u00e5terv\u00e4nder fr\u00e5n funktionen tar vi bort det \u00f6versta elementet fr\u00e5n stacken och hamnar d\u00e4r vi kallade funktionen. Det \u00e4r allt som stacken kan g\u00f6ra. Men nu uppst\u00e5r den ytterst intressanta fr\u00e5gan. Hur fungerar d\u00e5 asynkroniteten i JavaScript?<\/p>\n

<\/p>\n

\"Asynkron<\/p>\n

<\/p>\n

I sj\u00e4lva verket finns det, f\u00f6rutom stacken, en speciell k\u00f6 i webbl\u00e4sarna f\u00f6r arbete med s\u00e5 kallat WebAPI. Funktioner fr\u00e5n denna k\u00f6 kommer att utf\u00f6ras i ordning f\u00f6rst efter att stacken \u00e4r helt rensad. Endast efter detta placeras de fr\u00e5n k\u00f6n i stacken f\u00f6r utf\u00f6rande. Om det f\u00f6r n\u00e4rvarande finns minst ett element i stacken, kan de inte komma in i stacken. Just av den anledningen \u00e4r anrop av funktioner via timeout ofta tidsm\u00e4ssigt oexakta, eftersom funktionen inte kan komma fr\u00e5n k\u00f6n till stacken s\u00e5 l\u00e4nge den \u00e4r fylld. <\/p>\n

<\/p>\n

L\u00e5t oss titta p\u00e5 f\u00f6ljande exempel och g\u00e5 igenom dess \"utf\u00f6rande\" steg f\u00f6r steg. L\u00e5t oss ocks\u00e5 titta p\u00e5 vad som h\u00e4nder i systemet.<\/p>\n

<\/p>\n

console.log('Hi);\nsetTimeout(function cb1() {\n    console.log('cb1');\n}, 5000);\nconsole.log('Bye');<\/code><\/pre>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
1) Inga h\u00e4ndelser f\u00f6r tillf\u00e4llet. Webbl\u00e4sarens konsol \u00e4r tom, anropsstacken \u00e4r tom.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
2) Sedan l\u00e4ggs kommandot console.log('Hi') till i anropstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
3) Och den utf\u00f6rs<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
4) D\u00e4refter tas console.log('Hi') bort fr\u00e5n anropstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
5) Nu g\u00e5r vi vidare till kommandot setTimeout(function cb1() {\u2026 }). Det l\u00e4ggs till i anropsstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
6) Kommandot setTimeout(function cb1() {\u2026 }) utf\u00f6rs. Webbl\u00e4saren skapar en timer, som \u00e4r en del av Web API. Den kommer att r\u00e4kna ner tiden.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
7) Kommandot setTimeout(function cb1() {\u2026 }) har slutf\u00f6rt sin uppgift och tas bort fr\u00e5n anropsstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
8) Kommandot console.log('Bye') l\u00e4ggs till i anropstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
9) Kommandot console.log('Bye') utf\u00f6rs.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
10) Kommandot console.log('Bye') tas bort fr\u00e5n anropstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
11) N\u00e4r minst 5000 ms har g\u00e5tt, avslutar timern sin uppgift och placerar callback cb1 i callback-k\u00f6n.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
12) Event loop tar funktionen cb1 fr\u00e5n callback-k\u00f6n och l\u00e4gger den i anropsstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
13) Funktionen cb1 utf\u00f6rs och l\u00e4gger till console.log('cb1') i anropstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
14) Kommandot console.log('cb1') utf\u00f6rs.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
15) Kommandot console.log('cb1') tas bort fr\u00e5n anropstacken.<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
16) Funktionen cb1 tas bort fr\u00e5n anropsstacken.<\/p>\n
<\/p>\n
L\u00e5t oss titta p\u00e5 exemplet i dynamik:<\/p>\n
<\/p>\n
\"Asynkron<\/p>\n
<\/p>\n
Nu har vi g\u00e5tt igenom hur asynkronitet \u00e4r implementerat i JavaScript. L\u00e5t oss kort diskutera evolutionen av asynkron kod.<\/p>\n
<\/p>\n
Evolutionen av asynkron kod.<\/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 k\u00e4nner det i JavaScript, kan endast genomf\u00f6ras av funktioner. De kan \u00f6verf\u00f6ras som vilken annan variabel som helst till andra funktioner. S\u00e5 f\u00f6ddes callbacks. Och det \u00e4r roligt och underh\u00e5llande, tills det f\u00f6rvandlas till sorg och el\u00e4nde. Varf\u00f6r? Jo, helt enkelt:<\/p>\n
<\/p>\n