如何从 Axios 请求中获取值？

Question

我有这个代码
（注意HTMLclass'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>

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

P.S。当前解决方案的结果可以在屏幕上看到。
从顶部您可以看到返回的值。（对象而不是数据）
从控制台日志的底部 - 我们看到答案本身正在运行（没有错误。）
标签里面需要显示的就是这个数据。

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 正在向服务器发出异步请求，因此它无法直接 return ticket。它所能做的就是 return 相应的承诺。模板同步需要值，因此依赖 getTicket 中的 return 值是行不通的。

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

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

如何从 Axios 请求中获取值？

How to get value from Axios request?

javascript

vue.js

axios

ecmascript-2017

nuxt.js