使用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和Canvas实现雷霆战机打字类小游戏
这篇文章主要介绍了如何用VUE和Canvas实现雷霆战机打字类小游戏，麻雀虽小，五脏俱全，对游戏感兴趣的同学，可以参考下，研究里面的原理和实现方法
2021-04-04
vue路由跳转了但界面不显示的问题及解决
这篇文章主要介绍了vue路由跳转了但界面不显示的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
详解如何在vue项目中使用eslint+prettier格式化代码
在开发中我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格，这篇文章主要介绍了详解如何在vue项目中使用eslint+prettier格式化代码，需要的朋友可以参考下
2018-11-11
vue计算属性+vue中class与style绑定(推荐)
这篇文章主要介绍了vue计算属性+vue中class与style绑定,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
vue获取当前日期时间(使用moment和new Date())
在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下
2023-06-06
基于vue实现一个神奇的动态按钮效果
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-05-05
详解vue.js的devtools安装
本篇文章主要介绍了详解vue.js的devtools安装，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
vue实现短信验证码登录功能（流程详解）
无论是移动端还是pc端登录或者注册界面都会见到手机验证码登录这个功能，输入手机号，得到验证码，这篇文章主要介绍了基于vue实现短信验证码登录功能,需要的朋友可以参考下
2019-12-12
vue.js轮播图组件使用方法详解
这篇文章主要为大家详细介绍了vue.js轮播图组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
vue prop传值类型检验方式
这篇文章主要介绍了vue prop传值类型检验方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07