import{_ as i,o as a,c as n,a2 as h}from"./chunks/framework.B-QBKwc1.js";const g=JSON.parse('{"title":"HTTP 请求封装","description":"前端使用 Axios 封装 HTTP 请求，自动处理 Token 携带、响应码判断、错误提示。","frontmatter":{},"headers":[],"relativePath":"zh/frontend/http.md","filePath":"zh/frontend/http.md"}'),t={name:"zh/frontend/http.md"};function l(k,s,p,e,F,r){return a(),n("div",null,[...s[0]||(s[0]=[h(`

9.4 HTTP 请求封装 ​

概述

前端使用 Axios 封装 HTTP 请求，自动处理 Token 携带、响应码判断、错误提示。

封装结构 ​

text
src/utils/http/axios/
├── index.ts          # Axios 实例配置和拦截器
├── Axios.ts          # VAxios 类封装
├── axiosTransform.ts # 数据转换接口
├── checkStatus.ts    # HTTP 状态码处理
├── helper.ts         # 辅助函数
└── types.ts          # 类型定义

核心拦截器 ​

请求拦截器（自动携带 Token） ​

typescript
// src/utils/http/axios/index.ts

// 请求前自动添加 Token
config.headers['Authorization'] = \`Bearer \${token}\`;

响应拦截器（统一错误处理） ​

typescript
// 响应处理逻辑
const { code, data, msg } = res.data;

if (code === 0) {
    return data;    // 成功，返回 data
}

if (code === 401) {
    // Token 过期，跳转登录
    router.push('/login');
}

// 其他错误，显示提示
ElMessage.error(msg || '操作失败');

响应处理规则

API 模块编写 ​

typescript
// src/api/tool/example.ts
import { http } from '@/utils/http/axios';

export function getExamplePage(params?: Record<string, any>) {
  return http.request({
    url: '/example/page',
    method: 'GET',
    params,
  });
}

export function exampleAdd(data: any) {
  return http.request({
    url: '/example/add',
    method: 'POST',
    data,
  });
}

在组件中使用 ​

typescript
import { getExamplePage, exampleAdd } from '@/api/tool/example';

// 获取列表
const res = await getExamplePage({ pageNo: 1, pageSize: 10 });
tableData.value = res.records;

// 新增
await exampleAdd({ name: '测试', status: 1 });
`,14)])])}const y=i(t,[["render",l]]);export{g as __pageData,y as default};