Course Title: Mastering Vue.js: Building Modern Web Applications Section Title: Fetching Data with Axios and API Integration Topic: Create a Vue application that fetches and displays data from a public API, implementing loading and error states.(Lab topic)

In this lab topic, we'll create a Vue application that fetches and displays data from a public API, implementing loading and error states. We'll use Axios for making HTTP requests, and we'll cover essential concepts and techniques for building robust and efficient data-driven applications.

Exercise Overview:

We'll build a simple Vue application that fetches data from the JSONPlaceholder API. Specifically, we'll fetch a list of posts and display them in a table.

Step 1: Create a new Vue application

Open your terminal or command prompt and run the following command to create a new Vue application:

vue create api-fetcher

Choose the " Manor" option and select the default settings.

Step 2: Install Axios

Install Axios by running the following command:

npm install axios

Step 3: Create a new component for fetching and displaying data

Create a new file called PostList.vue in the src/components directory:

// src/components/PostList.vue
<template>
  <div>
    <h1>Posts</h1>
    <table v-if="posts">
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Body</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="post in posts" :key="post.id">
          <td>{{ post.id }}</td>
          <td>{{ post.title }}</td>
          <td>{{ post.body }}</td>
        </tr>
      </tbody>
    </table>
    <p v-else-if="loading">Loading...</p>
    <p v-else-if="error">{{ error }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      posts: null,
      loading: false,
      error: null
    }
  },
  mounted() {
    this.fetchPosts()
  },
  methods: {
    async fetchPosts() {
      this.loading = true
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
        this.posts = response.data
      } catch (error) {
        this.error = error.message
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

This component uses Axios to fetch the list of posts from the JSONPlaceholder API. We display a loading message while the data is being fetched, and we display an error message if the request fails.

Step 4: Add the component to the main application

Open the src/main.js file and add the following line to import the PostList component:

import PostList from './components/PostList.vue'

Then, add the following line to render the component:

new Vue({
  el: '#app',
  render: h => h(PostList)
}).$mount('#app')

Step 5: Test the application

Start the application by running the following command:

npm run serve

Open your browser and navigate to http://localhost:8080. You should see a table displaying the list of posts.

Key Concepts and Takeaways:

• Use Axios to make HTTP requests to external APIs.
• Implement loading and error states to handle asynchronous operations.
• Use conditional rendering to display different content based on the application state.
• Use the mounted lifecycle hook to fetch data when the component is mounted.
• Use the try-catch-finally block to handle errors and loading states.

What's Next?

In the next topic, we'll cover Understanding slots for building flexible components.

Leave a Comment or Ask for Help:

Have any questions or need help with implementing this exercise? Leave a comment below, and we'll be happy to assist you.

Additional Resources:

• Axios Documentation
• JSONPlaceholder API