Question

我正在使用VUE和Axio从API获取Json。但是，当我尝试将我从API接收到的结果放在Vue实例之外的var中时，就是说该项为空。（如果我转到控制台并调用vueinstance.results，则会得到结果）。

var vueinstance = new Vue({
    el: '#app',
    data(){
        return {results: null }
         } ,
    methods: {
        callApiSearch: function (searchQuery) {
            axios
                .post('api/search', searchQuery)
                .then(response => (this.results = response.data))
        }
    }
});

var ajaxSearch = function callApi(searchQuery) {
    //Build Search Query
    if (typeof searchQuery === "string" || searchQuery instanceof String) {
        searchQuery = { Query: searchQuery };
    }
    vueinstance.callApiSearch(searchQuery);

    var test = vueinstance.results; <====== **HERE THE VALUE IS COMING NULL**

}

有人可以帮助我吗？谢谢。

Answer 1

callApiSearch方法正在执行异步操作； then回调将在收到HTTP响应后执行，该响应将在您访问vueinstance.results后的之后发生。

我建议您阅读JavaScript异步概念，promise，并发性等知识，以便您可以更好地理解这一点。在线上有很多与此相关的资源。

要解决此问题，请确保您的callApiSearch函数返回了promise：

callApiSearch: function (searchQuery) {
  return axios
    .post('api/search', searchQuery)
    .then(response => (this.results = response.data))
}

然后，当您调用该方法时，可以在请求完成后对返回的诺言使用then来执行代码：

vueinstance
  .callApiSearch(searchQuery)
  .then(() => {
    console.log(vueinstance.results)
  })

在Vue istance以外获得结果

1 个答案: