Tartalomjegyzék

JavaScript Async

JavaScript Async

Szerző: Sallai András
Copyright © 2021, Sallai András
Szerkesztve: 2023
Licenc: 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.

console.log('Imre')
console.log('Helló')

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

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ó:

const nevKi = () => {
    console.log('Imre')
}
 
setTimeout(nevKi, 1)
console.log('Üdv')

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:

const nevKi = () => {
    console.log('Imre')
}
 
setTimeout(nevKi, 0)
console.log('Üdv')

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

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ó: ')

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

szamok.json

{
    "szamok": [
        {"egy": "első"},
        {"ketto": "második"}
    ]
}

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.

app.js

const prom = new Promise((resolve, reject)=>{
    setTimeout(()=> {
        resolve('Promison belül')
    }, 3000)
});
 
prom.then(res => console.log(res));
 
console.log('Helló: ')

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:

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ó: ')

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:

app.js

function ido() {
    setTimeout(()=>{
        console.log('Imre')
    }, 3000)
}
 
async function vmi() {
    const res = await new Promise((resolve) => ido())
}
vmi()
 
console.log('Helló: ')

Ú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:

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

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

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"
  }
}

database.json

{
    "employees": [
        {
            "name": "Török Pál",
            "city": "Szolnok",
            "salary": 352
        }
    ]
}

hai-server.json

{
    "port": 8000,
    "watch": true
}

pnpm install

Indítás:

npm run api

szit

Felhasználói eszközök

Eszközök a webhelyen

Tartalomjegyzék

JavaScript Async

Szinkron futás

Aszinkron futtás

Promise készítés

async és await

Promise és async..await

Lehetséges API

Linkek

Eszközök az oldalon