rest - Vuejs 中的异步和等待

Question

我在使用 VueJS、axios、Async/Await with Promise(??) 从 REST-API 检索数据时遇到问题。我需要调用两个不同的 REST-API。一个是给我一个列表，我可以遍历它，这很好。

<template>
  <div>
  <div v-if="posts && posts.length">
    <div v-for="post of posts">
       {{post.name}}        
       <img :src="getUserPicturePath(post.name)" />
      </div>
    </div>
  </div>
</template>

另一个，如您所见，在 v-for 之间，正在调用一个使用 axios 的方法。

<script>
import axios from 'axios'
export default {
  data: () => {
    posts: []
  }
  created() {
  // a method to fill up the post-array
 },
   methods: {
    async getUserPicturePath(name){
      const response = await axios.get('linkToApi'+name)
      console.dir(response.data.profilePicture.path)
      return response.data.profilePicture.path
    }
  }
}
</script>

console.dir(response.data.profilePicture.path) - 部分给出了 profilePicture 的正确路径，但是 <img :src="getUserPicturePath(post.name)" />以上在 <template> , 写道 [Object Promise] .

关于如何获取路径有什么建议吗？

Answer 1

Vue 无法解决属性中的 promise ，因此您必须这样做。

模板

<div v-for="post of posts">
  ...
  <img :src="post.profilePicture" />
  ...

JavaScript

export default {
  created() {
    this.posts = ...
    await Promise.all(this.posts.map(async post => {
      post.profilePicture = await this.getUserPicturePath(post.name);
    }));
  }
}