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

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

相关推荐
每天吃饭的羊12 分钟前
React 性能优化
前端·javascript·react.js
hzw051038 分钟前
使用pnpm管理前端项目依赖
前端
风清扬雨1 小时前
Vue3中v-model的超详细教程
前端·javascript·vue.js
高志小鹏鹏1 小时前
掘金是不懂技术吗，为什么一直用轮询调接口？
前端·websocket·rocketmq
八了个戒1 小时前
「JavaScript深入」一文说明白JS的执行上下文与作用域
前端·javascript
高志小鹏鹏1 小时前
Tailwind CSS都更新到4.0了，你还在抵触吗？
前端·css·postcss
qingyun9891 小时前
封装AJAX(带详细注释)
前端·ajax·okhttp
鱼樱前端1 小时前
前端工程化面试题大全也许总有你遇到的一题~
前端·javascript·程序员
小华同学ai1 小时前
331K star！福利来啦,搞定所有API开发需求，这个开源神器绝了！
前端·后端·github
华科云商xiao徐2 小时前
利用axios库的爬虫程序如何使用HTTP
前端
热门推荐
01如何在WPS和Word/Excel中直接使用DeepSeek功能02DeepSeek各版本说明与优缺点分析03本地部署DeepSeek教程（Mac版本）04从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑05如何本地部署AI智能体平台，带你手搓一个AI Agent06DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具07DeepSeek RAGFlow构建本地知识库系统08Windows 11 安装 Dify 完整指南 非docker环境09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10网络安全 - DDoS 攻击原理 + 实验