< JavaScript fetch

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

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

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

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

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