api 统一管理

在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口；

文件夹结构

project root/
    |-- src/
        |-- api/
            |-- user/
                |-- index.ts  // 统一管理api 接口
                |-- type.ts  // 定义数据类型
            |-- product/
            |-- acl/

index.ts api 接口文件

// index.ts
// 统一管理用户相关接口
import request from '@/utils/request'
// 引入定义的ts 类型
import type { loginForm, loginResponseData, userResponseData } from './type'
enum API {
    LOGIN_URL = '/user/login',
    USERINFO_URL = '/user/info',
}
// 暴露请求函数
// 登录接口方法
export const reqLogin = (data: loginForm) => {
    return request.post<any, loginResponseData>(API.LOGIN_URL, data)
}

// 获取用户信息的接口方法
export const reqUserInfo = () => {
    return request.get<any, userResponseData>(API.USERINFO_URL)
}

type.ts 定义数据类型接口

// type.ts
// 登录接口需要携带参数的ts类型
export interface loginForm {
    username: string
    password: string
}

interface dataType {
    token: string
}

// 登录接口返回数据类型
export interface loginResponseData {
    code: number
    data: dataType
}

// 返回用户数据类型
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
}