szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript:javascript_fetch|< JavaScript fetch]]

====== JavaScript fetch - async szeparált ======

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

===== Az async és await kulcsszavak =====

Az async és await kulcsszavak lehetővé teszik, hogy az fetch() utasítást szeparálva több különálló sorba írjuk, átláthatóbbá téve a kódot. 

Az async kulcsszót egy függvényen használhatjuk. Az await kulcsszót olyan függvényekben használhatjuk, amely el van látva async kulcsszóval, és olyan utasítások elé írhatjuk amelyek aszinkron módon futnak.


Az async és await kulcsszavakat a JavaScript **ES8** verziójában vezették be, 2017-ben.
===== Listázás =====

<code javascript>
var url = 'http://localhost:8000/employees';

async function getEmployees() {
    try {
        let response = await fetch(url);
        let result = await response.json();        
        console.log(result);
    }catch (err) {
        console.log('Hiba! A dolgozók lekérése sikertelen!');
        console.log(err);
    }
}
getEmployees();
</code>

===== Hozzáadás =====

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

async function addEmployee() {
    try {
        let response = await fetch(url,{
            method: "post",
            body: JSON.stringify({
                id: 6,
                fullname: 'Derék László',
                city: 'Szeged',
                salary: 2150000
            }),
            headers: {
                "Content-Type": "application/json"
            }
        });
        let result = await response.json();        
        console.log(result);
    }catch (err) {
        console.log('Hiba! A dolgozó hozzáadása sikertelen!');
        console.log(err);
    }
}
addEmployee();
</code>

===== Frissítés =====

<code javascript app.js>
var url = 'http://localhost:8000/employees/5';
 
async function updateEmployee() {
    try {
        let response = await fetch(url,{
            method: "put",
            body: JSON.stringify({
                id: 5,
                fullname: 'Kincses Katalin',
                city: 'Szolnok',
                salary: 2340000
            }),
            headers: {
                "Content-Type": "application/json"
            }
        });
        let result = await response.json();        
        console.log(result);
    }catch (err) {
        console.log('Hiba! A dolgozó frissítése sikertelen!');
        console.log(err);
    }
}
updateEmployee();
</code>

===== Törlés =====

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

async function delEmployee() {
    try {
        let response = await fetch(url,{
            method: "delete",
        });
        let result = await response.json();        
        console.log(result);
    }catch (err) {
        console.log('Hiba! A dolgozó törlése sikertelen!');
        console.log(err);
    }
}
delEmployee();
</code>

===== Lekérés hiba kezelése =====

<code javascript>
var url = 'http://localhost:8000/employees';

async function getEmployees() {
    try {
        let response = await fetch(url);
        
        //Reagálunk a hibára:
        if(!response.ok) {
            throw new Error('Hiba! A lekérés sikertelen!');
        }
        
        let result = await response.json();        
        console.log(result);
    }catch (err) {
        console.log('Hiba! A dolgozók lekérése sikertelen!');
        console.log(err);
    }
}
getEmployees();
</code>