如何等待异步函数完成答案

【问题标题】：How wait for asynchronous function to complete如何等待异步函数完成
【发布时间】：2016-12-12 06:00:59
【问题描述】：

我正在上传表单中的图像，并且表单正在提交到 Firebase 数据库，我还想将图像 URL 发送到 Firebase 数据库。

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

但问题是图像 URL 来自异步函数，返回 URL 需要一点时间，但表单会立即提交，因此 imgUrl 的值设置为 undefined。

【问题讨论】：

stackoverflow.com/questions/14220321/…
你能根据我的代码指导我吗

标签： javascript function reactjs firebase firebase-realtime-database

【解决方案1】：

在里面提交你的表单然后阻止。

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

【讨论】：

【解决方案2】：

问题是这个语句that.setState({url: snapshot.downloadURL});是在回调中执行的，而表单提交是在回调之外的。

虽然您会在快照响应之后正确地setState，但在我们等待来自异步代码的响应时，放置在回调之外的表单提交代码会被执行。事实上，表单提交发生在你之前setState。

解决方案是在异步函数的回调中执行表单提交代码。还要记住State Updates May Be Asynchronous。

所以我建议你这样做：

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

【讨论】：