JSON fetch

Shopware 5 Programmierung
1

Hi,

ich habe zwei Funktionen die aufeinander folgen. Ergebnis von funktion 1 soll in funktion 2 genutzt werden.
Problem ist, dass funktion 1 ein fetch ist, und ich nur ein “Promise” bekomme für funktion 2 .

function f_eins(x){
   return fetch(x)
     .then(response => response.json())
     .then(data => {
        return data.deepX
      }
}

function f_zwei(y){ 
   //hier sollen die y werte verarbeitet werden
   return y;
}


let result = f_ein(x);
let lalala = f_zwei(result);


document.querySelector("body").appendChild(lalala)

Das fetch ergebnis ist und wird auch korrekt verarbeitet, nur halt zu spät?

{deepX: {a:1,b:2}}

Die Funktionen funktionieren , nur die “Werte” in f_zwei() sind “Promises”. Also kann f_zwei() nicht mit den Werten anstellen weil die nicht da sind und die funktion ohne werte einfach weiter macht.

Habe schon mit async und await jede erdenkliche Kombination durchprobiert. Vll gibts hier jemanden der sich damit auskennt?

Danke und Gruss

2

Du kannst es async bauen wie hier:

https://jsfiddle.net/0vkjqbhp/

oder

https://jsfiddle.net/amcv4t9b/

1 „Gefällt mir“
3

Danke, ich werde nachher mal Beispiel1 testen.

Meine Funktion war etwas verkürzt. Deswegen wird Beispiel 2 nicht funktionieren weil ich “lalala” global brauche und es in fetch/then nicht global wird.

4

Leider funktioniert das auch nicht. Vielleicht war mein Beispiel zu sehr gestrippt. Hier ein zweiter Versuch.

function f_eins(url){
   return fetch(url)
}

function f_zwei(json){
   //verarbeite JSON zu DOCUMENTFRAGMENT 
   return DOCUMENTFRAGMENT;
}



function init(){
  fetch()
  .then(() => { f_main(result) })
}

function f_main(result){
  if(statement mit result){
    let resultX = f_eins(url);
    docfrag = f_zwei(resultX);
  }
  docfrag.querySelector("xy").style.color = "red";
  document.querySelector("body").appendChild(docfrag);
}

init();

Alle Funktionen funktionieren soweit.

Nur wenn ich es innerhalb der main() aufrufe nicht. Also ein fetch im fetch? Könnte da das Problem liegen?

Da bekomme ich nur ein Promise und nicht den Value. Wenn ich die f_eins und f_zwei in einer normalen funkion aufrufen habe ich keine Problem.

5

Ok, ich konnte jetzt schonmal die Funktion so richten, dass es zumindest fulfilled zurück gibt, jedoch ist es undefined.

async function f_eins(url){
   fetch(url)
     .then( () => ... return json result)
}

function f_zwei(json){
   //verarbeite JSON zu DOCUMENTFRAGMENT 
   return DOCUMENTFRAGMENT;
}



function init(){
  fetch()
  .then(() => { f_main(result) })
}

function f_main(result){
  if(statement mit result){
    let resultX = f_eins(url);
    docfrag = f_zwei(resultX);
  }
  docfrag.querySelector("xy").style.color = "red";
  document.querySelector("body").appendChild(docfrag);
}

init();

Jetzt brauche ich nur noch dass fulfilled mit der response gefüllt ist. 

Hat jemand eine Idee?

Danke und Gruss