为何setLastUpdate无法读取async赋值的lastUpdate？如何修复？

问题原因 #

• 核心是异步代码执行时序问题：parseData是异步函数，内部API请求需要等待服务器响应才能完成lastUpdate的赋值，但你调用setLastUpdate的时机早于API请求完成时间，此时lastUpdate还未被赋值，因此读取为空。
• 单纯将setLastUpdate改为async无效，因为async函数本身不会阻塞代码执行，只要没明确等待异步操作完成，调用时机依然不对。

重构方案 #

方案1：异步操作完成后调用setLastUpdate #

直接在parseData的API请求完成后调用setLastUpdate，确保lastUpdate已被赋值：

data() {
  return {
    lastUpdate: '',
    items: []
  }
},
methods: {
  async parseData() {
    const res = await fetch('你的API接口地址');
    const apiData = await res.json();
    this.lastUpdate = apiData.last_update;
    // API请求完成后再调用setLastUpdate
    this.setLastUpdate();
  },
  setLastUpdate() {
    console.log(this.lastUpdate); // 正常读取到值
    this.items.push(this.lastUpdate);
  },
  init() {
    this.parseData();
  }
}

方案2：初始化时等待异步操作完成 #

让初始化函数变为async，等待parseData执行完毕后再调用setLastUpdate：

methods: {
  async parseData() {
    const res = await fetch('你的API接口地址');
    const apiData = await res.json();
    this.lastUpdate = apiData.last_update;
  },
  setLastUpdate() {
    console.log(this.lastUpdate);
    this.items.push(this.lastUpdate);
  },
  async init() {
    // 等待parseData的异步请求完成
    await this.parseData();
    this.setLastUpdate();
  }
}

方案3：通过监听自动触发更新 #

如果lastUpdate可能在多处被修改，用Vue的watch监听其变化，自动触发setLastUpdate：

data() {
  return {
    lastUpdate: '',
    items: []
  }
},
watch: {
  lastUpdate(newVal) {
    // 确保有值再执行
    if (newVal) {
      this.setLastUpdate(newVal);
    }
  }
},
methods: {
  async parseData() {
    const res = await fetch('你的API接口地址');
    const apiData = await res.json();
    this.lastUpdate = apiData.last_update;
  },
  setLastUpdate(val) {
    console.log(val);
    this.items.push(val);
  }
}

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