Vue中的函数同步执行导致的数据获取失败问题处理办法

  data() {
    return {
      userInfo: null
    }
  },
  mounted() {
    const promise = new Promise((resolve, reject) => {
      // 第一个函数执行完后，给 userInfo 赋值
      resolve('Some data');
    });

    promise.then((data) => {
      this.userInfo = data;
      // 第二个函数获取到的 userInfo 就不再是空值了
      this.secondFunction();
    });
  },
  methods: {
    secondFunction() {
      console.log(this.userInfo); // 输出 'Some data'
    }
  }
});

  data() {
    return {
      userInfo: null
    }
  },
  async mounted() {
    await this.firstFunction();
    await this.secondFunction();
    console.log(this.userInfo); // 输出 'Some data'
  },
  methods: {
    firstFunction() {
      return new Promise((resolve) => {
        setTimeout(() => {
          this.userInfo = 'Some data';
          resolve();
        }, 1000);
      });
    },
    secondFunction() {
      return new Promise((resolve) => {
        // 这里可以执行另一个异步操作
        resolve();
      });
    }
  }