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

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

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.

Ú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.

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

app.js

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

• 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)