【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. 创建用户列表组件](#1. 创建用户列表组件)
  - [2. 创建Vue 3项目并配置路由](#2. 创建Vue 3项目并配置路由)
  - [3. 启动项目](#3. 启动项目)

Vue中的Axios

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

一、安装Axios

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

bash 复制代码

npm install axios

或者

bash 复制代码

yarn add axios

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

二、配置Axios实例

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

javascript 复制代码

// src/axios.js
import 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请求。以下是一个简单的示例。

html 复制代码

<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请求和响应

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

javascript 复制代码

// 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，并添加以下代码：

html 复制代码

<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项目：

bash 复制代码

vue create vue3-axios-crud

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

bash 复制代码

cd vue3-axios-crud

安装Vue Router：

bash 复制代码

npm install vue-router@next

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

javascript 复制代码

// 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中配置路由：

javascript 复制代码

// 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. 启动项目

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

bash 复制代码

npm run serve

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