前端项目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。这种封装方式不仅提高了开发效率，还增强了代码的可维护性和可读性。

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

相关推荐
OpenTiny社区9 分钟前
把 SearchBox 塞进项目，搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠38 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞42 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门（九）Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案，优雅实现记住表单历史搜索记录！
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计：从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件，集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A2 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
热门推荐
01Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code02扣子开源本地部署教程 丨Coze智能体小白喂饭级指南03Coze 开源了，送上保姆级私有化部署方案【建议收藏】04全球最强模型Grok4，国内已可免费使用！（附教程）05vue数据变化但页面不变06KGG转MP3工具|非KGM文件|解密音频07干翻 Typora！MilkUp：完全免费的桌面端 Markdown 编辑器！0801-开源版COZE-字节 Coze Studio 重磅开源！保姆级本地安装教程，手把手带你体验09腾讯还是太全面了，限时免费！超全CodeBuddy IDE保姆级教程！（附案例）10【2025.7.18】更新vscode后所有.vue文件template标签后报红的临时解决办法，Vue - Official 插件3.0.2导致