Как вытащить значение из запроса Axios? [дубликат]

164
11 сентября 2021, 14:50
На этот вопрос уже даны ответы здесь:
Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания (3 ответа)
Закрыт 1 год назад.

Всем привет. Есть такой код: (Обратить внимание на HTML класс 'symbolTicket"')

<template> 
 
  <div class="chart"> 
 
    <span class="symbolTicket"> 
      {{getTicket()}} 
    </span> 
 
    <div class="chartContent"> 
 
    </div> 
    <!--   <div class="chartContent">  end   --> 
 
  </div> 
  <!--   <div class="chart">   end   --> 
 
</template> 
 
<script> 
 
import axios from 'axios'; 
 
export default{ 
 
  methods: { 
 
    getTicket: function () { 
 
        return axios.get("http://localhost:2000/" , { 
          params: { 
            foo: 'SELECT * FROM eur_usd WHERE primary_key = 2;' 
          } 
        }) 
        .then(function (response) { 
            console.log(response.data.ticket); 
            return response.data.ticket; 
        }) 
        .catch(function (error) { 
          console.log(error); 
        }); 
 
    }, 
 
  }, 
 
} 
 
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Мне необходимо каким то образом вытащить значение из запроса.
Что только не пробовал - ниче не помагает.

P.S. Результат работы текущего(не работающего) решения можно увидеть на скрине. C верху можно увидеть какое значение вернулось.(обьект вместо данных) С низу в консоли лог - видим, что сам ответ рабочий(без ошибок.) Именно эти данные и необходимо вывести внутри тега.

Answer 1

Метод getTicket возвращает Promise. Т.е. вызывая функцию, делается ajax запрос к серверу, он занимает некоторое время. Функция же выполняется моментально. По идее надо сделать вот так: В getTicket

return axios.get(url, params)

А при вызове getTicket вот так:

getTicket().then(...).catch(...)