xmlhttprequest synchron

[malt1981]

Hallo zusammen,

ich weiß ich bin grundsätzlich im falschen Forum. Aber es gibt ja immerhin die Kategorie javaScirpt und hier wurde mir im Bereich java schon oft geholfen.
Deswegen hätte ich es einach versucht.

Mein Problem ist folgendes: synchrone xmlhttprequests sind ja deprecated. Ich komme aber an der ein oder anderen Stelle nicht darum herum, dass das scirpt/der Browser warten muss, bis Daten vom server fertig geladen sind. Ich habe wirklich schon Stunden im Netz verbracht und Alternativen gesucht (fetch, await, callback...) aber ich bekomme keine Lösung für mich passend umgesetzt. Ich wäre dankbar, wenn mir jemand bei meinem konkreten Problem helfen könnte.

Was möchte ich machen: ich habe eine funktion, die im Ablauf z.B.: einen Kunden benötigt, den ich vom Server laden möchte. Damit das Scirpt etwas aufgeräumt ist, hätte ich das laden in eine eigene Funktion gpackt und mir den Kunden als objekt geladen. also:

[CODE lang="javascript" title="funktion"]function tuEtwas() {

//...

//jetzt brauche ich den Kunden
let kunde = ladeKunde(kundennummer);

//jetzt mit den Kunendaten arbeiten

//...

}

function ladeKunde(kundennummer) {

let request = new XMLHttpRequest();
request.onload = () => {
if (request.status === 200) {
kunde = JSON.parse(request.responseText);
return kunde;
} else {
console.log("ergebnis konnte nicht geladen werden: " + request.responseText);
window.alert("Ergebnis konnte nicht geladen werden");
}
}
request.open("GET", "/url" + kundennummer);
request.send();


}[/CODE]

Problem ist jetzt natürlich, dass das synchron problemlos klappt. Asynchron meckert der Browser, das kunde undefined ist - weil eben schon weiter gemacht wird, bevor der requst zurück gekommen ist.
Mit jQuery bekomme ich das aktuell hin - aber ich glaube dass auch bei jQuery die async Funktion deprecated ist, oder?

