fetch api post request zurückkehrendes Objekt funktioniert nicht wie erwartet

Question

Ich hole eine API, und es funktioniert gut. Aber in diesem Fall ist bzw. immer null. Ich frage mich, wie das Ergebnis dieser Post-Anfrage auf die resp var auswirken.

var resp = null 

fetch('http://a1a239a6.ngrok.io/api/login', { 
    method: 'POST', 
    headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
    }, 
    body: "email=" + email + "&password=" + password, 
    }).then((response) => response.json()) 
    .then((responseJson) => resp = responseJson) 
    .catch((error) => console.error(error)) 

if (resp != null) { 
    navigate('Welcome', { 
    user: resp 
    }) 
    console.log(resp) 
} 

Answer 1

Ich denke, es liegt daran, dass die Anweisung mit Navigationsfunktion vor den api Antworten ausgeführt wird (asynchron)

Sie müssen es in Ihrer dann Aussage bewegen :)

Answer 2

Sie das verwenden sollten Callbacks, wenn Sie Daten an eine Variable binden möchten.

fetch('http://a1a239a6.ngrok.io/api/login', { 
    method: 'POST' 
}).then(function(response) { 
    navigate('Welcome', { user: response}) 
}).catch(function(err) { 
    // Error 
}); 

Also, bei Erfolg, wird es automatisch Ihre Navigationsfunktion ausführen, Sie würden wahrscheinlich Ihre abgerufenen Daten dort überprüfen möchten, bevor dies geschieht.

Bei Fehler können Sie jetzt ein Modal ausführen oder eine gewünschte Aktion ausführen.

Problem mit Ihrem vorherigen Code war, würde es sowieso async ausführen, also selbst wenn in Callback Sie bzw. abgerufene Daten setzen würde, würde die Logik bereits ausgeführt werden und überprüfen Sie die Null-Variable.