使用Vue 3和Axios进行API数据交互

在现代Web开发中，前端框架和库的使用越来越普遍，Vue.js便是其中一个受欢迎的选择。通过Vue 3引入的Composition API和setup语法糖，我们可以更灵活地组织代码，并提高代码的可读性和可维护性。与此同时，Axios作为一个基于Promise的HTTP客户端，能够帮助我们轻松地与API进行交互。在这篇博客中，我将介绍如何利用Vue 3及Axios进行API数据交互，并通过示例代码来展示其基本用法。

1. 环境准备

在开始之前，请确保你已经装好了Node.js和npm。接下来，我们可以使用Vue CLI来创建一个新项目。打开终端，执行以下命令：

npm install -g @vue/cli
vue create vue-axios-example
cd vue-axios-example
npm install axios

此时，我们已经创建了一个新的Vue项目并安装了Axios模块。

2. 组件结构

在这个示例中，我们将创建一个简单的组件，该组件将从一个公共API（例如JSONPlaceholder）获取一些数据并显示在页面上。我们将在src/components目录下创建一个新的文件UserList.vue。

<template>
  <div>
    <h1>User List</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else>Loading users...</p>
    <button @click="fetchUsers">Refresh Users</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

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

    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    };

    // On component mount, fetch users
    fetchUsers();

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

<style scoped>
h1 {
  color: #42b983;
}
</style>

2.1 组件分析

模板部分：我们使用<template>定义了用户列表的HTML结构。这里包含一个<ul>，它会遍历并显示从API获取到的用户数据。如果数据还在加载中，会显示“Loading users...”提示。
脚本部分：在<script>部分，我们使用setup函数。在这个函数中，我们使用ref来创建一个响应式变量users，并定义异步函数fetchUsers来获取用户数据。
- fetchUsers函数使用Axios发送GET请求，获取JSONPlaceholder的用户数据。
- users.value = response.data将获取到的数据赋值给users。
样式部分：<style scoped> 确保样式只作用于当前组件。

3. 使用组件

为了在应用中使用我们的组件，我们可以在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 {
  text-align: center;
  margin-top: 60px;
}
</style>

在这里，我们首先导入UserList组件，然后在模板中使用它。这样，我们就可以在主应用程序中看到用户列表。

4. 运行项目

到此为止，我们的项目已经准备完成。现在，我们可以运行开发服务器，查看我们的组件效果：

npm run serve

打开浏览器，访问http://localhost:8080，你将看到一个用户列表，且下方有一个“Refresh Users”按钮，点击此按钮可以重新获取用户数据。

5. 异常处理

在上面的fetchUsers函数中，我们已经涉及到了简单的错误处理。如果在请求过程中出现任何错误，开发者将会看到控制台输出相关错误信息。为了进一步提升用户体验，我们可以在UI中增加一些错误提示。

修改UserList.vue中的状态管理：

<template>
  <div>
    <h1>User List</h1>
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    <p v-else-if="error">{{ error }}</p>
    <p v-else>Loading users...</p>
    <button @click="fetchUsers">Refresh Users</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

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

    const fetchUsers = async () => {
      error.value = null; // 清空错误
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        users.value = response.data;
      } catch (err) {
        error.value = 'Error fetching users: ' + err.message;
      }
    };

    fetchUsers();

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

在这段代码中，我们引入了一个新的响应式变量error，用于保存错误信息，并在UI中进行适当的显示。这样，用户在获取数据失败时，可以看到相关的错误提示。

总结

通过本篇博客，我们学习了如何使用Vue 3的setup语法糖以及Axios进行简单的API数据交互。借助这些现代化的工具，我们可以更加灵活地管理前端状态与API请求。无论是创建独立的组件还是构建复杂的应用，这种方法都能大大提高我们的开发效率与代码质量。

复制全文生成海报前端开发 Web技术 JavaScript

编程 使用Vue 3和Axios进行API数据交互