Question

我正在尝试获取对象中的评论回复。从后端，即LARAVEL，我收到1个对象。但是，在Vue中它变得不确定

方法

fetchReplies(commentid) {
  axios
    .get("/reply/" + commentid)
    .then(res => {
      if (res.data != null) {
        console.log(res.data);
        return res.data;
      }
    })
    .catch(function(err) {
      console.log(err);
    });
}

输出

（2）[{…}，{…}] //用于注释ID 42

但是在其他方法中使用此方法

fetchComments() {
  var boardid = this.boardid;
  axios
    .get("/comment/" + boardid)
    .then(res => {
      if (res.data != null) {
        this.comments = res.data;
           console.log(this.fetchReplies(42));
        }

    })
    .catch(function(err) {
      console.log(err);
    });
},

输出

未定义

一段时间之前，当我在Vue中获取内容时，我收到了1个包含数据的对象和一个没有数据的对象。但是，那个没有数据的对象突然消失了。

Answer 1

Axios是一个异步调用，因此似乎在fetch调用返回之前已调用console.log。使用axios的最便捷方法是在es2017 async / await中调用它。

Answer 2

您的console.log(this.fetchReplies(42));正在调用一个仍在异步状态下作为axios运行的函数

如果将fetchComments设为async function，则可以等到fetchReplies完成后再进行记录。

添加了一个代码段，确保axios也返回了一些内容。

let results = await this.fetchReplies(42)
console.log(results)

const URL = 'https://jsonplaceholder.typicode.com/posts';
    new Vue({
        el: "#app",
        data: {
            comments : '',
            replies : ''
        },
        methods: {
            fetchReplies(id) {
                return new Promise((resolve, reject) => {
                    axios
                        .get(URL)
                        .then(res => {
                            if (res.data != null) {
                                resolve(res.data)
                            } else {
                                reject('RejectReason')
                            }

                        })
                        .catch(function (err) {
                            console.log(err);
                            reject(err)
                        });
                })
            },
            async fetchComments() {
                axios
                    .get(URL)
                    .then(async res => {
                        if (res.data != null) {
                            //Result from comments is in
                            this.comments = res.data;
                            let replies = await this.fetchReplies(1);
                            this.replies = replies;
                        }
                    })
                    .catch(function (err) {
                        console.log(err);
                    });
            }
        }
    })

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <button @click="fetchComments()">
        Some text
    </button>
    <h1>Comments</h1>
    {{comments}}
    <h2>Replies</h2>
    {{replies}}
</div>

更新：更改代码段以在模板中可视地更改数据

Vue方法在其他方法中使用时返回未定义

2 个答案: