Fetch API 24.02.28

fetch(url,init)

Mint a címben látszik, a fetch függvényünk két paramétert is kaphat ahhoz, hogy a megfelelő címmel a megfelelő módon tudjon kommunikálni.

Az első paraméter az url, amely stringként várja az a végpontot amelyre csatlakozni szeretnénk.

A fetch érdekesebb rásza a második helyen látható init, ami egy objectként fogja nekünk a kérés adatait tárolni.

init object

Akövetkező kulcs érték párokat tudjuk megadni az objectünknek:

• method: Ez bármelyik Method beírható ide stringként
• headers: Ide fognak kerülni Map/objectként azok az információk amiket külön kér a szerver, például azonosításhoz.
• body: A ténylegesen elküldeni szánt adataink fognak objectként ide kerülni, érdemes figyelni, hogy stringesítsük (JSON.stringify()). GET típusú kérés esetén TILOS!
• mode: Erre csak akkor van szükség, ha a szerveren be van állítva, hogy csak ugyanarről a domainről érkező kéréseket fogadja. Ennek az értéke lehet cors, no-cors, same-origin vagy navigate

A fetch, mint Promise

Az első .then() -ben mindig azt határozzuk meg, hogy milyen típusú adatokkal dolgozunk tovább. JSON/Blob/Text.

fetch(url, init).then(response => response.json())

A következőekben már foglalkozhatunk az adatok kezelésével.

fetch(url, init)
.then(response => response.json())
.then(data => myArray = data)
.then(()=>ShowData())

Példa adatok lekérdezésére

const headers = {
    Authorization: `Bearer ${token}`,
    "Content-Type": "application/json",
    "Accept": "application/json"
}

const init = {
    method: "GET",
    headers
}

fetch(`kedvenchelyem.tld/api/lista`,init)
.then(response => response.json())
.then(ShowList)

function ShowList(dataArray){
    //...
}

Példa adatfeltöltése

const data = {...};

const init = {
    method: "POST",
    headers,
    body: JSON.stringify(data)
}

fetch(`kedvenchelyem.tld/api/lista`,init)
.then(response => response.json())
.then(console.table)

Példa módosításra

const editedData = {...};

const init = {
    method: "PUT",
    headers,
    body: JSON.stringify(editedData)
}

fetch(`kedvenchelyem.tld/api/lista/${dataId}`,init)
.then(response => response.json())
.then(console.table)

Példa törlésre

const init = {
    method: "DELETE",
    headers,
}

fetch(`kedvenchelyem.tld/api/lista/${dataId}`,init)
.then(response => response.json())
.then(console.table)

A fetch, mint aszinkron művelet

Ahhoz, hogy aszinkron módon tudjuk kezelni a fetchet, először is szükségünk lesz egy async függvényre.

Első körben az érkező adatot lementjük egy tetszőleges változóban.

Második körben, hasonlóan a promise-os megoldáshoz, megadjuk az adatunk típusát. Az így kapott változóban már a ténylegesen feldolgozható adat van már.

async function getData(){
    let rawData = await fetch("kedvenchelyem.tld/api/lista");
    let data = await rawData.json();
    return data;
}

\pagebreak