Vue3 》》vite》》TS》》封装 axios ,Promise＜T＞

封装 axios

// src/env.d.ts
// env.d.ts   
// 路径无所谓
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string
  readonly VITE_TIMEOUT: Number
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

//src/utils/axios.ts
import axios from "axios"
import { ElMessage } from 'element-plus'
//实例配置
const request = axios.create({
    baseURL: import.meta.env.VITE_BASE_URL,//从环境变量获取基础路径
    timeout: 3000,
})
//为实例配置请求拦截器
request.interceptors.request.use(config => {
    // config 配置对象
    console.log(import.meta.env)
    console.log(config)
    return config;
},err=>{
    console.log(err)
})
//为实例配置响应拦截器
request.interceptors.response.use(res=>{
    //成功回调
    //简化数据
    return res.data;
},err=>{
    //失败回调：处理http网络错误
    //定义一个变量：存储网络错误
    let message = ""
    //http 状态
    let status = err.response.status
    switch(status){
        case 401:
            message = "token无效"
            break
        case 403:
            message = "无权访问"
            break
        case 404:
            message = "请求地址有误"
            break
        case 500:
            message = "服务处理故障"
            break
        default:
            message = "网络故障"
            break
    }
    // 提示错误信息
    ElMessage({
        type:'error',
        message
    })
    return Promise.reject(err)
})
export {request}

vue 应用

ts 声明文件

》》为了能点出来 需要设置 声明文件 d.ts

// src/env.d.ts   推荐  这个  
// env.d.ts   
// 路径无所谓
interface ImportMetaEnv {
  readonly VITE_BASE_URL: string
  readonly VITE_TIMEOUT: Number
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

项目/
├── src/
│   ├── env.d.ts          # 环境变量类型定义（推荐位置）
│   ├── main.ts
│   ├── App.vue
│   └── ...
├── .env                  # 环境变量文件
├── .env.development
├── .env.production
├── tsconfig.json
└── vite.config.ts

实现文件 声明文件

vite 下的 axios 类型解析

interface User {
  id: number;
  name: string;
}

interface ApiResponse {
  data: User[];
  total: number;
}

// 请求配置
const config: AxiosRequestConfig = {
  timeout: 5000,
  headers: {'X-Custom-Header': 'value'}
};

const response = await axios.get<User, AxiosResponse<ApiResponse>>(
  '/api/users', 
  config
);

// 现在 TypeScript 有完整的类型提示：
console.log(response.data.data[0].name);    // ✅ 类型安全
console.log(response.status);               // ✅ AxiosResponse 的属性

axios ===》 Promise

1. 基本数据类型
// Promise 返回 string
const namePromise: Promise<string> = Promise.resolve("张三");

// Promise 返回 number
const agePromise: Promise<number> = Promise.resolve(25);

// Promise 返回 boolean
const isActivePromise: Promise<boolean> = Promise.resolve(true);

2. 对象类型

interface User {
    id: number;
    name: string;
    email: string;
}

// Promise 返回 User 对象
const userPromise: Promise<User> = Promise.resolve({
    id: 1,
    name: "李xx",
    email: "xx@example.com"
});

3. 数组类型

interface User {
    id: number;
    name: string;
    email?: string;
}
// Promise 返回 User 数组
const usersPromise: Promise<User[]> = Promise.resolve([
    { id: 1, name: "张三" },
    { id: 2, name: "李四",  email: "xx@example.com"}
]);

4. 复杂类型
interface User {
    id: number;
    name: string;
}
interface ApiResponse<T> {
    data: T;
    status: number;
    message: string;
}

// Promise 返回复杂的 ApiResponse
const responsePromise: Promise<ApiResponse<User[]>> = Promise.resolve({
    data: [{ id: 1, name: "王五" }],
    status: 200,
    message: "成功"
});