Wie warten, bis die asynchrone Funktion abgeschlossen ist

Question

Ich lade ein Bild in ein Formular hoch und das Formular wird an die Firebase-Datenbank gesendet und ich möchte auch die Bild-URL an die Firebase-Datenbank senden.

var {image} = this.state; 
 
var {url} = this.state; 
 
var that = this; 
 

 
var storageRef = firebase.storage().ref('students_images/' + image.name); 
 
storageRef.put(image).then(function(snapshot) { 
 
    that.setState({ 
 
    url: snapshot.downloadURL 
 
    }); 
 

 
}); 
 
var studRef = firebaseRef.child('students'); 
 
var newStudRef = studRef.push().update({ 
 
    name: val['name'].value, 
 
    email: val['email'].value, 
 
    age: val['age'].value, 
 
    date: val['jdate'].value, 
 
    course: val['course'].value, 
 
    imgUrl: url 
 
});

Aber das Problem ist, dass die Bild-URL von einer asynchronen Funktion kommt und es dauert ein wenig die URL zurück geben, aber die Form sofort vorgelegt bekommen, so dass der Wert von imgUrl setzt nicht definiert.

Answer 1

Das Problem ist, dass diese Aussage that.setState({url: snapshot.downloadURL}); in der Callback ausgeführt wird, und die Formularübermittlung außerhalb des Rückrufs.

Obwohl Sie setState korrekt nach der Snapshot-Antwort werden, wird der Formularübergabecode außerhalb des Rückrufs ausgeführt, während wir auf die Antwort von unserem Async-Code warten. In der Tat passiert Formular Einreichung vor Ihnen setState.

Die Lösung besteht darin, den Formularübergabecode innerhalb des Callbacks der asynchronen Funktion auszuführen. Beachten Sie auch State Updates May Be Asynchronous.

So empfehle ich Ihnen, es zu tun, wie folgt:

var { image, url } = this.state; 
var storageRef = firebase.storage().ref('students_images/' + image.name); 
var studRef = firebaseRef.child('students'); 

var that = this; 
storageRef.put(image).then(function(snapshot) { 

    var newStudRef = studRef.push().update({ 
     name: val['name'].value, 
     email: val['email'].value, 
     age: val['age'].value, 
     date: val['jdate'].value, 
     course: val['course'].value, 
     imgUrl: snapshot.downloadURL 
    }); 

    that.setState({ url: snapshot.downloadURL }); 

    // ... do more things with 'snapshot' or 'newStudRef' 
}); 

Answer 2

senden Sie Ihr Formular innerhalb dann blockieren.

var storageRef = firebase.storage().ref('students_images/' + image.name); 
      storageRef.put(image).then(function (snapshot) { 

       that.setState({url: snapshot.downloadURL}); 

       var studRef = firebaseRef.child('students'); 

      var newStudRef = studRef.push().update({ 
       name: val['name'].value, 
       email: val['email'].value, 
       age: val['age'].value, 
       date: val['jdate'].value, 
       course: val['course'].value, 
       imgUrl: snapshot.downloadURL 
      }); 
      });