JavaScript JavaScript fetch() Daten entgegennehmen

[Calmalor]

Guten Abend,

ich bin gerade dabei einen einfachen RPA Bot zu erstellen und arbeite dabei das erste Mal mit JavaScript. Jetzt hänge ich gerade bei folgendem Problem.
Und zwar will ich per fetch Anfragen an einen externen Service versenden und wieder entgegennehmen. Das Entgegenehmen bereit mir allerdings ziemliche Problem. Seit heute Nachmittag habe ich mich schon durch verschiedene Stackoverflow Threads durchgearbeitet, allerdings scheine ich mit der asynchronen Entgegennahme nicht zurechtzukommen.

Mein einziges Ergebnis war bis "Object Promise".

Versucht habe ich es bis jetzt mit "async await" und ".then" aber bisher hat leider noch nichts zum gewünschten Ergebnis geführt.


Hier aus meiner JavaScript-Datei (Schaut inzwischen etwas verbastelt, weil inzwischen einiges an Lösungsvorschlägen durch habe).
"endpointAddress" ist die Adresse an die der Aufruf erfolgt und "contextData" die Daten, die dabei übermittelt werden sollen.

callExternalService(endpointAddress, contextData) {

        const data = {'context_data': contextData};

        const fetching = async () => {
            const myResponse = await fetch(endpointAddress, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            });
            /*
            .then(response =>
                response.json()
            )
            .then(data =>  {
                console.log('Success:', data);
                return data;
            })
            .catch((error) => {
                console.error('Error:', error);
            });
            */
            return Promise.resolve(await myResponse.json());
        }
     
        const jsonData = fetching().then(value => console.log(value));

        return jsonData;
    }

Wenn jemand ein paar Tipps hätte wäre ich wirklich dankbar.

Einen schönen Abend noch,
Calmalor

 

[netzgestaltung]

ich hab dir das jetzt mal formatiert und in einen code tag gepackt. bitte das nächste mal selber machen.
zu anschauen ist es mir heute zu spät, aber es wäre noch angenehmer wenn du deine variablen einheitlich deklarierst oder es einen sinn ergibt warum du einmal const und einmal var nimmst und einmal einfach eine funktion definierst.

beachte das mit "var" definierte variable deklarationen an den anfang des funktionsbody "geschoben" werden.

