How to Consume APIs in Vue.js using Axios?

08 September 2020

Introduction

As we all know Vue.js is a trending, open-source and lightweight javascript library for building interactive single-page applications and user-friendly web applications. When we integrate Vue.js with other libraries it becomes a “framework” also.

It’s a good practice to display data using APIs rather than adding the hardcoded content.

There are multiple ways for API consumption, but the use of Axios is the popular one. It’s a promise-based HTTP client and runs on both client and server.

Example

Here we will use the dummy API for understanding. Steps are given below:

• First, install Axios:
  Using npm:
  

  $npm install axios

  Using yarn:
  

  $yarn add axios

• There are multiple ways to request information from API, but to display the data it’s good to find out the form of the data we are getting. To do so, we’ll call the API endpoint and output the data to see it. Now first we will create the data property which will contain the information, and we will retrieve the data and assign it to the variable using the “mounted” (lifecycle method of Vue.js) method.

  new Vue({
  
    el: '#displayContent',
  
    data () {
  
      return {
  
        data: null
  
      }
  
    },
  
    mounted () {
  
      axios
  
        .get('http://dummy.restapiexample.com/api/v1/employees')
  
        .then(response => (this.data = response))
  
    }
  
  })

  Display response using HTML content:

  <div id="displayContent">
  
     {{ data }}
  
  </div>

  And, here is the Output:

  

• Great, here we got the data.
• Now, we can add error handling if we got some unexpected response from the API so that the error will not break our application.
  Here are some reasons where our Axios call might fail:
  The API is down.
  • We are not getting the information in the expected format.
  • The request was made incorrectly.
• Lets, handle these errors and tell the users if we are not able to get the data at all:

  new Vue({
  
    el: '#displayContent',
  
    data () {
  
      return {
  
        data: null,
  
        errored: false
  
      }
  
    },
  
    mounted () {
  
      axios
  
        .get('http://dummy.restapiexample.com/api/v1/employees')
  
        .then(response => (this.data = response))
  
        .catch(error => {
  
          console.log(error)
  
          this.errored = true
  
        })
  
    }
  
  })

  Display response using HTML content:

  <div id="displayContent">
  
   <section v-if="errored">
  
       <p>Sorry, we  are not able to get the information. please try again late.r</p>
  
   </section>
  
  <section v-else>
  
  {{ data }}
  
  </section>
  
  </div>

  This can be improved by using components, more error handling, and depending upon complexity of the application.

Finally, it may be concluded…

There are multiple ways to work with Vue.js and Axios. You can also make communication with post/edit/delete from an API. The integration of these two libraries (Vue.js and Axios) has become a very popular choice of developers who want to integrate HTTP client in their web applications.