Как получить значение из запроса Axios? - PullRequest
Новая
       64

Как получить значение из запроса Axios?

1 голос
/ 13 октября 2019

У меня есть этот код(Обратите внимание на 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{

  data() {
    return {
    };
  },

  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>

Мне нужно как-то получить значение из запроса.

enter image description herePS Результат текущего решения можно увидеть на экране. Сверху видно, какое значение возвращается. (Объект вместо данных)Из нижней части консоли журнала - мы видим, что сам ответ работает (без ошибок.)Именно эти данные должны отображаться внутри тега.

1 Ответ

2 голосов
/ 13 октября 2019

Стандартный способ сделать это - отобразить свойство data в шаблоне. 

<span class="symbolTicket">
  {{ ticket }}
</span>

data () {
  return {
    ticket: null
  }
}

Затем загрузить значение из хука created: 

created () {
  this.getTicket()
},

methods: {
  getTicket () {
    return axios.get("http://localhost:2000/" , {
      params: {
        foo: 'SELECT * FROM eur_usd WHERE primary_key = 2;'
      }
    })
    .then(response => {
      const ticket = response.data.ticket;

      // Update the data property
      this.ticket = ticket;

      console.log(ticket);
      return ticket;
    })
    .catch(function (error) {
      console.log(error);
    });
  }
}

Метод getTicket выполняет асинхронный запрос к серверу, поэтому он не может напрямую вернуть ticket. Все, что он может вернуть, - это соответствующее обещание. Шаблон нуждается в значении синхронно, поэтому использование возвращаемого значения из getTicket не может работать.

Вам также может понадобиться обработать случай, когда ticket равен null. Во время первоначального рендеринга запрос к серверу не будет завершен, поэтому ticket будет по-прежнему null.

Если вы счастливы, используя async / await метод getTicketможно упростить, но это не изменит общий поток, описанный выше. Вам все еще нужно отдельное свойство data для хранения результата.

...