前端项目Axios封装Vue3详细教程（附源码）

二川bro2025-03-12 9:30

前端项目Axios封装Vue3详细教程（附源码）

一、引言

在前端项目开发中，HTTP请求是不可或缺的一部分。Axios作为一个基于Promise的HTTP客户端，因其易用性和丰富的功能而广受欢迎。在Vue3项目中，合理地封装Axios不仅可以提高开发效率，还可以增强代码的可维护性和可读性。本文将详细介绍如何在Vue3项目中封装Axios，包括请求拦截器中添加加载框、响应拦截器中处理各类状态码等高级功能，并给出详细的教程和可直接使用的代码。

二、Axios安装与基本使用
1. 安装Axios

首先，你需要在Vue3项目中安装Axios。可以使用npm或yarn进行安装：

bash 复制代码 
npm install axios
# 或者
yarn add axios
2. 基本使用

安装完成后，你可以在Vue组件中直接使用Axios发送HTTP请求。例如：

javascript 复制代码 
import axios from 'axios';

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });
三、Axios封装流程

为了更好地管理HTTP请求，我们需要对Axios进行封装。以下是封装Axios的详细流程：

1. 创建Axios实例

在项目根目录或src目录下创建一个新的文件夹（如utils），并在其中创建一个文件（如request.js），用于创建Axios实例和配置相关参数。

javascript 复制代码 
// src/utils/request.js
import axios from 'axios';

// 创建Axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // API的基础URL
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

export default instance;
2. 配置请求拦截器

请求拦截器可以在请求发送之前对请求进行一些处理，如添加token、设置请求头等。此外，我们还可以在请求拦截器中添加加载框，以提示用户请求正在进行中。

假设我们使用的是一个简单的加载框组件（如LoadingComponent），它可以通过Vue的全局状态管理（如Vuex）或事件总线来控制显示和隐藏。

javascript 复制代码 
// src/utils/request.js (继续添加代码)
import store from '@/store'; // 假设我们有一个Vuex store来管理加载框状态

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 从localStorage或Vuex中获取token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    // 显示加载框
    store.commit('setLoading', true); // 假设我们有一个mutation叫`setLoading`

    return config;
  },
  error => {
    // 隐藏加载框（请求出错时）
    store.commit('setLoading', false);
    return Promise.reject(error);
  }
);

在这里，我们假设Vuex store中有一个loading状态，用于控制加载框的显示和隐藏。你需要根据自己的项目实际情况来调整这部分代码。

3. 配置响应拦截器

响应拦截器可以在响应返回之后对响应进行一些处理，如统一处理错误、转换响应数据格式等。我们还可以根据响应的状态码来执行不同的操作，如显示错误通知、跳转到登录页面等。

javascript 复制代码 
// src/utils/request.js (继续添加代码)
import { Message } from 'element-ui'; // 假设我们使用Element UI来显示通知
import router from '@/router'; // 引入Vue Router

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 隐藏加载框
    store.commit('setLoading', false);

    // 对响应数据进行处理，如统一格式
    const res = response.data;
    if (res.code !== 200) {
      // 根据不同的状态码执行不同的操作
      switch (res.code) {
        case 401:
          // 未登录或token过期，跳转到登录页面
          router.push('/login');
          break;
        case 403:
          // 无权限访问
          Message.error('无权限访问');
          break;
        default:
          // 其他错误
          Message.error(res.message || '请求出错');
      }
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    // 隐藏加载框（请求出错时）
    store.commit('setLoading', false);

    // 对错误进行处理，如显示通知
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 未登录或token过期，跳转到登录页面
          router.push('/login');
          break;
        case 403:
          // 无权限访问
          Message.error('无权限访问');
          break;
        case 404:
          // 资源未找到
          Message.error('资源未找到');
          break;
        default:
          // 其他错误
          Message.error('请求出错');
      }
    } else {
      Message.error('网络错误');
    }
    return Promise.reject(error);
  }
);

在这里，我们使用了Element UI的Message组件来显示通知，并根据响应的状态码执行了不同的操作。你需要根据自己的项目实际情况来调整这部分代码，比如使用其他的通知库或自定义的错误处理方式。

4. 封装请求方法

为了方便调用，我们可以将常用的HTTP请求方法（如GET、POST、PUT、DELETE等）封装成函数。

javascript 复制代码 
// src/utils/request.js (继续添加代码)

export function get(url, params = {}) {
  return instance.get(url, { params });
}

export function post(url, data = {}) {
  return instance.post(url, data);
}

export function put(url, data = {}) {
  return instance.put(url, data);
}

export function del(url) {
  return instance.delete(url);
}
四、在Vue3项目中使用封装后的Axios
1. 引入封装后的Axios

在需要使用Axios的Vue组件中引入封装后的Axios实例和请求方法。

javascript 复制代码 
// src/views/Home.vue
<template>
  <div>
    <h1>Home</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { get } from '@/utils/request';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await get('/api/data');
        this.message = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>
2. 调用请求方法

在组件的方法中调用封装好的请求方法，即可发送HTTP请求并处理响应。由于我们已经在请求拦截器和响应拦截器中处理了加载框和错误通知，因此在组件中无需再额外处理这些逻辑。

