企业官网建设流程全解析

目录

• 一、为什么要封装？
• 二、封装三步走
  • 1. 创建实例
  • 2. 添加拦截器
    • 请求拦截器 → 自动塞 Token
    • 响应拦截器 → 统一处理数据 + 错误
  • 3. 暴露 request
• 三、封装前后对比

很多前端新手在项目中会遇到一个问题：每个接口文件里都要重复写baseURL、重复判断错误、重复手动塞 token……代码又臭又长。

这篇文章我会从零开始，带你理解 Axios 二次封装的每一个步骤，保证你看完就能在自己项目里用起来。

一、为什么要封装？

不封装的后果：

// 每个接口都要重复写这些... axios.get('/api/user', { headers: { Authorization: token } // 重复 }).catch(() => alert('报错')) // 重复

二次封装 axios 是为了统一规则，方便管理，例如公司规定：所有接口必须自动带 token、统一错误提示等。

封装后你只需要写：

request({ url: '/user', method: 'GET' }) // 完事！

二、封装三步走

1. 创建实例

根据 axios 的 create 方法创建 request 实例（我们就可以自己去配置一些请求基础信息啦，比如超时时间，基础路径）。

import axios from 'axios'; import { ElMessage } from "element-plus"; // 调用错误提示组件 let request = axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 5000, });

2. 添加拦截器

请求拦截器 → 自动塞 Token

// 请求拦截器 request.interceptors.request.use((config) => { // 自动添加 token const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; });

响应拦截器 → 统一处理数据 + 错误

// 响应拦截器 request.interceptors.response.use( (response) => { // 成功回调 // 简化回调的数据 return response.data; }, (error) => { // 失败回调 // 处理 http 网络错误 let msg = ''; // 储存错误信息 let status = error.response.status; switch (status) { case 401: msg = "token 过期"; break; case 403: msg = '无权访问'; break; case 404: msg = "请求地址错误"; break; case 500: msg = "服务器出现问题"; break; default: msg = "无网络"; } ElMessage({ type: 'error', message: msg }); return Promise.reject(error); // 不要让错误消失，要把错误继续传递给调用接口的地方处理。 } );

3. 暴露 request

对外暴露 request，就可以在其他地方直接用 request 发起请求。

export default request;

三、封装前后对比

封装前：每个接口 10+ 行代码，重复 100 遍

封装后：每个接口 1 行代码，全局统一管理