Es muss doch hier eine Möglichkeit geben, dass so oder so ähnlich hin zu bekommen, oder?
Ich bin wirklich sehr dankbar für eure Hile - wie gesagt, bin seit Stunden / Tagen am suche nach einer Lösung für dieses - wie ich finde - doch einfaches Problem.
ich denke ist stell mich einfach nur zu blöd an :-(

Nachtrag: Ich nutze eingentlich kein jQuery und würde deswegen lieber bei originärem Javasript bleiben.
Wenn es mit jQuery aber eine "nachhaltige" Lösung gibt, gerne auch so.

vg
malt1981

 

[Robertop]

Könnte man das nicht über einen Callback in deiner onload lösen?
Also zum Beispiel du lagerst alles, was nach dem laden mit dem Kunden passieren soll, in die Funktion verarbeiteKunde(kunde) aus und machst am Ende von deiner onload anstatt return kunde den Aufruf verarbeiteKunde(kunde).

 

[Oneixee5]

sollte eigentlich funktionieren:

function ladeKunde(kundennummer, callback) {
  
    let request = new XMLHttpRequest();
    request.onload = () => {     
        if (request.status === 200) {         
            kunde = JSON.parse(request.responseText);
            if (typeof callback == 'function') {
                callback(kunde);
            }
        } else {
            console.log("ergebnis konnte nicht geladen werden: " + request.responseText);
            window.alert("Ergebnis konnte nicht geladen werden");
        }     
    } 
    request.open("GET", "/url" + kundennummer);
    request.send();
}

let fnc = function(kunde) {
    console.log(kunde);
};
ladeKunde(12345, fnc)

 

[malt1981]

Hallo zusammen,
vielen Dank für eure Hilfe. Das mit der callback Funktion würde schon gut passen, weil ich dann nicht alles komplett umbauen müsste - und der code einfach auch übersichtlicher ist (finde ich). Leider klappt es aber nicht :-( Untenstehend habe ich jetzt mal eine Testfunktion geschrieben. Warum klappt das so nicht? Die Variable Kunde ist immer noch undefined. Ich muss leider zugeben, dass ich das mit dem Callback nicht so ganz verstehe :-(

function testajax() { //die eigentliche Funktion
    
    console.log("hier staret es....");
    
    //Kunden laden
    let fnc = function(kunde) {
        console.log("test : " + kunde);
    };   
    let kunde = ladeKunde(12345, fnc);
    
    //mit dem Kunden weiter arbeiten
    console.log("....kunde: " + kunde);            //das ist leider immer noch undefined
    
    console.log("...hier geht es weiter");
    
                                                //hier wird dann das Ergebnis in die Konsole geschrieben
    
}

function ladeKunde(kundennummer, callback) {
 
    let request = new XMLHttpRequest();
    request.onload = () => {     
        if (request.status === 200) {         
            let kunde = JSON.parse(request.responseText);
            if (typeof callback == 'function') {
                callback(kunde);
            }
        } else {
            console.log("ergebnis konnte nicht geladen werden: " + request.responseText);
            window.alert("Ergebnis konnte nicht geladen werden");
        }     
    }
    request.open("GET", "/xxxx/webapi/test/testajax");
    request.send();
}

 

[Oneixee5]

Hallo zusammen,
vielen Dank für eure Hilfe. Das mit der callback Funktion würde schon gut passen, weil ich dann nicht alles komplett umbauen müsste - und der code einfach auch übersichtlicher ist (finde ich). Leider klappt es aber nicht :-( Untenstehend habe ich jetzt mal eine Testfunktion geschrieben. Warum klappt das so nicht? Die Variable Kunde ist immer noch undefined. Ich muss leider zugeben, dass ich das mit dem Callback nicht so ganz verstehe :-(

function testajax() { //die eigentliche Funktion
   
    console.log("hier staret es....");
   
    //Kunden laden
    let fnc = function(kunde) {
        console.log("test : " + kunde);
    };  
    let kunde = ladeKunde(12345, fnc);
   
    //mit dem Kunden weiter arbeiten
    console.log("....kunde: " + kunde);            //das ist leider immer noch undefined
   
    console.log("...hier geht es weiter");
   
                                                //hier wird dann das Ergebnis in die Konsole geschrieben
   
}

function ladeKunde(kundennummer, callback) {
 
    let request = new XMLHttpRequest();
    request.onload = () => {    
        if (request.status === 200) {        
            let kunde = JSON.parse(request.responseText);
            if (typeof callback == 'function') {
                callback(kunde);
            }
        } else {
            console.log("ergebnis konnte nicht geladen werden: " + request.responseText);
            window.alert("Ergebnis konnte nicht geladen werden");
        }    
    }
    request.open("GET", "/xxxx/webapi/test/testajax");
    request.send();
}

ladeKunde gibt nichts mehr zurück. Nach dem Aufruf musst du mit Kunde in der callback-funktion weiter arbeiten, nicht nach ladeKunde.

 

[malt1981]

ah, ok. Danke. Jetzt hab ichs verstanden.
Ist leider nicht ganz das was ich mir erhofft habe, weil es ja im Grunde das Selbe ist, als wenn den request in die "Hauptfunktion" (testajax()) rein packe und dann innerhalb der onload funktion weitermache. Das macht den code wie ich finde ziemlich unübersichtlich, weil ich unterumstäden mehrere serveranfragen tätige. Also alles ineinander schachteln :-( wenn es noch irgend einen Weg gäbe, dass man "einfach" das Skript warten lässt, bis die Funktion (lade Kunde) einen Wert zurück gibt, wäre das schon schön. Ansonsten ist die Lösung mit der Callback Funktion in jedem Fall übersichtlicher in der Hauptfunktion, als wenn ich mehrere xmlhttp requests ineinander verschachtle - dann lieber ein paar Callback Funktionen ineinander schachteln. Danke in jedem Fall für die schnelle und gedultige Hilfe

 

[Oneixee5]

Das es unübersichtlich wird liegt ja an dir. Du verwendest veralteten JS-Code im Stiel der Prozeduralen-Programmierung. So ist JS längst nicht mehr, modernes JS ist funktional, bspw. verwendet man nicht mehr das function Schlüsselwort mit seinen Seiteneffekten. Mit JS kann man ganz sauberen objektorientierten Code schreiben und notfalls mit einen Compiler für alter Browser umformen. Auch das Warten ist eine ganz schlechte Idee, weil es die Oberfläche im Browser blockieren würde. Welcher Nutzer will schon eine ruckelnde Webseite. Kaskaden von Ajax-Requests sollten auch schon durch saubere Programmierung vermeidbar sein. Notfalls lädt man eben ein paar Daten etwas früher als man sie braucht. Es ist ja nicht notwendig diese Daten zu vergessen und dann neu zu laden.

 

[mihe7]

Was möchte ich machen: ich habe eine funktion, die im Ablauf z.B.: einen Kunden benötigt, den ich vom Server laden möchte. Damit das Scirpt etwas aufgeräumt ist, hätte ich das laden in eine eigene Funktion gpackt und mir den Kunden als objekt geladen. also:

Ich verstehe gerade das Problem nicht ganz. Das kannst Du doch mit async/await lösen:

async function tuWas() {
    let todo = await ladeTodo(1);
    console.log(todo);
}

async function ladeTodo(nummer) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/" + nummer);
    const data = await response.json();
    return data;
}

 

[malt1981]

@Oneixee5
ja, da hast du in jedem Fall Recht. Ist nur leider keine neue Anwendung - im Grunde wäre es am Besten alles einmal vernünftig neu aufzubauen. Aktuell ist eher das Anliegen, das Prgramm am laufen zu halten :-(

@mihe7
das ist perfekt Ich hab sowas schon versucht - habs aber nicht hin bekommen. Bzw. arbeite ich auch mit eclipse - und hier bekomme ich im Editor viele Fehler angezeigt - funktioniert aber trotzdem. Hab mich da auch zu sehr auf die Fehlermeldung im Editor verlassen und hab async await deswegen aufgegeben bzw. nicht weiter probiert.

In jedem Fall Danke an alle - jetzt komme ich weiter und das Wochenende ist gerettet