Javascript получить данные из обещания (axios) - PullRequest
0 голосов
/ 09 октября 2018

Я делаю веб-приложение Vue.js и сталкиваюсь с некоторыми проблемами с JavaScript.Я опишу всю настройку Vue.js на всякий случай, но я не думаю, что это действительно актуально.Я знаю, что есть другие публикации по этому вопросу, но после полутора дней попыток выяснить это, я не смог найти ни одной публикации, которая бы помогла мне в этом разобраться.

проблема :

Я пытаюсь получить доступ к данным из моего бэкэнда в моем веб-интерфейсе.Я использую запрос axios, который выглядит следующим образом:

axios.request({...}).then(function (response) { ... }.catch(function (error) { ... });

response в .then получает правильные данные, которые я хочу (массив), но я не могу понять, как это получитьданные, так как .hen обещание.Причина, по которой мне это нужно, заключается в том, что все это внутри метода в компоненте, и я хочу приравнять ответ к значению в моей переменной данных.В общем, я хочу сделать:
this.myvar = this.myvar.concat(response)
, но внутри .then я нахожусь вне области действия моего компонента, поэтому я хочу получить ответ из .then, чтобы я мог изменитьмои данные к нему.

Я понимаю, что теоретически я могу добавить больше .then s, чтобы сделать с ответом то, что я хочу, и именно так javascript обрабатывает синхронность, но я ничего не хочу делать с данными, кромесделать переменную вне области видимости равной ей.

Моя попытка:

Одна вещь, которую я обнаружил, - это то, что я могу объявить отдельную переменную прямо перед запросом axiosи по какой-то причине эта переменная будет доступна мне внутри .then.Поэтому я попытался инициализировать новую переменную в качестве указателя на переменную данных компонента, которая будет выходить за рамки (this.myvar), а затем изменить эту переменную в .then на ответ, но тогда возникнут другие проблемы, потому чтоЯ заканчиваю тем, что возвращаю свою функцию (которая содержит запрос axios и все остальное) до того, как эта переменная будет изменена в .then do для синхронности и это вызовет другие проблемы.

Edit: Мой код это вычисляемый метод внутри компонента.Он должен возвращать this.myvar, как он вызывается в шаблоне Vuejs.

MyFunc: function () {  
    var a = this.myvar;                                                                                            
    axios.request({                                                                                                
        method: 'post',                                                                                              
        url: 'http://myURL:MyPort/query',                                           
        data: {                                                                                                      
           'mydata': dataToSend                                                                                                         
        },                                                                                                           
    }).then(function (response) {                                                                                  
        a = a.concat(Object.values(response.data.results));                                                        
    }).catch(function (error) {                                                                                           
        console.log(error);                                                                                          
    });
    return this.myvar
}                   

Это не первый раз, когда у меня возникают проблемы с обещаниями в javascript, я пробовал читать их, но я простоне могу полностью понять, как с ними бороться.Любая помощь будет принята с благодарностью.

Ответы [ 3 ]

0 голосов
/ 09 октября 2018

вы можете попробовать использовать async и await для создания асинхронной функции, чтобы функция могла выглядеть так без необходимости

.then

const myAsyncFunc = async () => {
    const axiosURI = 'Some_URI_To_call'
    const res = await axios.post(axiosURI, {
      params:{}
    });
}

результат будет в переменной res , так что выможет использовать его, чтобы получить клон res в другую переменную для повторного использования в другом месте

0 голосов
/ 10 октября 2018

Если это внутри компонента Vue, то вам необходимо понимать некоторые понятия:

a) Вычисляемое свойство не может быть асинхронным.Необходимо сразу же вернуть значение из уже доступных значений

b) Вы можете запрашивать асинхронные значения, используя axios, а когда вы получаете ответ, вы просто присваиваете значение свойству в данных компонента

data: () => {
    return {
        dataFromServer: undefined,
    };
},
methods: {
    getDataFromServer() {
        axios.get(url)
            .then(response => response.data)
            .then(data => {
                this.dataFromServer = data;
            })
    },
},

c) Наконец, если вам нужно вычисляемое свойство из значения, полученного с сервера, вы определяете его следующим образом:

computed: {
    derivedValue() {
        return this.dataFromServer? this.dataFromServer * 2 : undefined;
    },
}

Первоначально derivedValue будет неопределенным,поскольку это зависит от значения, которое еще не доступно.Однако, как только значение вернется с сервера и вы назначите его this.dataFromServer, Vue.js сработает, как по волшебству, и автоматически пересчитает derivedValue, обновляя все места, где оно появляется.

ЭтоВажно понимать, что в вашем шаблоне вы можете использовать dataFromServer или derivedValue.А также учтите, что в течение короткого времени эти значения будут неопределенными, пока ответ сервера не вернется к вам.

0 голосов
/ 09 октября 2018

Вам не нужно делать ничего особенного;Вы можете вернуть данные из блока .then следующим образом:

axios.request({...})
.then(function (response) { 
  return response.data;  // Or assign it to a variable or state in your app
}
.catch(function (error) { 
  ...
});

Пример jsfiddle: https://jsfiddle.net/rj4pgwek/

...