如何从 Axios 请求中获取价值？

Question

我有这个代码

（注意 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>

我需要以某种方式从查询中获取值。

PS 当前解决方案的结果可以在屏幕上看到。
从顶部可以看到返回的值。（对象而不是数据）
从控制台日志的底部 - 我们看到答案本身正在起作用（没有错误。）
正是这些数据需要显示在标签内。

Answer 1

执行此操作的标准方法是data在模板中显示属性。<span class="symbolTicket">&nbsp; {{ ticket }}</span>data () {&nbsp; return {&nbsp; &nbsp; ticket: null&nbsp; }}然后从created钩子加载值：created () {&nbsp; this.getTicket()},methods: {&nbsp; getTicket () {&nbsp; &nbsp; return axios.get("http://localhost:2000/" , {&nbsp; &nbsp; &nbsp; params: {&nbsp; &nbsp; &nbsp; &nbsp; foo: 'SELECT * FROM eur_usd WHERE primary_key = 2;'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; const ticket = response.data.ticket;&nbsp; &nbsp; &nbsp; // Update the data property&nbsp; &nbsp; &nbsp; this.ticket = ticket;&nbsp; &nbsp; &nbsp; console.log(ticket);&nbsp; &nbsp; &nbsp; return ticket;&nbsp; &nbsp; })&nbsp; &nbsp; .catch(function (error) {&nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; });&nbsp; }}该方法getTicket正在向服务器发出异步请求，因此无法ticket直接返回。它所能返回的只是相应的承诺。模板需要同步的值，所以依赖返回值是getTicket行不通的。您可能还需要处理ticketis的情况null。在初始呈现期间，对服务器的请求不会完成，因此ticket仍将是null.如果您喜欢使用async/await该getTicket方法可以简化，但它不会改变上述的整体流程。您仍然需要一个单独的data属性来保存结果。