如何从 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">

  {{ 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行不通的。

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

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