fix: modify request format

src/layouts/BasicLayout/index.vue

@@ -7,7 +7,6 @@ import {
   Logo,
   Menu,
   Notices,
-  Reload,
   Search,
   Setting,
   TabBar,
@@ -52,7 +51,6 @@ const appStore = useAppStore()
           </div>
           <div class="flex-y-center h-full">
             <Search />
-            <Reload />
             <Notices />
             <FullScreen />
             <DarkModeSwitch />

src/layouts/components/index.ts

@@ -10,7 +10,6 @@ import Setting from './header/Setting.vue'
 import Notices from './header/Notices.vue'
 import UserCenter from './header/UserCenter.vue'
 import Search from './header/Search.vue'
-import Reload from './header/Reload.vue'
 
 /* 标签栏组件  */
 import TabBar from './tab/TabBar.vue'
@@ -29,7 +28,6 @@ export {
   Notices,
   UserCenter,
   Search,
-  Reload,
   TabBar,
   BackTop,
 }

src/layouts/components/tab/TabBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { RouteLocationNormalized } from 'vue-router'
+import Reload from './Reload.vue'
 import { renderIcon } from '@/utils'
 import { useAppStore, useTabStore } from '@/store'
 
@@ -133,6 +134,7 @@ function handleDropTabs(key: string, option: any) {
         </div>
       </n-tab>
       <template #suffix>
+        <Reload />
         <n-dropdown
           :options="tabStore.allTabs"
           :render-label="renderDropTabsLabel"
@@ -141,9 +143,9 @@ function handleDropTabs(key: string, option: any) {
           size="small"
           @select="handleDropTabs"
         >
-          <n-button tertiary circle type="primary">
+          <CommonWrapper>
             <i-icon-park-outline-application-menu />
-          </n-button>
+          </CommonWrapper>
         </n-dropdown>
       </template>
     </n-tabs>

src/service/http/alova.ts

@@ -70,15 +70,15 @@ export function createAlovaInstance(
           const apiData = await response.json()
           // 请求成功
           if (apiData[_backendConfig.codeKey] === _backendConfig.successCode)
-            return handleServiceResult(apiData.data, null)
+            return handleServiceResult(apiData)
 
           // 业务请求失败
           const errorResult = handleBusinessError(apiData, _backendConfig)
-          return handleServiceResult(null, errorResult)
+          return handleServiceResult(errorResult, false)
         }
         // 接口请求失败
         const errorResult = handleResponseError(response)
-        return handleServiceResult(null, errorResult)
+        return handleServiceResult(errorResult, false)
       },
       onError: (error, method) => {
         const tip = `[${method.type}] - [${method.url}] - ${error.message}`

src/service/http/config.ts

@@ -14,7 +14,7 @@ export const DEFAULT_BACKEND_OPTIONS = {
 
 /** 请求不成功各种状态的错误 */
 export const ERROR_STATUS = {
-  0: '请求错误~',
+  default: '请求错误~',
   400: '400: 请求出现语法错误~',
   401: '401: 用户未授权~',
   403: '403: 服务器拒绝访问~',

src/service/http/handle.ts

@@ -1,5 +1,5 @@
-import { showError } from './utils'
 import {
+  ERROR_NO_TIP_STATUS,
   ERROR_STATUS,
 } from './config'
 import { useAuthStore } from '@/store'
@@ -15,12 +15,13 @@ type ErrorStatus = keyof typeof ERROR_STATUS
  */
 export function handleResponseError(response: Response) {
   const error: Service.RequestError = {
-    type: 'Response',
+    errorType: 'Response Error',
     code: 0,
-    msg: ERROR_STATUS[0],
+    msg: ERROR_STATUS.default,
+    data: null,
   }
   const errorCode: ErrorStatus = response.status as ErrorStatus
-  const msg = ERROR_STATUS[errorCode] || ERROR_STATUS[0]
+  const msg = ERROR_STATUS[errorCode] || ERROR_STATUS.default
   Object.assign(error, { code: errorCode, msg })
 
   showError(error)
@@ -37,9 +38,10 @@ export function handleResponseError(response: Response) {
 export function handleBusinessError(data: Record<string, any>, config: Required<Service.BackendConfig>) {
   const { codeKey, msgKey } = config
   const error: Service.RequestError = {
-    type: 'Business',
+    errorType: 'Business Error',
     code: data[codeKey],
     msg: data[msgKey],
+    data: data.data,
   }
 
   showError(error)
@@ -50,22 +52,15 @@ export function handleBusinessError(data: Record<string, any>, config: Required<
 /**
  * @description: 统一成功和失败返回类型
  * @param {any} data
- * @param {Service} error
+ * @param {boolean} isSuccess
  * @return {*} result
  */
-export function handleServiceResult<T = any>(data: any, error: Service.RequestError | null) {
-  if (error) {
-    const fail: Service.FailedResult = {
-      error,
-      data: null,
-    }
-    return fail
+export function handleServiceResult(data: any, isSuccess: boolean = true) {
+  return {
+    isSuccess,
+    errorType: null,
+    ...data,
   }
-  const success: Service.SuccessResult<T> = {
-    error: null,
-    data,
-  }
-  return success
 }
 
 /**
@@ -84,3 +79,12 @@ export async function handleRefreshToken() {
     await authStore.resetAuthStore()
   }
 }
+
+export function showError(error: Service.RequestError) {
+  // 如果error不需要提示,则跳过
+  const code = Number(error.code)
+  if (ERROR_NO_TIP_STATUS.includes(code))
+    return
+
+  window.$message.error(error.msg)
+}

src/service/http/index.ts

@@ -2,10 +2,10 @@ import { createAlovaInstance } from './alova'
 import { serviceConfig } from '@/../service.config'
 import { generateProxyPattern } from '@/../build/proxy'
 
-const { url } = generateProxyPattern(serviceConfig[import.meta.env.MODE])
-
 const isHttpProxy = import.meta.env.VITE_HTTP_PROXY === 'Y' || false
 
+const { url } = generateProxyPattern(serviceConfig[import.meta.env.MODE])
+
 export const alovaInstance = createAlovaInstance({
   baseURL: isHttpProxy ? url.proxy : url.value,
 })

src/typings/service.d.ts

@@ -20,34 +20,17 @@ declare namespace Service {
     successCode?: number | string
   }
 
-  type RequestErrorType = 'Response' | 'Business'
+  type RequestErrorType = 'Response Error' | 'Business Error'
   type RequestCode = string | number
 
   interface RequestError {
     /** 请求服务的错误类型 */
-    type: RequestErrorType
+    errorType: RequestErrorType
     /** 错误码 */
     code: RequestCode
     /** 错误信息 */
     msg: string
+    /** 返回的数据 */
+    data?: any
   }
-
-  /** 自定义的请求成功结果 */
-  interface SuccessResult<T = any> {
-    /** 请求错误 */
-    error: null
-    /** 请求数据 */
-    data: T
-  }
-
-  /** 自定义的请求失败结果 */
-  interface FailedResult {
-    /** 请求错误 */
-    error: RequestError
-    /** 请求数据 */
-    data: null
-  }
-
-  /** 自定义的请求结果 */
-  type RequestResult<T = any> = SuccessResult<T> | FailedResult
 }

src/views/login/components/Login/index.vue

@@ -99,7 +99,7 @@ checkUserAccount()
             忘记密码？
           </n-button>
         </div>
-        <n-button block type="primary" size="large" :loading="isLoading" @click="handleLogin">
+        <n-button block type="primary" size="large" :loading="isLoading" :disabled="isLoading" @click="handleLogin">
           登录
         </n-button>
         <n-button type="primary" text @click="toOtherForm('register')">

src/views/plugin/fetch/index.vue

@@ -30,10 +30,9 @@ function handleRequestHook() {
 function pinterEnv() {
   msg.value = import.meta.env
 }
-function get() {
-  fetachGet({ a: 112211, b: false }).then((res) => {
-    msg.value = res
-  })
+async function get() {
+  const res = await fetachGet({ a: 112211, b: false })
+  msg.value = res
 }
 function delete2() {
   fetchDelete().then((res) => {