Fetch json kimenet többszöri felhasználása
2021-06-21T12:19:41+02:00
2021-06-24T21:32:39+02:00
2022-08-12T03:25:29+02:00
kerdezo3
Hogyan tudom a dokumentum más pontján még felhasználni a már egyszer megkapott JSON-os fetch adatfolyamot? Ha be van csomagolva egy async function-be akkor már egy másik script-be (ugyanabba a HTML-be) már undefined. Ha meg nem teszem async function-be akkor meg a következő hibaüzenetet adja: Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules

<!DOCTYPE html> <html lang=hu> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Document</title> </head> <body> <header> <h1>Fejléc</h1> </header> <div id="divbe"> </div> <script> async function read() { let url = "http://valami/akarmi.php"; try { let r = await fetch(url); return await r.json(); } catch (error) { console.log(error); } } let data = await read(); if (data.record.length > 0) { var i = 0; var t = ""; data.record.forEach((record) => { t += "<div id='a" + (i+1) + "'>" + record.mezo + "</div>\n"; }); document.getElementById('divbe').innerHTML = t; } </script> <main> Más egyéb tartalmak </main> <div id="masikdiv"> </div> <script> let p=""; data.record.forEach((record) => { p += "<div>" + record.mezo2 + "</div>\n"; }); document.getElementById('masikdiv').innerHTML = p; </script> </body> </html>
Mutasd a teljes hozzászólást!
Megprobalom utoljara de nincs turelmem(es szerintem ertelme se), hogy ennel szajbaragosabban elmagyarazzam.

1. Ha egy async fuggvenyt await kulcso nelkul hivsz meg akkor egy promise-t ad vissza.

async function myAsyncFunction() { return await fetch("valamiurl"); } const myPromise = myAsyncFunction();
2. Egy promise-on akarhanyszor hivhatsz .then-t.

myPromise.then(response => console.log(`Felhasznaltam egyszer: ${response}`)); myPromise.then(response => console.log(`Felhasznaltam megegyszer: ${response}`));
Ennyi, felhasznaltad ugyanazt a valaszt ketszer.
Mutasd a teljes hozzászólást!

  • Csinálj egy mindenhonnan elérhető változót és adj annak értéket. Az én szememnek ez csúnya lenne, én inkább egy globálisan elérhető objektumot használnék amit feltöltenék adatokkal. Hasonlót mint a LocalStorage, csak sajátot. Semmi trükk, a lényeg hogy a teljes scope alól elérhető legyen (ha ez böngészőben fut akkor a window objektum alól), onnantól már bárhol pakolászol bele, bárhonnan elérhető lesz.
    Mutasd a teljes hozzászólást!
  • Csinálj egy mindenhonnan elérhető változót és adj annak értéket. Az én szememnek ez csúnya lenne, én inkább egy globálisan elérhető objektumot használnék amit feltöltenék adatokkal. 

    Azt ugye vagod, hogy semmi kulonbseg nincs a ketto kozott? Mindketto globalis allapot. Arrol nem is beszelve, hogy ez valoszinuleg nem fog mukodni mert az async kod ami beallitja ezt a valtozot (valoszinuleg) kesobb fog lefutni mint az egyeb kodok amik olvasni szeretnek. A helyes megoldas az, hogy promise-kent kezeld a dolgot, pelda itt: How to call an async function
    Mutasd a teljes hozzászólást!
  • Azt ugye vagod, hogy semmi kulonbseg nincs a ketto kozott?

    Persze, lehet nem fogalmaztam egyértelműen: azért csinálnék neki egy "konténert", hogy ne kelljen minden egyes aszinkron válasznak külön globális változót létrehozni, és ezzel rommá szemetelni azt a scope-ot. Legyen egy amibe bepakolok mindent amit kell, később kiveszem ami kell.

    valoszinuleg nem fog mukodni mert az async kod ami beallitja ezt a valtozot (valoszinuleg) kesobb fog lefutni mint az egyeb kodok amik olvasni szeretnek

    Ezt ugye nem tudhatjuk, ettől függetlenül természetesen így van.
    Mutasd a teljes hozzászólást!
  • Bocs ott data.records van (s többes szám lemaradt), meg van a ciklus egy-egy lefutására a record. A data.records-ba benne van már az összes adatrekord, azt már a kód különböző részein használni lehetne és nem kellene mindig lehívni a json-t.
    Mutasd a teljes hozzászólást!
  • És hogy lehet ezzel a Promis-szel, hogy az adatfolyamot fel tudjam használni a dokumentum több pontján?
    Mutasd a teljes hozzászólást!
  • const p = myAsyncFunction(); p.then(response => console.log(response))
    A p.then fuggvenyt hivogathatod ott ahol kell az adat(nem fog ujra ajax hivast csinalni ha mar egyszer lefutott). De amugy meg olvass el egy promise tutorialt: Promise
    Mutasd a teljes hozzászólást!
  • Ebben az írásban nem hozták konkrétan össze a fetch-el a Promise-t. Nem igazán látom át, hogy ennek használatával hogyan lehet felhasználni ugyanazt az adatfolyamot többször.
    Mutasd a teljes hozzászólást!
  • Megprobalom utoljara de nincs turelmem(es szerintem ertelme se), hogy ennel szajbaragosabban elmagyarazzam.

    1. Ha egy async fuggvenyt await kulcso nelkul hivsz meg akkor egy promise-t ad vissza.

    async function myAsyncFunction() { return await fetch("valamiurl"); } const myPromise = myAsyncFunction();
    2. Egy promise-on akarhanyszor hivhatsz .then-t.

    myPromise.then(response => console.log(`Felhasznaltam egyszer: ${response}`)); myPromise.then(response => console.log(`Felhasznaltam megegyszer: ${response}`));
    Ennyi, felhasznaltad ugyanazt a valaszt ketszer.
    Mutasd a teljes hozzászólást!
  • Ez így már világos. Köszönöm. Már csak arra lettem volna kíváncsi, hogy a promise-ből a response-ben lévő JSON rekordokat csak then-es eszközzel és nyíloperátorral lehet kiszedni? De ezt itt valószínűleg ezt nem tehetem meg így felteszem majd más topic-ban.
    Mutasd a teljes hozzászólást!
  • Promise-bol csak then-el "vehetsz ki" dolgokat igen. A nyil operator az csak egy fuggveny, tehat irhatod igy is:

    myPromise.then(function (response) { console.log(`Response: ${response}`) });
    Bar most igy jobban belegondolva nem is tudom, hogy helyes-e a szintaxis amit eloszor irtam, reg JS-eztem.
    Mutasd a teljes hozzászólást!
abcd