vue3 / vite /TypeScript API接口统一管理

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

// 统一管理用户相关的接口
import request from '@/untils/request';


import type {

 loginFormData,

 loginResponseData,

 userInfoReponseData,

} from './type'

//项目用户相关的请求地址

enum API {

 LOGIN_URL = '/user/login',

 USERINFO_URL = '/user/info',

}
//登录接口
export const reqLogin = (data: loginFormData) =>
 request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息

export const reqUserInfo = () =>
 request.get<any, userInfoReponseData>(API.USERINFO_URL)

TypeScript 规范数据类型

export interface loginFormData {
  username: string,
  password: string,
} 

export interface dataType {
  token: string,
}
export interface loginResponseData {
  code: number,
  data: dataType,
} 
export interface checkUserType {
  userId: number;
	avatar: string;
	username: string;
	password: string;
	desc: string;
	roles: string[];
	buttons: string[];
	routes: string[];
	token: string; 
}
export interface userInfoReponseData {
  code: number,
  data: checkUserType,
}

接口使用

<script setup lang="ts">
import { onMounted } from 'vue';
import { reqLogin } from '@/api/user/index'

onMounted(()=>{
  reqLogin(
    {
      username:'admin',
      password:"111111",
    }
  ).then(res => {console.log(res,'-reqLogin-res');})

})
</script>