Как вернуть ответ от axios в Vue

Question

Я прочитал все ответы на вопросы о переполнении стека, но все еще не могу понять, как заставить это работать.

File1.js

Я отправляю некоторые данные на сервер, используя ajax-вызов axios следующим образом:

function ajaxSearchAxios(searchType,searchText){ 
    var searchResults=[];
    axios({
        method: 'post',
        url: 'ajaxSearch/',
        data: {
              searchType: searchType,
              searchText: searchText,
            },
        responseType: 'json',
      })
      .then ( function (response){
          searchResults = response.data['searchResults']; console.log('JS searchResults=',searchResults[0].value) //this prints nicely to the console
          return searchResults

      })
      .catch ( function (error){
        console.log('ajaxSearch error'); 
      });
}

File2.js

Здесь у меня есть код Vue, в который я хочу получить вывод ajaxSearchAxios() и сохранить его в данных Vue.

new Vue({
    el:'#id_1',
    data:{
            SearchResults:[],
    },
    methods:{
        ajaxSearch:function(searchType){
            this.SearchResults= ajaxSearchAxios('s','s1');
            console.log('VUE =',this.SearchResults[0].value)
        },
    },
});

Спасибо

Answer 1

Помните, что вы имеете дело с асинхронными функциями, поэтому ваша функция должна возвращать и обрабатывать функциональность как Promise

function ajaxSearchAxios(searchType,searchText){ 
    return axios({ // <--- return the PROMISE
        method: 'post',
        url: 'ajaxSearch/',
        data: {
              searchType: searchType,
              searchText: searchText,
            },
        responseType: 'json',
      })
      .then ( function (response){
          return response.data['searchResults']; 
      })
      .catch ( function (error){
        console.log('ajaxSearch error'); 
      });
}

, а затем обрабатывать его как обещание вместо присвоения функции значение

new Vue({
    el:'#id_1',
    data:{
            SearchResults:[],
    },
    methods:{
        ajaxSearch:function(searchType){
            // execute axios promise and on success, assign result to var
            ajaxSearchAxios('s','s1').then(result => this.SearchResults = result)
        },
    },
});

Answer 2

Я предполагаю, что вызов ajaxSearchAxios работает, и вы правильно импортировали file1. Если это так, Axios возвращает обещание, поэтому попробуйте вернуть axios obj и использовать async и await в vue, чтобы дождаться такого результата ...

function ajaxSearchAxios(searchType,searchText){ 
    var searchResults=[];
    return axios({
        method: 'post',
...

new Vue({
    el:'#id_1',
    data:{
            SearchResults:[],
    },
    methods:{
        ajaxSearch: async searchType => {
            this.SearchResults = await ajaxSearchAxios('s','s1');
            console.log('VUE =',this.SearchResults[0].value)
        },
    },
});