feat: Axios 响应数据支持通过泛型推导

src/api/hook-demo/use-fetch-select.ts

@@ -1,5 +1,5 @@
 /** 模拟接口响应数据 */
-const SELECT_DATA = {
+const SELECT_RESPONSE_DATA = {
   code: 0,
   data: [
     {
@@ -21,12 +21,12 @@ const SELECT_DATA = {
 
 /** 模拟接口 */
 export function getSelectDataApi() {
-  return new Promise<typeof SELECT_DATA>((resolve, reject) => {
+  return new Promise<typeof SELECT_RESPONSE_DATA>((resolve, reject) => {
     // 模拟接口响应时间 2s
     setTimeout(() => {
       // 模拟接口调用成功
       if (Math.random() < 0.8) {
-        resolve(SELECT_DATA)
+        resolve(SELECT_RESPONSE_DATA)
       } else {
         // 模拟接口调用出错
         reject(new Error("接口发生错误"))

src/api/hook-demo/use-fullscreen-loading.ts

@@ -1,5 +1,5 @@
 /** 模拟接口响应数据 */
-const SUCCESS_DATA = {
+const SUCCESS_RESPONSE_DATA = {
   code: 0,
   data: {},
   message: "获取成功"
@@ -7,9 +7,9 @@ const SUCCESS_DATA = {
 
 /** 模拟请求接口成功 */
 export function getSuccessApi() {
-  return new Promise<typeof SUCCESS_DATA>((resolve) => {
+  return new Promise<typeof SUCCESS_RESPONSE_DATA>((resolve) => {
     setTimeout(() => {
-      resolve(SUCCESS_DATA)
+      resolve(SUCCESS_RESPONSE_DATA)
     }, 1000)
   })
 }

src/api/login.ts

@@ -1,6 +1,6 @@
 import { request } from "@/utils/service"
 
-export interface ILoginData {
+export interface ILoginRequestData {
   /** admin 或 editor */
   username: "admin" | "editor"
   /** 密码 */
@@ -9,16 +9,21 @@ export interface ILoginData {
   code: string
 }
 
+type LoginCodeResponseData = IApiResponseData<string>
+type LoginResponseData = IApiResponseData<{ token: string }>
+type UserInfoResponseData = IApiResponseData<{ username: string; roles: string[] }>
+
 /** 获取登录验证码 */
 export function getLoginCodeApi() {
-  return request({
+  return request<LoginCodeResponseData>({
     url: "login/code",
     method: "get"
   })
 }
+
 /** 登录并返回 Token */
-export function loginApi(data: ILoginData) {
+export function loginApi(data: ILoginRequestData) {
-  return request({
+  return request<LoginResponseData>({
     url: "users/login",
     method: "post",
     data
@@ -26,7 +31,7 @@ export function loginApi(data: ILoginData) {
 }
 /** 获取用户详情 */
 export function getUserInfoApi() {
-  return request({
+  return request<UserInfoResponseData>({
     url: "users/info",
     method: "get"
   })

src/api/table.ts

@@ -1,17 +1,17 @@
 import { request } from "@/utils/service"
 
-interface ICreateTableDataApi {
+interface ICreateTableRequestData {
   username: string
   password: string
 }
 
-interface IUpdateTableDataApi {
+interface IUpdateTableRequestData {
   id: string
   username: string
   password?: string
 }
 
-interface IGetTableDataApi {
+interface IGetTableRequestData {
   /** 当前页码 */
   currentPage: number
   /** 查询条数 */
@@ -21,8 +21,21 @@ interface IGetTableDataApi {
   phone?: string
 }
 
+type GetTableResponseData = IApiResponseData<{
+  list: {
+    createTime: string
+    email: string
+    id: string
+    phone: string
+    roles: string
+    status: boolean
+    username: string
+  }[]
+  total: number
+}>
+
 /** 增 */
-export function createTableDataApi(data: ICreateTableDataApi) {
+export function createTableDataApi(data: ICreateTableRequestData) {
   return request({
     url: "table",
     method: "post",
@@ -39,7 +52,7 @@ export function deleteTableDataApi(id: string) {
 }
 
 /** 改 */
-export function updateTableDataApi(data: IUpdateTableDataApi) {
+export function updateTableDataApi(data: IUpdateTableRequestData) {
   return request({
     url: "table",
     method: "put",
@@ -48,8 +61,8 @@ export function updateTableDataApi(data: IUpdateTableDataApi) {
 }
 
 /** 查 */
-export function getTableDataApi(params: IGetTableDataApi) {
+export function getTableDataApi(params: IGetTableRequestData) {
-  return request({
+  return request<GetTableResponseData>({
     url: "table",
     method: "get",
     params

src/store/modules/user.ts

@@ -4,7 +4,7 @@ import { defineStore } from "pinia"
 import { usePermissionStore } from "./permission"
 import { getToken, removeToken, setToken } from "@/utils/cache/cookies"
 import router, { resetRouter } from "@/router"
-import { type ILoginData, loginApi, getUserInfoApi } from "@/api/login"
+import { type ILoginRequestData, loginApi, getUserInfoApi } from "@/api/login"
 import { type RouteRecordRaw } from "vue-router"
 
 export const useUserStore = defineStore("user", () => {
@@ -17,14 +17,14 @@ export const useUserStore = defineStore("user", () => {
     roles.value = value
   }
   /** 登录 */
-  const login = (loginData: ILoginData) => {
+  const login = (loginData: ILoginRequestData) => {
     return new Promise((resolve, reject) => {
       loginApi({
         username: loginData.username,
         password: loginData.password,
         code: loginData.code
       })
-        .then((res: any) => {
+        .then((res) => {
           setToken(res.data.token)
           token.value = res.data.token
           resolve(true)
@@ -38,7 +38,7 @@ export const useUserStore = defineStore("user", () => {
   const getInfo = () => {
     return new Promise((resolve, reject) => {
       getUserInfoApi()
-        .then((res: any) => {
+        .then((res) => {
           roles.value = res.data.roles
           username.value = res.data.username
           resolve(res)

src/utils/service.ts

@@ -88,7 +88,7 @@ function createService() {
 
 /** 创建请求方法 */
 function createRequestFunction(service: AxiosInstance) {
-  return function (config: AxiosRequestConfig) {
+  return function <T>(config: AxiosRequestConfig): Promise<T> {
     const configDefault = {
       headers: {
         // 携带 Token

src/views/login/index.vue

@@ -5,7 +5,7 @@ import { useUserStore } from "@/store/modules/user"
 import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
 import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import { type FormInstance, FormRules } from "element-plus"
-import { type ILoginData, getLoginCodeApi } from "@/api/login"
+import { type ILoginRequestData, getLoginCodeApi } from "@/api/login"
 
 const router = useRouter()
 const loginFormRef = ref<FormInstance | null>(null)
@@ -15,7 +15,7 @@ const loading = ref(false)
 /** 验证码图片 URL */
 const codeUrl = ref("")
 /** 登录表单数据 */
-const loginForm: ILoginData = reactive({
+const loginForm: ILoginRequestData = reactive({
   username: "admin",
   password: "12345678",
   code: ""
@@ -61,7 +61,7 @@ const createCode = () => {
   loginForm.code = ""
   // 获取验证码
   codeUrl.value = ""
-  getLoginCodeApi().then((res: any) => {
+  getLoginCodeApi().then((res) => {
     codeUrl.value = res.data
   })
 }

src/views/table/element-plus/index.vue

@@ -93,7 +93,7 @@ const getTableData = () => {
     username: searchData.username || undefined,
     phone: searchData.phone || undefined
   })
-    .then((res: any) => {
+    .then((res) => {
       paginationData.total = res.data.total
       tableData.value = res.data.list
     })

types/api.d.ts

@@ -0,0 +1,6 @@
+/** 所有 api 接口的响应数据都应该准守该格式 */
+interface IApiResponseData<T> {
+  code: number
+  data: T
+  message: string
+}