How to consume API in Vue with Axios

When playing with javascript library like Vuejs, often times we use an API, to display and consume data. There are many ways to play with API in VueJS, one of them is Axios . Axios itself didn’t depend on VueJS, it’s a standalone promise based HTTP client for the browser (any framework) and node.js.

Initialize data from an API

To initialize data, we use “mounted” function from VueJS, since it’s the first function will be called in our app.

<div id="app">
  {{ info }}
</div>

new Vue({ 
el: '#app', 
data () {
  return { info: null } 
}, 
mounted () { 
  axios.get('YOURAPISOURCE')
    .then(res => (this.info = res)) 
  } 
})

It will output all the result from our get request to the API Endpoint we declared.

Choose certain key

You can automatically get the specific value by certain key. Let’s say your API endpoint has “title” and “desc” keys.

<div id="app">
  <p>{{ info.title }}</p>
  <p>{{ info.desc }}</p>
</div>

We add .data in our response

new Vue({ 
el: '#app', 
data () {
  return { info: null } 
}, 
mounted () { 
  axios.get('YOURAPISOURCE')
        .then(res => (this.info = res.data)) 
  } 
})

Best practice for loading and error state

When using an API as data source, we can’t 100% sure how fast the data will be loaded or will it always be successful or not. For better User Experience, we need to think about this case and give feedback for our user.

Axios provides catch() method, in case our request went wrong

new Vue({
el: '#app',
data () {
  return {
    info: null,
    loading: true,
    error: false
  }
},
mounted () {
  axios.get('YOURAPI')
    .then(res => {
      this.info = res.data
      this.loading = false 
    })
    .catch(error => {
      console.log(error)
      this.error = true
    })
}
})

We add two new variables, “loading” with first data is true, it will return false when we finished load our data, to indicate the loading process. And second is “error”, we assign “true” to error when there is something went wrong.

With both these variable we can prepare a nice feedback for our user

<div id="app>
    <div v-if="loading">
        Loading...
    </div>
    
    <div v-else>
      <!-- Dipslay your data here -->
    </div>
    
    <div v-if="error">
        Sorry! something is broken
      </div>
</div>