使用Vue3和Axios进行API数据交互的代码实现

更新时间：2024年09月09日 09:35:47 作者：JJCTO袁龙

在现代Web开发中,前端框架和库的使用越来越普遍,Vue.js便是其中一个受欢迎的选择,Axios作为一个基于Promise的HTTP客户端,能够帮助我们轻松地与API进行交互,在这篇博客中,我将介绍如何利用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 组件分析

显示从API获取到的用户数据。如果数据还在加载中，会显示“Loading users…”提示。
脚本部分：在<script>部分，我们使用setup函数。在这个函数中，我们使用ref来创建一个响应式变量users，并定义异步函数fetchUsers来获取用户数据。
1. fetchUsers函数使用Axios发送GET请求，获取JSONPlaceholder的用户数据。
2. 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请求。无论是创建独立的组件还是构建复杂的应用，这种方法都能大大提高我们的开发效率与代码质量。

以上就是使用Vue3和Axios进行API数据交互的代码实现的详细内容，更多关于Vue3 Axios API数据交互的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue绑定设置属性的多种方式(5)
这篇文章主要为大家详细介绍了vue绑定设置属性的多种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
默认浏览器设置及vue自动打开页面的方法
今天小编就为大家分享一篇默认浏览器设置及vue自动打开页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现整屏滚动切换
这篇文章主要为大家详细介绍了vue实现整屏滚动切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
解决vue组件中使用v-for出现告警问题及v for指令介绍
这篇文章主要介绍了解决vue组件中使用v-for出现告警问题,在文中给大家介绍了v for指令，需要的朋友可以参考下
2017-11-11
VUE接入腾讯验证码功能（滑块验证）备忘
这篇文章主要介绍了VUE接入腾讯验证码功能（滑块验证）备忘,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-05-05
vue获取当前激活路由的方法
下面小编就为大家分享一篇vue获取当前激活路由的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue新一代状态管理工具Pinia的具体使用
本文主要介绍了Vue新一代状态管理工具Pinia的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
如何用vue封装axios请求
对axios进行封装以及将API接口按业务模块统一管理，有助于我们简化代码，方便后期维护。本文介绍了如何用vue封装axios请求，感兴趣的同学，可以参考下。
2021-06-06
详解keep-alive + vuex 让缓存的页面灵活起来
这篇文章主要介绍了keep-alive + vuex 让缓存的页面灵活起来，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue style width a href动态拼接问题的解决
这篇文章主要介绍了vue style width a href动态拼接问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08