Vue.js - 内联调用异步方法答案

【问题标题】：Vue.js - Calling an asynchronous method inlineVue.js - 内联调用异步方法
【发布时间】：2019-06-14 16:55:40
【问题描述】：

我想使用一个方法在 v-for 循环中进行 API 调用，目的是根据 UID 加载对象。

我的方法是这样的：

methods: {
  async getTodo(uid) {
  const data = await axios.get(
    "https://jsonplaceholder.typicode.com/todos/" + uid
  );
  return data;
}

}

据我了解，您可以像这样包含内联方法：

{{ getTodo(2) }}

但是这总是返回 [object Promise]

我一定是误解了为此目的使用方法，或者方法本身的异步调用是不正确的——如果有人能澄清这里的问题的话。

【问题讨论】：

这是一个承诺 - 将值传递给数据而不是返回

标签： javascript vue.js axios

【解决方案1】：

当 promise 返回时，您可以将异步响应存储在反应式数组中。由于它是响应式的，因此一旦每个 promise 返回，promise 响应就会自动显示。

执行以下操作：

export default {
  data: {
    asyncDataHolder: []
  },
  methods: {
    async getTodo(uid) {
    const data = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/" + uid
    );
    let index = asyncDataHolder.length + 1;
    asyncDataHolder.$set(index, data);
}

在您的 v-for 循环内：

{{asyncDataHolder[i]}}

【讨论】：

我永远不会说做这种事情的理想逻辑。有很多其他的解决方案非常干净来获得这个结果。此外，给定的解决方案有一个巨大的缺点：如果用户在此页面上停留的时间足够长，它将导致内存爆炸，因为您的index 与uid 没有链接。您至少可以将数据存储在对象而不是数组中。另一个缺点是您从不调用getTodo 方法。我会在 mounted 钩子中执行此操作。
好吧，你是对的。我已经更新了答案。关于mounted hook，不清楚整个流程...这就是为什么我专注于只给他一个可行的选项。为你的笔记点赞。