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

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

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

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

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

文章目录

• Vue中的Axios
• • 一、安装Axios
  • 二、配置Axios实例
  • 三、在Vue组件中使用Axios
  • 四、处理Axios请求和响应
  • 五、实际案例：用户管理功能
  • • 1. 创建用户列表组件
    • 2. 创建Vue 3项目并配置路由
    • 3. 启动项目

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.jsimport axios from \'axios\';const instance = axios.create({ baseURL: \'https://api.example.com\', // 配置基础URL timeout: 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.jsimport 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.jsimport { 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.jsimport { 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，你应该能看到用户列表，能够添加和删除用户。