Detailed explanation of how to interact with backend API in Vue3

introduction

In modern web applications, interaction with backend APIs has become an indispensable part. Especially in front-end frameworks like Vue 3, how to efficiently make data requests, process responses, and then display data on the page is a skill that every developer needs to master. This article will take you into a deep dive into how to interact with the backend API in Vue 3 and help you get started quickly with sample code.

Preparation

Before you begin, make sure you have the following tools prepared:

• : This will help you build a Vue 3 project.
• Vue CLI: Use command line tools to build and manage your Vue projects.

If you have not installed the Vue CLI, you can install it with the following command:

npm install -g @vue/cli

Next, create a new Vue 3 project:

vue create my-vue-app
cd my-vue-app

During the creation process, select Vue 3 Configuration.

Send requests using the fetch API

In Vue 3, the easiest way is to use nativefetchAPI. The following example shows how to interact with the backend API in a component.

<template>
  <div>
    <h1>User List</h1>
    <ul v-if="">
      <li v-for="user in users" :key="">
        {{  }}
      </li>
    </ul>
    <div v-else>
      loading...
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    ();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await fetch('/users');
        if (!) {
          throw new Error('The network response is not OK');
        }
        const data = await ();
         = data; // Set the retrieved data to users      } catch (error) {
        ('An error occurred while getting the user:', error);
      }
    }
  }
};
</script>

In this basic example, we create a simple Vue component that loads and presents a list of users. The fetchUsers method is called in the mounted life cycle hook to request data.

Using Axios for API requests

Although the fetch API is simple and easy to use, many developers prefer to use the Axios library, which provides more powerful and flexible features such as request interception, response interception, etc. First, you need to install Axios:

npm install axios

Then, you can modify the above example and use Axios to make the request:

<template>
  <div>
    <h1>User List</h1>
    <ul v-if="">
      <li v-for="user in users" :key="">
        {{  }}
      </li>
    </ul>
    <div v-else>
      loading...
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    ();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await ('/users');
         = ; // Set the retrieved data to users      } catch (error) {
        ('An error occurred while getting the user:', error);
      }
    }
  }
};
</script>

This example is similar to the previous one, but now we use Axios to send GET requests. The data structure returned by Axios is slightly different from fetch, so we use directly to obtain user information.

Handling API request status and errors

In actual development, it is very important to handle the status and errors of API requests. We can add more state management in the Vue component, such as load status and error messages.

<template>
  <div>
    <h1>User List</h1>
    <div v-if="loading">loading...</div>
    <div v-if="errorMsg">{{ errorMsg }}</div>
    <ul v-if=" && !loading">
      <li v-for="user in users" :key="">
        {{  }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: [],
      loading: false,
      errorMsg: ''
    };
  },
  mounted() {
    ();
  },
  methods: {
    async fetchUsers() {
       = true;
       = '';
      
      try {
        const response = await ('/users');
         = ;
      } catch (error) {
         = 'An error occurred while obtaining the user: ' + ;
      } finally {
         = false;
      }
    }
  }
};
</script>

In this example, we introduce two new data properties: loading and errorMsg. Set loading to true before starting an API request, and it will be set to false after the request is completed. In case of catching the error, we update errorMsg to inform the user what is going on.

in conclusion

With the above example, you can see how Vue 3 interacts with the backend API. From the simplest fetch to the more powerful Axios, you can choose the right way to handle API requests based on your needs. In addition, handling status and errors is a good programming habit that can improve the user experience.

This is the end of this article about how to interact with the backend API in Vue3. For more related content on interaction between Vue3 and backend API, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!