How to Fetch Data With Axios in Vue.js

image-source

This tutorial , I will be in contact with the Rest API, in the web application, of course we will very often to exchange data from Backend to Frontend, then the question how it is done ?, to retrieve data from Rest Api there are several ways, with Jquery, native javascript, or with plugins / libraries. and for this time I will discuss the popular Plugin Request API, Axios.

What is Axios ?

Axios is just a third party or library used to request.Axios is the same like jquery ($ .ajax, $ .get, $ .post), or vue-resourse. Vue-resource is the official library of Vue.js, but it has not been developed yet. Because Axios is a library, so Axios can also be used in other applications. But in this tutorial we will see its usage in vue.js

How to Install Axios?

We will start using Axios by installing it first with Npm or CDN.
Npm :
npm install axios
CDN :
< script src="https://unpkg.com/axios/dist/axios.min.js" >< /script >
but I recommend to install it.

If there is no error then your install process has succeeded.

How to Use Axios in Vue.js?

Now we will start using Axios to fetch data from REST API.I have created a simple component named parentComponents.vue. and i added Function initData() in mounted property, so if the components render, automatically the initdata()will be triggered.
here is the code .

<template>
  <div class="wrapper-parent">
    <h1>Vue Axios</h1>
  </div>
</template>
<script>
import axios from 'axios';
export default {
 mounted(){
  this.initData();
 },
 methods:{
  initData(){
  }
 }
}
</script>
(html comment removed:  Add "scoped" attribute to limit CSS to this component only )
<style scoped>
</style>

import axios from 'axios' ; : We import axios locally. we can use axios with alias name axios, you can change the alias name, But keep it relevant to the name of the library

Added Axios Request

We have created component and created a function named initdata (){ } . Now, i will make Axios function.

axios.get('https://jsonplaceholder.typicode.com/users').then((response)=>{
      console.log(response)
    })
    .catch((error)=>{
    })

axios.get :This is a common function we use during request. get, post, update, delete, put, or etc. 'https://jsonplaceholder.typicode.com/users' : I have a REST API example for us to use as testing, you can see the API for testing on this page https://jsonplaceholder.typicode.com/ .

then((response)=>{
      console.log(response)
    })

We will see the response of the Rest Api Communications going on. I will console.log response we have got.

We have succeeded in fetch data from Rest API, data form json format and data we want exist in Key data.and We cant print out in component with v-for and i will added local variabel.

data(){
  return{
    users:[]
  }
 },

And given data in then response Axios. this.users = response.data V-for in Component , So we can print out the data, in our component.

< ul v-for="user in users" >
        < li >{{user.username}} : {{user.email}}< /li >
< /ul  >

Now we can see the data we fetch from the REST API and which we have console.log (), we managed to print out the data in our component, And so of me hopefully this tutorial is useful, thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---