JavaScript fetch - async szeparált

• Szerző: Sallai András
• Copyright © 2021, Sallai András
• Szerkesztve: 2021, 2024
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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

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

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

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

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