亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何從 Axios 請求中獲取價值?

如何從 Axios 請求中獲取價值?

慕村9548890 2021-11-18 21:05:29
我有這個代碼(注意 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 當前解決方案的結果可以在屏幕上看到。從頂部可以看到返回的值。(對象而不是數據)從控制臺日志的底部 - 我們看到答案本身正在起作用(沒有錯誤。)正是這些數據需要顯示在標簽內。
查看完整描述

1 回答

?
MYYA

TA貢獻1868條經驗 獲得超4個贊

執行此操作的標準方法是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屬性來保存結果。


查看完整回答
反對 回復 2021-11-18
  • 1 回答
  • 0 關注
  • 151 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號