I am parsing a JSON data using axios to consume APIs with Vue.js. There is a field value 10, after 20 mins it can be updated to bee 11.

I am following this code example: /

getFollowers() {
      return new Promise((resolve, reject) => {
        axios.get('')
          .then(response => resolve(response))
          .catch(err => reject(error))
      });
 }

I am parsing a JSON data using axios to consume APIs with Vue.js. There is a field value 10, after 20 mins it can be updated to bee 11.

I am following this code example: https://jsfiddle/jonataswalker/416oz6ga/

getFollowers() {
      return new Promise((resolve, reject) => {
        axios.get('https://api.github./users/octocat')
          .then(response => resolve(response))
          .catch(err => reject(error))
      });
 }

Similar to the followers in the above example I want my value to change automatically in my front-end.

How can I update this value in the front-end? Any suggestions?

• javascript
• vuejs2
• axios

• 3 You'd probably have to use sockets to push those changes to the front-end. But explaining how to do that would be too broad for Q/A format. – Nisarg Shah Commented Oct 31, 2017 at 13:08
• Okay, If I send request to api link after few mins interval, that will be a good approach ? – Parkar Commented Oct 31, 2017 at 13:17
• Long polling is okay sometimes, but be careful with the interval you set. If the interval is too small, your server performance will suffer due to the number of requests ing from multiple users. – Nisarg Shah Commented Oct 31, 2017 at 13:27

2 Answers 2

So, you have two ways you can do this.

One is to use websockets, which is a bidirectional connection from the client to your server. This requires specific configuration on your server, and you'd have to update your client code to handle the data push. A recent Medium post might be a good way for you to get started.

The other method is to use polling on the client. Use a timer such that for every N seconds, it makes a request to the API and updates with the response.

A good breakdown has already been written about the pros and cons of either.

you have no need to return a new promise because if this is in "methods", I'm not sure how you would treat this promise, but axios itself already returns a promise in your query, what you need to do is:

getFollowers() {
  axios.get('https://api.github./users/octocat')
  .then(response => this.$set(this, 'data', response.data))
  .catch(err => (throw error))
 }