Vue模板绑定async函数返回Promise对象问题求助

模板里直接调用async方法会返回Promise对象，Vue模板无法自动等待Promise解析完成，所以会直接显示[object Promise]。另外你原来的代码还有两个关键问题：

1. fetch_dpids方法没有返回值，即便用await也拿不到有效结果
2. 每次调用都重新请求整个接口，重复请求性能极差

核心思路是提前缓存接口数据，预计算好所有需要显示的值，避免在模板中调用异步方法。

修改后的完整代码 #

<template>
  <k-accordion>
    <k-accordion-item title="Best Paths">
      <div>
        <k-property-panel v-for="(path, index) in processedContent" :key="index">
          <k-accordion-item :title="format_title(index, path.cost)">
            <k-property-panel-item 
              v-for="(hop, path_index) in path.processedHops"
              :name="String(path_index)" 
              :value="hop.displayValue" 
              :key="path_index">
            </k-property-panel-item>
          </k-accordion-item>
        </k-property-panel>
      </div>
    </k-accordion-item>
  </k-accordion>
</template>

<script>
module.exports = {
  props: ["content"],
  data() {
    return {
      display: false,
      paths: [],
      headers: ["dpid"],
      rows: [this.content],
      interfacesData: null, // 缓存接口原始数据
      processedContent: [] // 预计算好的带显示值的内容
    };
  },
  watch: {
    // 监听content变化，初始化时也自动执行
    content: {
      immediate: true,
      async handler(newVal) {
        if (!newVal) return;
        
        // 确保接口数据已加载
        if (!this.interfacesData) {
          await this.fetchInterfaces();
        }
        
        // 预计算每个hop对应的显示值
        this.processedContent = newVal.map(path => {
          const processedHops = path.hops.map(cur_path => ({
            original: cur_path,
            displayValue: this.getFormattedDpid(cur_path)
          }));
          return { ...path, processedHops };
        });
      }
    }
  },
  methods: {
    format_title(index, cost) {
      return `Path ${index}, cost: ${cost}, hops:`;
    },

    // 仅请求一次接口，缓存原始数据
    async fetchInterfaces() {
      try {
        const response = await fetch('/api/myAPI/topology/v3/interfaces');
        const data = await response.json();
        this.interfacesData = data.interfaces;
      } catch (error) {
        console.error(error);
      }
    },

    // 同步方法：从缓存数据中生成格式化后的显示值
    getFormattedDpid(x) {
      if (!this.interfacesData) return x; // 数据未加载时返回原始值
      const item = this.interfacesData[x];
      return item?.name ? `${item.name} - ${x} - ${item.mac}` : x;
    }
  }
};
</script>

关键优化点 #

1. 缓存接口数据：只请求一次API，把原始数据存在interfacesData中，避免重复请求
2. 预计算显示值：通过watch监听content变化，提前把每个cur_path对应的格式化值计算好，存在processedContent里
3. 模板绑定同步数据：直接在模板中使用预计算好的displayValue，彻底避免异步调用问题

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