Introduction
Frequently, there is a need to fetch data or consume an API when building JavaScript based projects.
A lot of things can be done with the data from different APIs, these data is usually displayed on the UI of the project. In this article, we will explain different ways to display data from an API on a Vue.js project.
In this article, I will cover:
Prerequisites
To understand and follow this article, you will need:
Node.js installed on your computer.
To have Vue.js installed on your computer. If you don't already have it installed, click here to do so.
To understand key concepts in Vue.js. You can learn it here
What is an API
API stands for Application Programming Interface, which is a set of definitions or protocols that allow software programs to communicate and share data with each other. It is more of a software intermediary.
What is Vue.js
Vue.js is a progressive framework for JavaScript which is used to build user interfaces.
There are two methods of consuming/using an API in a Vue.js project. These methods are:
1. Using Axios to consume APIs
Axios is a promise-based HTTP client which makes it appropriate for fetching data during server-side rendering. It works on both browser and Node apps.
To use Axios on your project, you need to first install it by running the code below in your terminal.
With npm:
npm i axios
Or with yarn:
yarn add axios
Next, you import axios in your
src/main.js file
import axios from 'axios';
Vue.prototype.$http = axios;
How to make an API request and display data using Axios
In App.vue file:
<template></template>
<script>
export default {
data() {
posts: [ ]
},
methods: {
async getData () {
try {
const response = await this.$http.get('http://jsonplaceholder.typicode.com/posts');
// JSON responses are automatically parsed.
this.posts = response.data
}
catch (error) {
console.log(error);
}
}
}
}
</script>
After requesting for data from the API, you'll need to call it on a lifecycle hook
<template></template>
<script>
export default {
data() {
posts: [ ]
},
methods: {
async getData () {
try {
const response = await this.$http.get('http://jsonplaceholder.typicode.com/posts');
// JSON responses are automatically parsed.
this.posts = response.data
console.log(posts)
}
catch (error) {
console.log(error);
}
}
},
mounted() {
this.getData();
},
}
</script>
You can now display the data in your template using v-for directive
<template>
<div>
<div v-for="post in posts">
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
posts: [ ]
},
methods: {
async getData () {
try {
const response = await this.$http.get('http://jsonplaceholder.typicode.com/posts');
this.posts = response.data
}
catch (error) {
console.log(error);
}
}
},
mounted() {
this.getData();
},
}
</script>
2. Using Fetch API
Fetch API is a powerful and flexible method of flexible APIs. It provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
To make request with the Fetch API, you just have to make the request directly with the fetch object and follow all other steps used in the axios call above.
<template>
<div>
<ul v-for="post in posts">
<li>{{ post.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
posts: [ ]
},
methods: {
async getData () {
try {
const response = await fetch('http://jsonplaceholder.typicode.com/posts');
this.posts = response.data
}
catch (error) {
console.log(error);
}
}
},
mounted() {
this.getData();
},
}
</script>
CONCLUSION
Both methods are of consuming APIs are similar in many ways and both get the job done. However, it is advised to use Axios for more complex request as it allows multiple configuration of multiple request in one place.