Fetch API

`fetch(url,config)`

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ó config, ami egy objectként fogja nekünk a kérés adatait tárolni.

Config 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 fogyelni, 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, config).then(response => response.json())

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

fetch(url, config)
.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 config = {
    method: "GET"
    headers,
}

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

function ShowList(dataArray){
    ....
}

Példa adatfeltöltése


const data = {....};

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

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

Példa módosításra


const editedData = {....};

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

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

Példa törlésre


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

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

Példa OOP megvalósítás

class FetchService {
  #base_url;
  #sub_url;

  #headers = { "Accept": "application/json", "Content-Type": "application/json" };

  constructor(base = "kedvenchelyem.tld/api", sub = "/posts") {
    this.#base_url = base;
    this.#sub_url = sub;
  }

  list_all() {
    return fetch(`${this.#base_url}${this.#sub_url}`,{method:"GET",headers: this.#headers}).then(r => r.json());
  }

  show_one(id) {
    return fetch(`${this.#base_url}${this.#sub_url}/${id}`, { method: "GET", headers: this.#headers }).then(r => r.json());
  }

  create(created_item) {
    return fetch(`${this.#base_url}${this.#sub_url}`, { method: "POST", headers: this.#headers, body: JSON.stringify(created_item) }).then(r => r.json());
  }

  edit(id, edited_item){
    return fetch(`${this.#base_url}${this.#sub_url}/${id}`, { method: "PUT", headers: this.#headers, body: JSON.stringify(edited_item) }).then(r => r.json());
  }

  delete(id){
    return fetch(`${this.#base_url}${this.#sub_url}/${id}`, { method: "DELETE", headers: this.#headers }).then(r => r.json());
  }
}

const fs = new FetchService();

fs.list_all().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.

Vigyázat!

Figyelni kell rá, hogy a fetch előtt legyen await különben anélkül fut tovább a kód, hogy véget ér a fetch!

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 getData(){
    let rawData = await fetch("kedvenchelyem.tld/api/lista");
    let data = await rawData.json();
    return data;
}

Ellenőrző kérdések

\pagebreak

Fetch API #

fetch(url,config) #

Config object #

A fetch, mint Promise #

Példa adatok lekérdezésére #

Példa adatfeltöltése #

Példa módosításra #

Példa törlésre #

Példa OOP megvalósítás #

A fetch, mint aszinkron művelet #

Ellenőrző kérdések #