我怎样才能使这些诺言得到有序解决

时间:2019-06-07 17:13:35

标签: firebase vue.js promise vuex

在整个链完成之前,我遇到了Firebase Promise链解决的问题。我有一个登录和注册模式,可以在必要时向用户显示错误。我用VUEJ构建它

如果错误类似于电子邮件格式错误,则Promise链可以正常工作,并向用户显示正确的错误消息。当格式正确且请求实际上已发送到fire base时,.then将在完全解决初始firebase promise之前触发,导致我的signup方法语句中的if始终解析为false,并在错误发生之前重定向到/ dashboard从Firebase返回到应用程序。

我已经把这个东西戳了几个小时。我试图重组诺言链。我登录的组件具有完全相同的行为。

这是我单击注册按钮时触发的方法。

G.nodes[1]['attributelist'].append('Cat')
G.nodes(data=True)

NodeDataView({1: {'attributelist': ['Cat'], 'TestList': ['Value']}, 2:{'attributelist': ['a', 'b', 6], 'TestList': ['Value']}})

这是我的Vuex存储中方法分派给的操作

computed:{
    error () {
      return this.$store.getters.error
    }
},
methods: {
  signup () {
      const userProfile = {
        userName: this.userName,
        firstName: this.firstName,
        lastName: this.lastName,
        password: this.password,
        birthDate: this.birthDate,
        address: this.address,
        city: this.city,
        state: this.state,
        zip: this.zip,
        email: this.email
      }
      if (this.email && this.password && this.userName) {
        this.$store.dispatch('signUserUp', userProfile)
          .then( () => {
            if (this.error) {
              console.log(this.error)
              return this.feedback = this.error.message
            } else {
                return this.$router.replace('/dashboard')
            }
        })
      } else {
        return this.feedback = 'Please enter all required fields'
      }
    }
}

我想做的是对照数据库检查以确保用户名尚未被使用。如果已采取,我想向用户显示错误并保留在注册表单中。如果没有,我希望它创建新帐户,将配置文件上传到我的实时数据库,然后在一切成功的情况下重定向到/ dashboard。

这是我第一次100%自己使用该应用,所以请保持温柔。

感谢您的帮助!

2 个答案:

答案 0 :(得分:0)

如果您需要完成wait on the asynchronous code in your action,则您的操作应返回Promise

使此代码与当前代码一起使用的最简单方法*可能是将其包装在新的Promise中。

signUserUp({commit}, payload) {
    return new Promise(function(resolve, reject) {
        /* existing function body */
    });
}

然后在异步代码完成后将调用添加到resolve()。 (例如,此时:console.log('user profile uploaded')或出现错误之一。)一旦调用resolve回调,它将在您的signup方法中调用then处理程序。您也可以使用拒绝回调来拒绝Promise。但是,就您而言,您似乎希望该操作本身处理错误而不传播错误。

*由于Firebase API似乎使用了promises,因此您也可以尝试返回firebase函数的结果。

答案 1 :(得分:0)

the documentation中所述,signUserUp应该返回一个诺言,以便与this.$store.dispatch('signUserUp', userProfile).then(...)链接起来。 Firebase支持可能的承诺。可以将once()链接到async..await并将诺言链弄平:

async function signUserUp({commit}, payload) {
  try {
    ...  
    const snapshot = await firebase.database().ref('users/' + slug).once('value');
    ...
    const cred = await firebase.auth().createUserWithEmailAndPassword(payload.email, payload.password);
    ...
  } catch (error) {
    commit('setLoading', false)
    commit('setError', error)
  }
}