TypeScript 项目中接口的统一管理

首先我们简单来二次封装一个 axios 请求：

utils / request / index.ts

import axios from 'axios'

let request = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API,
    timeout: 5000
})

request.interceptors.request.use((config) => {
    // config配置对象中的一个重要属性 headers 请求头, 通常用来给服务其携带公共参数
    return config
})

request.interceptors.response.use((response) => {
    return response.data // 简化请求回来的数据
}, (error) => {
    // 失败回调：处理 http 网络错误
    let message = ''
    let status = error.response.status
    switch (status) {
        case 401:
            message="身份验证过期，请重新登录"
            break
        case 403:
            message="你无权访问"
            break
        case 404:
            message="资源没有找到"
            break
        case 500:
            message="服务器出现故障"
    }

    return Promise.reject(error) // 终结 Promise 链
})

export default request

在 src 目录下新建一个 api 文件夹

这里就以 user 模块为例：

index.ts：管理 user 模块相关的接口

那么 type.ts 是做什么用的呢？

接口在发起请求的时候可能是会携带参数的，以及服务器返回的数据等等这些都是需要被定义数据的类型的，因此该配置文件的作用就体现出来了。

type.ts

// req-登录接口
// 携带参数的数据类型
export interface loginForm {
    username: string,
    password: string
}
// 返回的数据的数据类型
interface dataType {
    token: string
}
export interface loginResponseData {
    code: number,
    data: dataType
}

// req-用户信息获取接口
// 返回的数据的数据类型
interface userInfo {
    userId: number,
    avatar: string,
    username: string,
    password: string,
    desc: string,
    roles: string[],
    buttons: string[],
    routes: string[],
    token: string
}
interface user {
    checkUser: userInfo
}
export interface userResponseData {
    code: number,
    data: user
}

接口定义：

import request from '@/utils/request/index.ts'
import type { loginForm, loginResponseData, userResponseData } from "@/api/user/type.ts";

// 枚举请求接口地址
enum API {
    LOGIN_URL= '/user/login',
    USERINFO_URL = '/user/info'
}

export const reqLogin = (data: loginForm) =>  request.post<any, loginResponseData>(API.LOGIN_URL, data) // req-登录接口

export const reqUserInfo = () => request.get<any,userResponseData>(API.USERINFO_URL) // req-获取用户信息接口