< JavaScript fetch

JavaScript fetch - egyszerű láncolt

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

JSON szerver

A fetch() függvény nem használható ha az URL, file protokollt tartalmaz. Ezért telepítünk egy json-server nevű szervert, ami HTTP protokollon keresztül szolgálja ki a JSON fájlt.

npm install --save-dev json-server

Összeállítunk egy JSON fájlt, ami dolgozok adatait tartalmazza:

{ "employees": [ { "id": 1, "fullname": "Nagy János", "city": "Szolnok", "salary": 8400000 }, { "id": 2, "fullname": "Páros Lajos", "city": "Szeged", "salary": 3430000 }, { "id": 3, "fullname": "Aranyos Enikő", "city": "Szolnok", "salary": 4245000 } ] }

Indítás:

json-server --watch employees.json --port 8000

Listázás

var url = 'http://localhost:8000/employees/'; fetch (url) .then(res => res.json()) .then(data => { console.log(data); }).catch(err => { console.log(err); });

Az alapértelmezett metódus a GET, ezért ezt nem kell megadni. A fetch() függvény csak egy URL-t kap paraméterként.

Hozzáadás

Új dolgozó felvételéhez POST metódusra van szükség, az új dolgozó adataira; de azt is meg kell mondani, milyen formátumban küldjük az adatokat.

var url = 'http://localhost:8000/employees/'; fetch (url,{ method: "post", body: JSON.stringify({ id: 5, fullname: 'Táncos Imre', city: "Szeged", salary: 2250000 }), headers: { "Content-Type": "application/json" } }) .then(response => response.json()) .then(result => { console.log(result); }).catch(err => { console.log(err); });

A példában id-t is küldünk, de ez nem kötelező. A json-server generál automatikusan.

Frissítés

var url = 'http://localhost:8000/employees/5'; fetch (url,{ method: "put", body: JSON.stringify({ id: 5, fullname: 'Parkin Ede', city: 'Kátrány Levente', salary: 2175000 }), headers: { "Content-Type": "application/json" } }) .then(response => response.json()) .then(result => { console.log(result); }).catch(err => { console.log(err); });

Törlés

var url = 'http://localhost:8000/employees/5'; fetch (url,{ method: "delete", }).catch(err => { console.log(err); });

Linkek

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch (2021)