Vue中如何获取Axios请求返回值？已查Stack Overflow仍未解决

我来帮你搞定这个问题！你遇到的核心问题是异步请求的处理逻辑有误，咱们一步步拆解修改：

为什么原来的代码不生效？ #

你的ajaxSearchAxios函数里，return searchResults是写在.then的回调函数里的，这并不是整个ajaxSearchAxios函数的返回值——而且你根本没让ajaxSearchAxios返回Axios的Promise对象。所以当Vue的ajaxSearch方法直接赋值this.SearchResults = ajaxSearchAxios(...)时，拿到的是undefined（因为函数没返回任何东西），这时候请求甚至还没完成，自然拿不到结果。

修改后的代码实现 #

第一步：修正File1.js的ajaxSearchAxios函数

让它直接返回Axios的Promise，这样外部就能通过异步方式获取结果：

function ajaxSearchAxios(searchType, searchText){
  // 直接返回axios发起请求后得到的Promise对象
  return axios({
    method: 'post',
    url: 'ajaxSearch/',
    data: {
      searchType: searchType,
      searchText: searchText,
    },
    responseType: 'json',
  })
  .then(function (response){
    const searchResults = response.data['searchResults'];
    console.log('JS searchResults=', searchResults[0].value);
    return searchResults; // 这里返回的结果会被Promise传递给调用方
  })
  .catch(function (error){
    console.log('ajaxSearch error');
    throw error; // 抛出错误，让调用方可以捕获并处理
  });
}

第二步：修改Vue中的调用逻辑

因为现在ajaxSearchAxios返回的是Promise，我们需要用异步等待的方式来获取结果，推荐用async/await（更直观）：

new Vue({
  el:'#id_1',
  data:{
    SearchResults:[],
  },
  methods:{
    async ajaxSearch(searchType){
      try {
        // 等待ajaxSearchAxios的异步请求完成，拿到结果后再赋值
        this.SearchResults = await ajaxSearchAxios('s','s1');
        console.log('VUE =', this.SearchResults[0].value);
      } catch (error) {
        // 这里可以处理请求失败的情况
        console.error('获取搜索结果失败:', error);
      }
    },
  },
});

如果你习惯用.then的写法，也可以这样：

new Vue({
  el:'#id_1',
  data:{
    SearchResults:[],
  },
  methods:{
    ajaxSearch(searchType){
      ajaxSearchAxios('s','s1')
        .then(searchResults => {
          this.SearchResults = searchResults;
          console.log('VUE =', this.SearchResults[0].value);
        })
        .catch(error => {
          console.error('获取搜索结果失败:', error);
        });
    },
  },
});

这样修改后，就能把Axios请求到的结果正确存入Vue的data里了～

内容的提问来源于stack exchange，提问作者Aseem