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

Question

I have this code
(Pay attention to the 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>

I need to somehow get the value out of the query.

PS The result of the current solution can be seen on the screen.
From the top you can see what value is returned. (Object instead of data)
From the bottom of the console log - we see that the answer itself is working (no errors.)
It is this data that needs to be displayed inside the tag.

Answer 1

The standard way to do this would be to display a data property in the template.

<span class="symbolTicket">
  {{ ticket }}
</span>

data () {
  return {
    ticket: null
  }
}

Then load the value from the created hook:

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);
    });
  }
}

The method getTicket is making an asynchronous request to the server so there's no way it can return the ticket directly. All it can return is the corresponding promise. The template needs the value synchronously, so relying on the return value from getTicket can't work.

You may also need to handle the case where ticket is null . During the initial rendering the request to the server won't have completed, so ticket will still be null .

If you're happy using async / await the getTicket method can be simplified but it won't change the overall flow described above. You still need a separate data property to hold the result.