五、封装细节与优化
1. 加载框的显示与隐藏

在请求拦截器中显示加载框，在响应拦截器和请求出错时隐藏加载框。这样可以确保加载框在请求进行时显示，并在请求完成后及时隐藏。

2. 错误处理与通知

在响应拦截器中，我们根据响应的状态码执行了不同的操作，如跳转到登录页面、显示错误通知等。这样可以统一处理错误，提高用户体验。

3. 请求方法的封装

将常用的HTTP请求方法封装成函数，方便在组件中调用。这样可以减少重复代码，提高开发效率。

4. 可扩展性

我们的封装方式具有良好的可扩展性。如果未来需要添加新的请求方法或处理新的状态码，只需在request.js文件中进行相应的修改即可。

六、封装流程单与表格
封装流程单

  1. 安装Axios：使用npm或yarn安装Axios。

  2. 创建Axios实例 ：在utils文件夹中创建request.js文件，并创建Axios实例。

  3. 配置请求拦截器：

    • 从localStorage或Vuex中获取token，并添加到请求头中。
    • 显示加载框。

  4. 配置响应拦截器：

    • 隐藏加载框。

  5. 配置响应拦截器：

    • 根据响应的状态码执行不同的操作，如处理未登录、无权限访问、资源未找到等错误。
    • 对响应数据进行统一处理，如格式转换或错误消息提取。
    • 隐藏加载框（响应完成或出错时）。

  6. 封装请求方法：

    • 将常用的HTTP请求方法（GET、POST、PUT、DELETE等）封装成易于调用的函数。
    • 提供可选的参数配置，如请求参数或请求体数据。

  7. 在Vue组件中使用：

    • 在需要发送HTTP请求的Vue组件中引入封装后的Axios实例和请求方法。
    • 调用请求方法发送请求，并处理响应数据或错误。
封装细节优化表格
优化点 描述
加载框管理 在请求拦截器中显示加载框，在响应拦截器和错误处理中隐藏加载框，确保用户体验。
错误统一处理 在响应拦截器中根据状态码统一处理错误，如跳转登录、显示通知，减少重复代码。
请求方法封装 封装GET、POST等常用请求方法，简化调用，提高代码可读性和开发效率。
可扩展性 封装设计易于扩展，未来可轻松添加新请求方法或处理新状态码。
配置集中管理 Axios实例的配置（如baseURL、timeout）集中在一处管理，方便修改和维护。
Token自动附加 请求拦截器自动从localStorage或Vuex中获取并附加Token，简化请求头管理。
响应数据统一处理 对响应数据进行统一格式处理或错误消息提取，减少组件中重复处理逻辑。
七、实践案例与代码片段
实践案例

假设我们有一个用户信息管理模块，需要获取用户列表、添加新用户、更新用户信息和删除用户。使用封装后的Axios，我们可以轻松实现这些功能。

获取用户列表
javascript 复制代码 
// src/views/UserList.vue
<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { get } from '@/utils/request';

export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await get('/api/users');
        this.users = response.data;
      } catch (error) {
        console.error('Failed to fetch users:', error);
      }
    }
  }
};
</script>
添加新用户
javascript 复制代码 
// src/views/AddUser.vue
<template>
  <div>
    <h1>Add User</h1>
    <form @submit.prevent="addUser">
      <input v-model="newUser.name" placeholder="Enter user name" required />
      <button type="submit">Add User</button>
    </form>
  </div>
</template>

<script>
import { post } from '@/utils/request';

export default {
  data() {
    return {
      newUser: {
        name: ''
      }
    };
  },
  methods: {
    async addUser() {
      try {
        await post('/api/users', this.newUser);
        this.$message.success('User added successfully');
        this.newUser.name = ''; // Reset form
      } catch (error) {
        console.error('Failed to add user:', error);
        this.$message.error('Failed to add user');
      }
    }
  }
};
</script>
更新和删除用户

类似地，我们可以使用put和del方法来更新和删除用户信息。这里不再赘述具体代码，但你可以想象它们的使用方式与get和post非常相似，只是请求的URL和方法名有所不同。

八、总结与展望

通过本文的介绍，我们学习了如何在Vue3项目中封装Axios，包括创建Axios实例、配置请求和响应拦截器、封装请求方法以及在Vue组件中使用封装后的Axios。这种封装方式不仅提高了开发效率，还增强了代码的可维护性和可读性。

快，让 我 们 一 起 去 点 赞 ！！！！

相关推荐
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function：TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云＆流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS：网页设计入门
前端·css
老虎06273 小时前
JavaWeb（苍穹外卖）--学习笔记04（前端：HTML，CSS，JavaScript）
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果：巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴4 小时前
Babel 完全上手指南：从零开始解锁现代 JavaScript 开发的超能力！
前端·javascript
热门推荐
01GPU 进阶笔记（二）：华为昇腾 910B GPU02Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案03Coze扣子平台完整体验和实践（附国内和国际版对比）04MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法05扣子空间的使用教程与大模型技术思考06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07KGG转MP3工具|非KGM文件|解密音频08Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面09DeepSeek各版本说明与优缺点分析10django中用 InforSuite RDS 替代memcache