升级封装fetch.js，更好支持typescript

Author: sunshine824

src/api/types/user.ts

@@ -0,0 +1,32 @@
+import { AxiosPromise } from 'axios'
+
+// 登录参数
+export interface ILoginApiParams {
+  username: string // 用户名
+  password: string // 密码
+  captcha: string // 验证码
+  uuid: string // 验证码uuid
+}
+
+// 登录返回结果
+export interface ILoginData {
+  token: string
+  userInfo: {
+    address: string
+    username: string
+  }
+}
+
+// 注销登录参数
+export interface ILogoutParams {}
+
+// 获取用户权限参数
+export interface IPermissionsParams {}
+
+export interface IUserApi {
+  login: (params: ILoginApiParams) => Promise<StoreState.ResType<ILoginData>>
+  logout: (params: ILogoutParams) => Promise<StoreState.ResType<any>>
+  getPermissionsList: (
+    params: IPermissionsParams,
+  ) => Promise<StoreState.ResType<any>>
+}

src/api/user.ts

@@ -1,23 +1,29 @@
-import service from '@/utils/fetch';
+import fetch from '@/utils/fetch'
 import qs from 'qs'
+import { IUserApi } from './types/user'
 
-// 用户登录
-export const login = (params: any): any => service({
-  method: 'post',
-  url: '/login',
-  data: params,
-});
+const UserApi: IUserApi = {
+  // 登录
+  login: (params) =>
+    fetch({
+      method: 'post',
+      url: '/login',
+      data: params,
+    }),
+  // 注销登录
+  logout: (params) =>
+    fetch({
+      method: 'get',
+      url: '/logout',
+      data: params,
+    }),
+  // 获取权限列表
+  getPermissionsList: (params) =>
+    fetch({
+      method: 'get',
+      url: '/navPerson',
+      data: qs.stringify(params),
+    }),
+}
 
-// 用户登出
-export const logout = (params: any) => service({
-  method: 'get',
-  url: '/logout',
-  data: params,
-});
-
-// 获取权限列表
-export const getPermissionsList = (params: any) => service({
-  method: 'get',
-  url: '/navPerson',
-  data: qs.stringify(params),
-});
+export default UserApi

src/router/index.ts

@@ -9,7 +9,7 @@ import {
 } from 'vue-router'
 import { mainRoutes, baseRoutes, Routes } from './router.config'
 import { getToken } from '@/utils/util'
-import { getPermissionsList } from '@/api/user'
+import UserApi from '@/api/user'
 import { RouteLayout, BlankLayout } from '@/layouts'
 
 let isAddDynamicMenuRoutes = false // 是否请求路由表
@@ -69,7 +69,7 @@ router.beforeEach(
       if (!isAddDynamicMenuRoutes) {
         try {
           //获取动态路由表
-          const res: any = await getPermissionsList({})
+          const res: any = await UserApi.getPermissionsList({})
           if (res.code == 200) {
             isAddDynamicMenuRoutes = true
             const menu = res.data

src/store/modules/common.ts

@@ -1,15 +1,27 @@
 import { defineStore } from 'pinia'
 
+interface IUserInfoProps {
+  token: string
+  userInfo: {
+    address: string
+    username: string
+  }
+}
+
+interface CommonState {
+  userInfo: IUserInfoProps | null
+}
+
 export const CommonStore = defineStore('common', {
   // 状态库
-  state: () => ({
-    userInfo: {}, //用户信息
+  state: (): CommonState => ({
+    userInfo: null, //用户信息
   }),
   getters: {
     getUserInfo: (state) => state.userInfo?.userInfo,
   },
   actions: {
-    setUserInfo<T>(data: T) {
+    setUserInfo(data: NonNullable<IUserInfoProps>) {
       this.userInfo = data
     },
   },

src/types/interfaces.d.ts

@@ -7,11 +7,11 @@
  */
 declare namespace StoreState {
   // 接口返回结构
-  export interface Result {
+  export interface ResType<T> {
     code: number
-    data: any
+    data?: T
+    msg?: string
     status: boolean
-    msg: string
   }
 
   // 请求参数结构

src/utils/fetch.ts

@@ -44,15 +44,15 @@ service.interceptors.response.use(
         if (status) {
           // 接口请求成功
           msg && Message.success(msg) // 后台如果返回了msg，则将msg提示出来
-          return Promise.resolve(response.data) // 返回成功数据
+          return Promise.resolve(response) // 返回成功数据
         }
         // 接口异常
         msg && Message.warning(msg) // 后台如果返回了msg，则将msg提示出来
-        return Promise.reject(response.data) // 返回异常数据
+        return Promise.reject(response) // 返回异常数据
       } else {
         // 接口异常
         msg && Message.error(msg)
-        return Promise.reject(response.data)
+        return Promise.reject(response)
       }
     }
     return response
@@ -96,4 +96,22 @@ service.interceptors.response.use(
   },
 )
 
-export default service
+interface Http {
+  fetch<T>(params: AxiosRequestConfig): Promise<StoreState.ResType<T>>
+}
+
+const http: Http = {
+  fetch(params) {
+    return new Promise((resolve, reject) => {
+      service(params)
+        .then((res) => {
+          resolve(res.data)
+        })
+        .catch((err) => {
+          reject(err.data)
+        })
+    })
+  },
+}
+
+export default http['fetch']

src/views/user/login/index.tsx

@@ -4,7 +4,7 @@ import { uuid } from '@/utils/util'
 import { Form, Input, Button, message } from 'ant-design-vue'
 import { CommonStore } from '@/store/modules/common'
 import GlobalBg from '@/components/GlobalBg'
-import { login } from '@/api/user.ts'
+import UserApi from '@/api/user.ts'
 
 import styles from './index.module.less'
 
@@ -48,7 +48,7 @@ const Login = defineComponent({
         await formRef.value.validate()
         loading.value = true
         try {
-          const { data } = await login(formData)
+          const { data } = await UserApi.login(formData)
           common.setUserInfo(data)
           router.push('/dataProtal')
           loading.value = false