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

Posted 2023-03-07

【中文标题】如何从 Axios 请求中获取价值？

【英文标题】：How to get value from Axios request?

【发布时间】：2020-02-10 12:43:06

【问题描述】：

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

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

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

【参考方案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的返回值是行不通的。

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

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

【讨论】：

在我的项目中应用您的代码后，我得到了这些：joxi.ru/5md14PYH3DJoQ2 为什么会这样？ joxi.ru/8AnadRoSzDKep2

@MikeKharkov 答案已更新。它需要 then 回调的箭头函数来保留 this 值。