fetch.js优化，更好支持typescript

Author: sunshine824

src/api/types/user.ts

@@ -0,0 +1,30 @@
+// 登录参数
+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,32 @@
-import service from '@/utils/fetch';
 import qs from 'qs'
+import fetch from '@/utils/fetch'
+import { IUserApi } from './types/user'
 
-// 用户登录
-export const login = (params: any): any => service({
-  method: 'post',
-  url: '/login',
-  data: params,
-});
+const UserApi: IUserApi = {
+  // 登录
+  login: (params) => {
+    return fetch({
+      method: 'post',
+      url: '/login',
+      data: params,
+    })
+  },
+  // 注销登录
+  logout: (params) => {
+    return fetch({
+      method: 'get',
+      url: '/logout',
+      data: params,
+    })
+  },
+  // 获取权限列表
+  getPermissionsList: (params) => {
+    return 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/layouts/LevelBasicLayout.tsx

@@ -1,6 +1,6 @@
 import { defineComponent, computed } from 'vue'
 import { RouterView, RouteRecordRaw, useRouter, useRoute } from 'vue-router'
-import { Layout, Dropdown } from 'ant-design-vue'
+import { Layout, Dropdown, Menu } from 'ant-design-vue'
 import { GlobalHeader, Menus, LevelMenus } from '@/components/GlobalHeader'
 
 import styles from './index.module.less'
@@ -49,14 +49,31 @@ const LevelBasicLayout = defineComponent({
       })
       return JSON.parse(JSON.stringify(menuList))
     }
+
+    // 退出
+    const exit = () => {
+      sessionStorage.clear()
+      router.push('/login')
+    }
+
+    const menuSlots = {
+      overlay: () => (
+        <Menu>
+          <Menu.Item>
+            <span onClick={exit}>退出</span>
+          </Menu.Item>
+        </Menu>
+      ),
+    }
+
     const slots = {
       content: () => (
         <>
           {/* 导航栏 */}
           <LevelMenus menuLists={menuLists['value']}></LevelMenus>
           {/* 用户信息 */}
           <div class={styles['user-info']}>
-            <Dropdown>
+            <Dropdown v-slots={menuSlots}>
               <div>
                 <img src={UserIcon} class={styles['user-head']} />
                 <a class={styles['user-name']}>admin</a>

src/main.ts

@@ -3,7 +3,7 @@ import { store, key } from './store'
 import router from './router'
 import moment from 'moment'
 import App from './App'
-import { setupAntd } from './plugins/antd'
+import Antd from 'ant-design-vue'
 
 moment.locale('zh-cn')
 
@@ -16,8 +16,4 @@ import 'ant-design-vue/dist/antd.css'
 
 const app = createApp(App)
 
-setupAntd(app)
-app.use(router)
-app.use(store, key)
-
-app.mount('#app')
+app.use(router).use(store, key).use(Antd).mount('#app')

src/router/index.ts

@@ -9,7 +9,7 @@ import {
 } from 'vue-router'
 import { mainRoutes, baseRoutes, Routes } from './router.config'
 import { getToken } from '@/utils/token'
-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/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

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios'
-import { getToken, removeToken } from './token'
+import { getToken } from './token'
 import { Modal } from 'ant-design-vue'
 import { Message, Notification } from '@/utils/resetMessage'
 
@@ -37,22 +37,22 @@ service.interceptors.response.use(
           title: 'token出错',
           content: 'token失效，请重新登录！',
           onOk: () => {
-            removeToken()
+            sessionStorage.clear()
           },
         })
       } else if (code == 200) {
         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

@@ -3,7 +3,7 @@ import { useRouter } from 'vue-router'
 import { Form, Input, Button, Row, Col, message } from 'ant-design-vue'
 import { uuid } from '@/utils/util'
 import GlobalBg from '@/components/GlobalBg'
-import { login } from '@/api/user.ts'
+import UserApi from '@/api/user.ts'
 
 import styles from './index.module.less'
 
@@ -46,7 +46,7 @@ const Login = defineComponent({
         await formRef.value.validate()
         loading.value = true
         try {
-          const { data } = await login(formData)
+          const { data } = await UserApi.login(formData)
           sessionStorage.setItem('token', data.token)
           sessionStorage.setItem('userInfo', JSON.stringify(data.userInfo))
           router.push('/dataProtal')