Vue 教程：前后端分离开发中的接口请求封装与错误处理策略

快速概述

在前后端分离架构中，Vue 应用通过 HTTP 接口与后端服务通信，接口请求的重复代码、错误处理分散以及鉴权逻辑混乱是开发中的核心痛点。本文介绍的请求封装与错误处理策略，适用于使用 Vue 2 或 Vue 3 构建的中大型单页应用，通过统一封装 Axios 实例与拦截器，实现请求的集中管理与错误码的标准化处理。前置环境要求：已安装 Node.js 与 npm，并创建好 Vue 项目（可使用 vue create vue-demo 命令创建）。

核心概念与原理

Vue 作为一套构建用户界面的渐进式框架，只关注视图层，采用自底向上增量开发的设计，其核心机制包括响应式数据绑定与组件化开发。在接口请求层面，封装的核心思想是“统一出口”：创建一个配置好的 Axios 实例，通过请求拦截器统一附加 Token 等公共参数，通过响应拦截器统一处理 HTTP 状态码与业务错误码，将错误信息转换为用户可读的提示。这种设计模式减少了业务代码中的重复逻辑，使错误处理策略集中可控。

实战步骤与代码

第一步：安装依赖

npm install axios

第二步：创建请求封装模块

在 src/utils/request.js 中创建 Axios 实例并配置拦截器：

import axios from 'axios';
// 创建 axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 从环境变量读取接口地址 timeout: 10000 // 请求超时时间 });
// 请求拦截器：附加 Token service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = 'Bearer ' + token; } return config; }, error => Promise.reject(error) );
// 响应拦截器：统一处理错误 export default service;

第三步：定义接口 API 模块

import request from '@/utils/request';
// 登录接口 export function login(data) { return request({ url: '/auth/login', method: 'post', data }); }

第四步：在组件中调用

import { login } from '@/api/user';
methods: { async handleLogin() { try { const res = await login(this.form); console.log('登录成功', res); } catch (err) { this.$message.error(err.message || '请求失败'); } } }

常见坑点与优化

• 跨域问题：开发环境下需在 vue.config.js 中配置代理，避免浏览器同源策略拦截请求。
• 重复请求：未对相同请求做去重处理，可能导致数据不一致。可引入请求取消机制（CancelToken）优化。
• 错误码处理不统一：后端返回的业务错误码（如 401 未授权）需在响应拦截器中统一跳转登录页，避免每个页面重复编写判断逻辑。
• 性能优化：对不常变化的数据接口可增加缓存策略，减少不必要的网络请求；同时利用 Vue 的懒加载特性按需加载路由组件，降低首屏加载时间。