Tartalomjegyzék

< JavaScript fetch

JavaScript fetch - egyszerű láncolt

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.json
{
  "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

Az összes olvasása, listázása.

app.js
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.

app.js
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

app.js
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

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

Linkek