Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_fetch:async_szeparalt

< JavaScript fetch

JavaScript fetch - async szeparált

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

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

Hozzáadás

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

Frissítés

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

Törlés

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

Lekérés hiba kezelése

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();
oktatas/web/javascript/javascript_fetch/async_szeparalt.txt · Utolsó módosítás: 2024/06/01 19:05 szerkesztette: admin