callExternalService(endpointAddress, contextData) {
  const data = {'context_data': contextData};
 
  const fetching = async () => {
    const myResponse = await fetch(endpointAddress, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    
    /*
    .then(response =>
      response.json()
    )
    .then(data => {
      console.log('Success:', data);
      return data;
    })
    .catch((error) => {
      console.error('Error:', error);
    });
    */
    
    
    return Promise.resolve(await myResponse.json());
  };
 
 
  function IsJsonString(str){
    try {
      JSON.parse(str);
    } catch (e) {
      return false;
    }
    return true;
  };

  var jsonData = jsonData = fetching().then(value => console.log(value));
 
  while ( jsonData['generated_value_from_context'] == null ) {
    jsonData = fetching().then(value => console.log(value));
  }

  return jsonData;
}

 

[FranzvonAssisi]

Wenn du auf eine Promise then aufrufst, musst du dort ein Value zurückgeben, ansonsten kriegt das nächste then den Wert nicht mehr.

Also gibt z.B.

Promise.resolve("Hello")
    .then(value => console.log(value))
    .then(value => console.log(value))

aus:

Hello
undefined

während

Promise.resolve("Hello")
    .then(value => (console.log(value), value))
    .then(value => console.log(value))

ausgibt:

Hello
Hello

(Falls unbekannt: Komma-Operator)


Das könnte in deinem Code für einige Probleme sorgen...

Lg

 

[Calmalor]

Hallo,

vielen Dank für die Antwort. Das war mir tatsächlich noch nicht ganz klar.

Ich habe die entsprechende Zeile mal angepasst. Das Ergebnis ist leider das gleiche.

const jsonData = fetching().then(value => (console.log(value), value));

In der Browserkonsole werden mir auch die Testweise eingesetzten Werte angezeigt.

Nur habe ich in meinen Eingabefeldern leider immer noch die gleiche Meldung. Ich werde es nochmal nur mit dem .then probieren.

 

[KingLM97]

Ich kenne mich nicht sonderlich gut mit JavaScript aus.
Dein Problem ist, dass du in deiner Methode das Ergebnis als Promise zurück gibst, du daher als noch einmal awaiten müsstest. Also statt

return Promise.resolve(await myResponse.json());

folgendes:

return await myResponse.json();

 

[FranzvonAssisi]

Nur habe ich in meinen Eingabefeldern leider immer noch die gleiche Meldung.

Eingabwfelder können auch keine Promise oder JavaScript Objekte anzeigen!

Da musst du schon im JavaScript warten und dann den Inhalt des Feld ersetzen.

Lg

 

[Calmalor]

Ich hatte bisher auch nur hauptäschlich mit C++ und Java zu tun.
Habe es jetzt nochmal umgebaut. Ohne das Promise führt es leider auch zum gleichen Ergebnis.

Ich hätte ja gerne, dass meine Funktion auf das Ergebnis wartet. Daher ja auch die async Funktionen und das await. Nur irgendwo scheine ich dabei noch einen Fehler zu machen.

Dabei habe ich mich an dem Beitrag auf Stackoverflow ganze unten orientiert. Das Ergebnis ist leider das gleiche.

async callExternalService(endpointAddress, contextData) {

        const data = {'context_data': contextData};
    
    
            return await fetch(endpointAddress, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
            })
            .then((response) =>
                response.json()
            )
            .then((data) =>  {
                console.log('Success:', data), data;
                return data;
            })
            .catch((error) => {
                console.error('Error:', error);
            });
  
    
    }

    async helper(endpointAddress, contextData) {
        var data = await this.callExternalService(endpointAddress, contextData);
        return data;
    }

 

[netzgestaltung]

Schaut für mich auf den 2. blick eigentlich so aus als ob nur ein return in der ersten then funktion fehlt.

ansonsten sind die halt unnötig oft verkettet:

async callExternalService(endpointAddress, contextData) {

  const data = {'context_data': contextData};

  return await fetch(endpointAddress, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
  .then((response) =>
    var data = response.json();
    console.log('Success:', data), data;
    return data;
  )
  .catch((error) => {
    console.error('Error:', error);
  });
}

async helper(endpointAddress, contextData) {
  var data = await this.callExternalService(endpointAddress, contextData);
  return data;
}

 

[Calmalor]

@netzgestaltung vielen Dank für den Hinweis. Sollte das "return data;" nicht ausreichen? Mir ist gerade aufgefallen, dass ich dort die geschweiften Klammern vergessen hatte. Das habe ich gerade noch in meinem Testcode ergänzt und vorsichtshalber das console.log weggelassen.
Hat leider auch nicht geholfen.

Ich habe gerade allerdings noch eine andere Lösung gefunden.
Ich lasse jetzt im .then eine vorher in der Klasse definierte Funktion aufrufen und die Webseite selber ausfüllen. Das funktioniert jetzt.

So schaut es aus:

.then((responseJson) =>  {
                this.populateInputField(inputFieldHtmlTag, responseJson);
            })

Ich mache mich jetzt mal an das Code aufräumen. Nach gestern schaut es alles etwas durcheinander aus
Und sollte jemanden trotzdem auffallen woran es gelegen hat, kann er sich gerne melden.

 

[netzgestaltung]

Sollte das "return data;" nicht ausreichen?

jede then funktion benötigt ein return wenn am schluss noch was rauskommen soll.
da du 2 thens verkettet hattest und eines davon kein return hatte wurde die kette mmn unterbrochen.

 

[jb_alvarado]

Was würde dagegen sprechen, das ganze then usw. raus zuhauen? Wenn die Funktion eh schon async ist, aber man auf das Ergebnis warten möchte, würde sich doch etwas wie folgend anbieten:

async callExternalService(endpointAddress, contextData) {
    const payload = { 'context_data': contextData };
    const response = await fetch(endpointAddress, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    const data = await response.json()
    return data
}