[[oktatas:web:javascript:javascript_fetch|< JavaScript fetch]]

====== JavaScript fetch - egyszerű láncolt ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:

<code javascript 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
    }
  ]
}
</code>


Indítás:
  json-server --watch employees.json --port 8000

===== Listázás =====

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

<code javascript app.js>
var url = 'http://localhost:8000/employees/';

fetch (url)
.then(res => res.json())
.then(data => {
    console.log(data);
}).catch(err => {
    console.log(err);
});
</code>

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. 

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

</code>

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

===== Frissítés =====

<code javascript 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);
});
</code>


===== Törlés =====

<code javascript app.js>
var url = 'http://localhost:8000/employees/5';

fetch (url,{
    method: "delete",
}).catch(err => {
    console.log(err);
});
</code>


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