How wait for asynchronous function to complete

Question

I am uploading an image in a form and the form is getting submitted to Firebase Database and I also want to send along the image URL to Firebase Database.

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
});

But the problem is that the image URL is coming from an asynchronous function and it takes a little bit giving back the URL, but the form is getting submitted immediately, so the value of imgUrl is setting undefined.

http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Sterling Archer, Dec 12 '16 at 06:05

score 2 · Answer 1 · answered Dec 12 '16 at 06:10

submit your form inside then block.

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
            });
            });

score 1 · Accepted Answer · answered Dec 12 '16 at 07:16

The problem is that this statement that.setState({url: snapshot.downloadURL}); is executed in the callback and the form submission is outside the callback.

Although you will setState correctly after the snapshot response, the form submission code placed outside the callback gets executed while we are waiting for the response from our async code. In fact, form submission happens before you setState.

The solution is to execute the form submission code inside the async function's callback. Also keep in mind State Updates May Be Asynchronous.

So I recommend you do it as follows:

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'
});

How wait for asynchronous function to complete

2 Answers2