vue3 如何集成 axios

原创

mob64ca12e2442a 2024-12-19 10:41:36 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e2442a的原创作品，请联系作者获取转载授权，否则将追究法律责任

Vue 3 如何集成 Axios

在现代前端开发中，处理数据获取和发送通常会涉及到 HTTP 请求的操作。在 Vue 3 中，集成 Axios 这个流行的 HTTP 客户端库是一个常见的需求。本文将以一个实际的项目为基础，讲解如何在 Vue 3 中集成 Axios，并提供示例代码和类图，以帮助读者更好地理解和应用。

1. 项目背景

假设我们正在开发一个简单的用户信息管理系统，其中有一个功能：展示用户的列表。用户列表需要从远程 API 获取，并在 Vue 组件中展示。我们将通过 Axios 发送 GET 请求来实现这一功能。

2. 安装 Axios

首先，你需要确保项目已经安装了 Axios。可以通过 npm 或 yarn 来安装：

npm install axios

或者

yarn add axios

3. 创建 API 服务

为了将 Axios 与 Vue 3 结合得更加整洁，我们可以创建一个 API 服务模块。这样可以集中管理所有的 API 调用，提升代码的可维护性。

在 src 目录下创建一个 services 文件夹，并在其中创建一个 api.js 文件：

// src/services/api.js
import axios from 'axios';

const apiClient = axios.create({
  baseURL: ' // 示例 API URL
  timeout: 1000,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default {
  getUsers() {
    return apiClient.get('/users');
  },
};

4. 类图

在这里，我们为服务层创建了一个简单的类图，描述了 api.js 服务的结构。

classDiagram
    class ApiService {
        +getUsers()
    }

    ApiService ..> axios :使用

5. 创建 Vue 组件

接下来，我们将创建一个 Vue 组件来展示用户列表。这里我们使用 Vue 3 的组合 API。

在 src/components 目录下创建一个 UserList.vue 文件并编写以下代码：

<template>
  <div>
    用户列表
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import api from '../services/api';

export default {
  name: 'UserList',
  setup() {
    const users = ref([]);

    const fetchUsers = async () => {
      try {
        const response = await api.getUsers();
        users.value = response.data;
      } catch (error) {
        console.error("获取用户列表失败:", error);
      }
    };

    onMounted(fetchUsers);

    return { users };
  },
};
</script>

<style scoped>
h1 {
  font-size: 24px;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #ccc;
}
</style>

6. 在主应用中使用组件

现在，我们需要将 UserList 组件集成到主应用中。打开 src/App.vue 文件并进行如下修改：

<template>
  <div id="app">
    <UserList />
  </div>
</template>

<script>
import UserList from './components/UserList.vue';

export default {
  name: 'App',
  components: {
    UserList,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>