⚡️ 这篇文章不只是干巴巴的技术清单，而是一次“情感+理性”的探险，带你走出 AI 写代码时的迷雾。

在传统项目里接口代码往往由经验丰富的同事手工编写，风格统一、命名有章可循。引入生成式 AI 后情况瞬间改变：

指令不明确：一次性给出太多需求，AI 往往只Neng捕捉到片段信息。

工具链不匹配：项目里用的是axios，而 AI 偏爱fetch或uni.request。

硬编码随处可见：URL、请求方式甚至 token dou直接写进组件里。

这些“碎片化”的产物会导致后期切换环境、调试 mock、统一错误处理时需要手动改动数十行代码——这正是我们Zui怕的“维护噩梦”。

规则先行是关键。把团队Yi有的约定抽象成几条简短指令，让 AI 把它们当作“底层逻辑”。下面是一套实战模板：

# 项目基础
- 使用 TypeScript；所有请求返回值必须声明类型。
- 所有接口统一放在 src/api/ 下每个业务模块一个子目录。
- 环境变量通过 import.meta.env.xxx 获取，不要硬编码 URL。
- 错误拦截统一放在 utils/http.ts 中，用 axios 实例包装。
# Prompt 示例
“请基于上述规则，在 src/api/user/getInfo.ts 中实现获取用户信息的函数。返回类型为 UserInfo，使用Yi有的 http 实例发送 GET 请求，路径取自 VITE_API_BASE。” 

只要把这段话复制给 ChatGPT 或 Claude，它就会输出符合项目风格的代码。以后新增接口，只需要改动业务名称+接口描述两点，省去重复说明。

🛠️ 小技巧：把每条规则写成 “必须/禁止” 的形式，例如 “必须使用 axios.create 创建实例”。这样geng容易被模型捕获。

在 Prompt 中使用占位符（如 {BASE_URL}) 而不是硬写真实域名，这样即使切换测试/正式环境，也只需改动配置文件。

.
├─ src/
│   ├─ api/
│   │   ├─ user/
│   │   │   └─ getInfo.ts
│   │   └─ product/
│   │       └─ list.ts
│   ├─ utils/
│   │   └─ http.ts          // axios 实例 + 拦截器
│   └─ types/
│       └─ api.d.ts         // 所有接口返回值类型
└─ env/
    ├─ .env.development
    └─ .env.production

import axios from 'axios';
const instance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE,
  timeout: 8000,
});
instance.interceptors.response.use(
  res => res.data,
  err => {
    // 统一错误处理
    console.error;
    return Promise.reject;
  }
);
export default instance;

上面这段代码只需放进项目一次以后所有请求dou调用 {instance}.get/post/... 即可。

// src/api/user/getInfo.ts
import http from '@/utils/http';
import type { UserInfo } from '@/types/api';
export const getUserInfo =  => {
  return http.get;
};

注意点：

为 TypeScript 泛型，让编辑器自动提示返回字段。

路径仅为相对路径，由 env 决定完整 URL。

No magic strings – 所有常量均来源于统一配置。