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

Question

我有这个代码
（注意 HTML class '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">
  {{ 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 。 它只能返回相应的 promise。 模板需要同步的值，所以依赖getTicket的返回值是行不通的。

您可能还需要处理ticket为null的情况。 在初始渲染期间，对服务器的请求不会完成，因此ticket仍将是null 。

如果您对使用async / await感到满意，可以简化getTicket方法，但它不会改变上述整体流程。 您仍然需要一个单独的data属性来保存结果。