如何用async/await改写Vue.js中Firebase用户登录认证逻辑？

没问题！把这段用then()/catch()的Firebase登录逻辑改成async/await其实非常直观，我帮你改写后的完整代码如下，功能和原来完全一致，可读性还更强：

<template>
  <div>
    <form @submit.prevent="userLogin">
      <h3>Sign In</h3>
      <div>
        <label>Email address</label>
        <input type="email" v-model="user.email" />
      </div>
      <div>
        <label>Password</label>
        <input type="password" v-model="user.password" />
      </div>
      <button type="submit">Sign In</button>
    </form>
  </div>
</template>

<script>
import firebase from 'firebase'

export default {
  name: 'Login',
  data() {
    return {
      user: {
        email: '',
        password: ''
      }
    };
  },
  methods: {
    // 给方法添加async关键字，标记为异步函数
    async userLogin() {
      try {
        // 用await等待登录Promise完成，替代原来的then()
        await firebase.auth().signInWithEmailAndPassword(this.user.email, this.user.password);
        // 登录成功后跳转到首页
        this.$router.push('/');
      } catch (error) {
        // 捕获登录错误，替代原来的catch()
        alert(error.message);
      }
    }
  }
}
</script>

关键改动说明： #

• 在userLogin方法前添加async关键字，把它声明为异步函数，这样才能在内部使用await语法
• 用try/catch块包裹异步操作：
  • try块里用await等待signInWithEmailAndPassword返回的Promise完成，登录成功后直接执行跳转逻辑
  • catch块捕获登录过程中抛出的错误，和原来的.catch()作用完全一致

这种写法让异步代码看起来更像同步逻辑，可读性比链式调用then()要好很多，尤其在复杂的异步流程里优势更明显。

内容的提问来源于stack exchange，提问作者user14543107