Vue js Axios HTTP Get Method Example Tutorial From Scratch

Today, We want to share with you Vue js Axios HTTP Get Method Example Tutorial From Scratch.In this post we will show you Vuejs HTTP Requests with Axios, hear for Vue.js REST API Consumption with Axios we will give you demo and example for implement.In this post, we will learn about How to make simple API calls with Vue.js and Axios with an example.

Vue js Axios HTTP Get Method Example Tutorial From Scratch

There are the Following The simple About Vue js Axios HTTP Get Method Example Tutorial From Scratch Full Information With Example and source code.

As I will cover this Post with live Working example to develop Vue.js REST API Consumption with Axios, so the some Vue Axios Tutorial by Example (CRUD API) for this example is following below.

Vue.js HTTP Get with Axios

frontend/src/APIService.js

Let’s step by step Learning the list of members using an VueJS HTTP GET request. Include the following source code to the main file like name APIService.js:

getMembers() {
    const url = `${API_URL}/api/members/`;
    return axios.get(url).then(response => response.data);
}

We declared a getMembers() method which makes a GET call, using the axios.get() method

Syntax of the Vuejs Get Methods

We also need a method to get single members by id or primary key. Let’s add a second method to APIService.js:

getMember(pk) {
    const url = `${API_URL}/api/members/${pk}`;
    return axios.get(url).then(response => response.data);
}

Example Using Http GET Calls

First of all We Make a Vue components for displaying members. Path a all the source code inside frontend/src/components and then run the following simple command:

touch ListMembers.js

Open the ListMembers.js file and start by adding a template:

<template>
<div>
<h1>Members ()</h1>
<b>How to make simple API calls with Vue.js and Axios Example</b>
<table class="table table-bordered table-hover">

<thead>
<tr>
<th>#</th>
<th>Member First Name</th>
<th>Member Last Name</th>
<th>Member Email</th>
<th>Member Mobile</th>
<th>Member Address </th>
<th>Actions</th>
</tr>
</thead>
<tbody>
	<tr v-for="member in members">
		<th>{ { member.pk } }</th>
		<th>{ { member.first_name } }</th>
		<td>{ { member.last_name } }</td>
		<td>{ { member.email } } </td>
		<td>{ { member.phone } }</td>

		<td>{ { member.address } }</td>
		<td>
		<button class="btn btn-danger" @click="deleteMember(member)"> X</button>
		</td>
	</tr>
</tbody>
</table>
<div>
</div>
</div>
</template>

Javascript with Vuejs HTTP Requests with Axios

I simple latest use the v-for main directive to each loop through the get members array and showing the information about each member in a main simple HTML table.

<script>
import {APIService} from '../APIService';
const API_URL = 'http://localhost:8000';
const apiService = new APIService();
export default {
name: 'ListMembers',
components: {
},
data() {
	return {
		members: [],
		numberOfMembers:0,
	};
},
methods: {
getMembers(){
    apiService.getMembers().then((data) => {
        this.members = data.data;
        this.numberOfMembers= data.count;
    });
},
},
mounted() {
this.getMembers();
},
}
</script>

Angular 6 CRUD Operations Application Tutorials

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue js Axios HTTP Get Method Example Tutorial From Scratch.
I would like to have feedback on my Pakainfo.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel Database Joins Query Builder
  2.   Vue JS Axios Post Request using Laravel Example
  3.   Vue js Axios HTTP Put Method Example Tutorial From Scratch
  4.   Http Post and Get Web Api Calls using Vuejs
  5.   Vue js Axios HTTP Post Method Example Tutorial From Scratch
  6.   Angularjs Pass Multiple Parameters to Pipe
  7.   Vue js call function on page load Example
  8.   Laravel 6 Eloquent Join Multiple Tables
  9.   vuejs onchange Event - vuejs v-on change Examples
  10.   ng-app Directive using Angular Example