Section’s Engineering Education (EngEd) Program fosters a community of university students in Computer Science related fields of study to research and share topics that are relevant to engineers in the modern technology landscape.
You can find more information and program guidelines in the GitHub repository. If you're currently enrolled in a Computer Science related field of study and are interested in participating in the program, please complete this form.
Vue.js is called a progressive framework because it is user-friendly and can be easily merged with different frameworks or libraries.
When developing most projects using Vue.js, there’ll be a need to fetch or consume data from an API.
- This is used to make the front-end interact with the back-end of the application.
- The fetched data can then be consumed on the front-end of the application.
API stands for Application Programming Interface, which is a set of protocols that allow applications to share data.
It’s more of a software intermediary. To use APIs in Vue.js, you’ll have to make an API request using either one of these methods: Axios or Fetch methods.
These concepts will be discussed extensively in the course of this article. To understand and follow this article, you should have:.
Vue.js API Call Examples
Node.js installed on your computer. Vue.js installed on your computer. If you don’t already have it installed, refer to the documentation.
Understood the key concepts in Vue.js.
You can learn them from this Vue.js guide. Using Axios to consume an API. Using the Fetch API method. Using APIs in Vuex. If you don’t know how to create a Vue project, check out this documentation to walk you through the process.
Axios is a promise-based HTTP client which makes it suitable for fetching data during server-side display.
It works on both browser and Node apps. Axios is a library that is built around the Fetch API.
To use Axios in your project, you should install it. This can be done in two ways:.
You can now see why having Node.js installed on your computer was a prerequisite.
By using yarn; a package manager that also acts as a project manager. It is synergetic with the npm registry and has the same features.
To install yarn in your project, paste the following line of code in your terminal npm install --global yarn. Next, you should import Axios in your src/main.js file. Now, we’ll make our first API request using the GET method. A GET method is used to fetch data from an API. We want this API request running asynchronously therefore, we use a promise-based function with the keywords async/await.
You may wonder why we used a promise-based function. This is because a promise is a stand-in for a value not necessarily known when the promise is created.
Since API requests take an undeterminable amount of time, we use promises. You can learn more about Promises in the MDN docs. We also need to test for errors using the try/catch method.
try is used to check for errors while catch is used to handle the error if one occurs. Copy the code below to your App.vue file:.
The above block of code in the methods property will be explained line by line.
4. Create Spring Data JPA Repository - EmployeeRepository.java
Here a function named getData() is created. In this function, the API will be called. The async keyword is prepended on the getData function to show that the function will make use of promises and we’ll be using it to await to pause the execution of the function until the promise is resolved.
try property defines a block of code to be tested for errors as the code is executed. In the block of code const response = await this.$http.get('http://jsonplaceholder.typicode.com/posts');, a get request is made with the get keyword using axios i.e.$http to get data from the URL.
await is prepended to the request because the get function will return a promise. The data returned from the API after the promise is resolved and will be stored in the variable response.
The data we get from the request is then saved to the posts array which is created in the data property. If any error occurs during the execution, the error will be caught and logged in the console. After requesting data from the API, you will need to call it on a lifecycle hook.
Here we will use the created() lifecycle hook, this is because we will be able to retrieve sensitive data and events that are active with the created hook.