[[oktatas:web:javascript|< JavaScript]]

====== JavaScript Async ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Szinkron futás =====

A JavaScript utasítások egymás után szinkronban futnak le. 
Amíg egy utasítás le nem fut, a másik várakozik. 


<code javascript>
console.log('Imre')
console.log('Helló')
</code>

<code javascript>
const nevKi() = () => {
    console.log('Imre')
}
udv()
console.log('Helló')
</code>

===== Aszinkron futtás =====

A JavaScript utasítások valamilyen környezetben futnak le, 
ez valamilyen **böngésző** vagy **NodeJS**. A böngésző és a NodeJS
is biztosít olyan utasításokat, amelyek nem szinkron
módban futnak. Vegyük például a setTimeout() függvényt.

A setTimeout() paraméterként fogad egy futtatandó függvényt, 
utána pedig paraméterként megadjuk mennyi ideig várakozzon 
a függvény futtatása előtt. Az időt milliszekundumban kell 
megadni.

Ha a nevKi() függvényt későbbre időzítem, az utasítások
végrehajtása tovább folytatódik, kiíródik az 'Üdv' szó:

<code javascript>
const nevKi = () => {
    console.log('Imre')
}

setTimeout(nevKi, 1)
console.log('Üdv')
</code>


A setTimeout() függvény elszakította a nevKi nevű függvény végrehajtását a szinkron végrehajtástól,
és aszinkron módon később futott le.

A késleltetéshez, már egy 0 érték is elég:

<code javascript>
const nevKi = () => {
    console.log('Imre')
}

setTimeout(nevKi, 0)
console.log('Üdv')
</code>


A fetch() függvény is aszinkron módon fut le.

<code javascript>
const valami = () => {
    console.log('Valami')
}

fetch('http://localhost:8000/szamok')
.then(res => res.json())
.then(res => console.log(res))
.catch(err => console.log(err))

setTimeout(valami, 1000)

console.log('Helló: ')
</code>

A fenti feladathoz egy json-server kiszolgálót használhatunk,
egy egyszerű JSON állománnyal (a tartalma, most lényegtelen):

<code javascript szamok.json>
{
    "szamok": [
        {"egy": "első"},
        {"ketto": "második"}
    ]
}
</code>

  * https://developer.mozilla.org/en-US/docs/Web/API/setTimeout (2021)
  * https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch (2021)


===== Promise készítés =====

A Promise lehetővé teszi aszinkron folyamatok kezelését.
Általában adatbázisok, hálózati tárolóknál használjuk.

A következő programban a setTimeout() függvényt egy Promise-ban futtatjuk, így
reagálhatunk az időzítés bekövetkezésére. Amikor bekövetkezik az idő kiíródik
a "Promison belül" szöveg, majd erre reagálva a "Helló: " szöveg.

<code javascript app.js>
const prom = new Promise((resolve, reject)=>{
    setTimeout(()=> {
        resolve('Promison belül')
    }, 3000)
});

prom.then(res => console.log(res));

console.log('Helló: ')
</code>

A "Promison belül" kiírását és a "Helló: " szöveg kiírását tulajdonképpen összeláncoltuk.


A következő program kisebb kiegészítéssel ugyanaz:


<code javascript app.js>
const valami = () => {
    console.log('Valami')
}

const prom = new Promise((resolve, reject)=>{
    setTimeout(()=> {
        resolve('Promison belül')
    }, 3000)
});

prom.then(res => console.log(res));


setTimeout(valami, 1000)


console.log('Helló: ')
</code>

  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise (2021)

===== async és await =====

Az async és az await kulcsszavakat általában arra használjuk, hogy átláthatóbb promist készítsünk:

<code javascript app.js>
function ido() {
    setTimeout(()=>{
        console.log('Imre')
    }, 3000)
}

async function vmi() {
    const res = await new Promise((resolve) => ido())
}
vmi()

console.log('Helló: ')
</code>

Úgy írhatunk then() nélkül kódot, mintha szinkron módon programoznánk. 
Például try...catch szerkezet használata.

===== Promise és async..await =====

A következő két függvény ugyanazt az eredményt adja:

<code javascript app.js>
const url = 'http://localhost:8000/employees'

function getData() {
    return fetch(url)
    .then(response => response.json())
    .then(result => {
        console.log(result)
    })
    .catch(err => {
        console.log('Hiba:', err)
    })
}

async function getData2() {
    try {
        const response = await fetch(url)
        const result = await response.json()
        console.log(result)
    }catch(err) {
        console.log('Hiba:', err)
    }
}
getData2()

</code>

Az egyikben Promise segítségével láncolunk, a másikban egyszerűen azt mondjuk, hogy várjunk az utasítás végére.

==== Lehetséges API ====


<code javascript package.json>
{
  "name": "app43",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "api": "hai-server database.json"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "hai-server": "^0.0.4"
  }
}
</code>


<code javascript database.json>
{
    "employees": [
        {
            "name": "Török Pál",
            "city": "Szolnok",
            "salary": 352
        }
    ]
}
</code>

<code javascript hai-server.json>
{
    "port": 8000,
    "watch": true
}
</code>

  pnpm install

Indítás:
  npm run api



===== Linkek =====

  * https://www.freecodecamp.org/news/async-await-javascript-tutorial/ (2021)
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function (2021)
  * https://nodejs.dev/learn/understanding-javascript-promises (2021)
  * https://javascript.info/promise-basics (2021)