休息 – 在Vuejs中异步和等待

发布时间：2020-12-15 02:19:56 所属栏目：Java 来源：网络整理

导读：我无法使用VueJS,axios,Async / Await和Promise(??)从REST-API检索数据. 我需要调用两个不同的REST-API.一个是给我一个列表,我可以迭代它,这很好. template div div v-if="posts posts.length" div v-for="post of posts" {{post.name}} img :src="getUserPi

我无法使用VueJS,axios,Async / Await和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].

有什么建议我怎么能走这条路？

解决方法

你也许可以去

<template> 
   ...
   <img :src="img_path" v-if="img_path">
   ...
</template>
<script>
   ...
   data() {
       ...
       img_path: "",img: "userImg.png"
   }

   // or however you wish to pass user image and trigger loading
   create() {
      this.getUserPicturePath(this.img)
   },methods: {
      getUserPicturePath(name){                 
            axios.get('getImage/'+name)
                .then(response => {
                    this.img_path = response.data.path
                    console.dir(response.data.path)
                })
                .catch(error =>{
                    // ... error
                })                
        },}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!