Vue组件async异步函数内使用props传入的web3变量出现undefined报错如何解决

你代码存在3个明确问题： #

• this指向异常：你定义的独立async function getTimestamp()没有绑定Vue组件实例作为执行上下文，运行时this并不指向当前组件，自然无法读取到props里的web3，所以抛出undefined错误。
• 异步返回值读取错误：async函数默认返回Promise对象，直接console.log(getTimestamp())打印的是Promise实例，无法直接拿到最终返回的时间戳，必须通过await或者.then()回调读取异步结果。
• 逻辑冗余错误：你已经通过await this.web3.eth.getBlock(blockNum)获取到了完整区块对象，直接读取block.timestamp即可，不需要重复调用getBlock接口，多余的await也属于无效语法。

对应修复方案 #

场景1：Vue2 选项式API

export default {
  props: ['web3'],
  // 方法必须写在methods内，Vue会自动绑定组件实例作为this
  methods: {
    async getTimestamp(blockNum) {
      const block = await this.web3.eth.getBlock(blockNum)
      return block.timestamp
    }
  },
  // 调用异步方法必须在async上下文内
  async mounted() {
    const timestamp = await this.getTimestamp(你的blockNum变量)
    console.log(timestamp)
  }
}

场景2：Vue3 组合式API

<script setup>
// 组合式API不需要this，直接通过props对象读取属性
const props = defineProps(['web3'])

const getTimestamp = async (blockNum) => {
  const block = await props.web3.eth.getBlock(blockNum)
  return block.timestamp
}

// 调用示例
const fetchTs = async () => {
  const timestamp = await getTimestamp(你的blockNum变量)
  console.log(timestamp)
}
fetchTs()
</script>

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