【Vue axios】vue中如何通过axios异步请求后端接口

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，Golang开发，云原生开发，前后端框架，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S集群搭建与管理，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：前端零基础，实战进阶教学
景天的主页：景天科技苑

Vue中的Axios

在现代Web开发中，前端与后端的数据交互至关重要。Vue.js作为一款流行的前端框架，结合Axios库能够高效地实现HTTP请求与数据处理。本文将详细讲解如何在Vue 3中使用Axios，并通过实际案例展示其用法。

一、安装Axios

要在Vue 3项目中使用Axios，首先需要安装Axios库。可以通过npm或yarn来安装。

npm install axios

或者

yarn add axios

安装完成后，Axios库就会添加到项目的node_modules目录中，你就可以在项目中导入并使用它了。

二、配置Axios实例

为了简化Axios的使用，可以创建一个Axios实例并进行全局配置。这样可以避免在每个组件中重复配置Axios。可以在项目的src目录中创建一个新的文件，例如axios.js。

// src/axios.js
import axios from 'axios';const instance = axios.create({baseURL: 'https://api.example.com', // 配置基础URLtimeout: 1000, // 配置请求超时时间headers: {'X-Custom-Header': 'foobar'} // 配置默认请求头
});export default instance;

这样就创建了一个带有默认配置的Axios实例，以后可以在项目中直接导入并使用这个实例。

三、在Vue组件中使用Axios

在Vue 3组件中，可以直接导入并使用配置好的Axios实例来发起HTTP请求。以下是一个简单的示例。

<template><div><h1>Data from API</h1><ul><li v-for="item in items" :key="item.id">{{ item.name }}</li></ul></div>
</template><script>
import axios from '../axios'; // 导入配置好的Axios实例export default {data() {return {items: []};},mounted() {this.fetchData();},methods: {async fetchData() {try {const response = await axios.get('/items');this.items = response.data;} catch (error) {console.error('Error fetching data:', error);}}}
};
</script>

在这个示例中，组件在挂载时会调用fetchData方法，使用Axios发起GET请求，并将返回的数据存储到组件的items数据属性中。

四、处理Axios请求和响应

在实际应用中，处理请求和响应是非常重要的。为了更好地处理这些情况，可以使用拦截器。拦截器可以在请求发送之前和响应接收之后进行一些全局处理。

// src/axios.js
import axios from 'axios';const instance = axios.create({baseURL: 'https://api.example.com',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});// 添加请求拦截器
instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么console.log('Request:', config);return config;
}, function (error) {// 处理请求错误return Promise.reject(error);
});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么console.log('Response:', response);return response;
}, function (error) {// 处理响应错误return Promise.reject(error);
});export default instance;

通过使用拦截器，可以在全局范围内处理请求和响应。例如，可以在请求拦截器中添加身份验证令牌，或者在响应拦截器中统一处理错误信息。

五、实际案例：用户管理功能

接下来，我们将通过一个实际的用户管理功能案例，展示如何在Vue 3中使用Axios进行CRUD（增删改查）操作。

1. 创建用户列表组件

在components文件夹中创建UserList.vue，并添加以下代码：

<template><div><h1>用户列表</h1><button @click="fetchUsers">刷新用户</button><ul><li v-for="user in users" :key="user.id">{{ user.name }} <button @click="deleteUser(user.id)">删除</button></li></ul><input v-model="newUserName" placeholder="输入新用户姓名" /><button @click="addUser">添加用户</button></div>
</template><script>
import axios from '../axios';export default {data() {return {users: [],newUserName: ''};},methods: {async fetchUsers() {try {const response = await axios.get('/users');this.users = response.data;} catch (error) {console.error('获取用户失败:', error);}},async addUser() {if (!this.newUserName) return;try {const response = await axios.post('/users', {name: this.newUserName});this.users.push(response.data);this.newUserName = '';} catch (error) {console.error('添加用户失败:', error);}},async deleteUser(userId) {try {await axios.delete(`/users/${userId}`);this.users = this.users.filter(user => user.id !== userId);} catch (error) {console.error('删除用户失败:', error);}}},mounted() {this.fetchUsers();}
};
</script>

在这个组件中，我们定义了一个用户列表、添加用户的输入框和按钮，并且能够删除用户。

2. 创建Vue 3项目并配置路由

首先，确保你的开发环境中已经安装了Node.js和Vue CLI。接着，你可以创建一个新的Vue 3项目：

vue create vue3-axios-crud

在交互式提示中选择Vue 3，然后进入项目目录：

cd vue3-axios-crud

安装Vue Router：

npm install vue-router@next

在src目录下创建router文件夹，并添加index.js文件：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import UserList from '../components/UserList.vue';const routes = [{path: '/',name: 'UserList',component: UserList}
];const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
});export default router;

在src/main.js中配置路由：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from './axios';const app = createApp(App);
app.use(router);
app.config.globalProperties.$axios = axios; // 将axios挂载到全局属性上，方便在组件中使用
app.mount('#app');

3. 启动项目

在命令行中运行以下命令启动项目：

npm run serve

打开浏览器并访问http://localhost:8080，你应该能看到用户列表，能够添加和删除用户。