feat(projects): 添加请求适配器的请求示例

components.d.ts

@@ -13,17 +13,9 @@ declare module 'vue' {
     IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
     IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
     IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
-    IconCustomActivity: typeof import('~icons/custom/activity')['default']
     IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
-    IconCustomBanner: typeof import('~icons/custom/banner')['default']
-    IconCustomCast: typeof import('~icons/custom/cast')['default']
-    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
     IconCustomLogo: typeof import('~icons/custom/logo')['default']
     IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
-    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
-    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
-    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
-    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
     IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
     IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
     IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
@@ -37,7 +29,6 @@ declare module 'vue' {
     IconMdiPin: typeof import('~icons/mdi/pin')['default']
     IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
     IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
-    IconMdiWechat: typeof import('~icons/mdi/wechat')['default']
     IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
     IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
     IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
@@ -51,44 +42,31 @@ declare module 'vue' {
     NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
-    NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
-    NDescriptions: typeof import('naive-ui')['NDescriptions']
-    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NGradientText: typeof import('naive-ui')['NGradientText']
     NGrid: typeof import('naive-ui')['NGrid']
     NGridItem: typeof import('naive-ui')['NGridItem']
     NInput: typeof import('naive-ui')['NInput']
-    NInputGroup: typeof import('naive-ui')['NInputGroup']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NList: typeof import('naive-ui')['NList']
-    NListItem: typeof import('naive-ui')['NListItem']
     NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
-    NPopover: typeof import('naive-ui')['NPopover']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
-    NSpin: typeof import('naive-ui')['NSpin']
-    NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']
-    NTag: typeof import('naive-ui')['NTag']
-    NThing: typeof import('naive-ui')['NThing']
     NTimeline: typeof import('naive-ui')['NTimeline']
     NTimelineItem: typeof import('naive-ui')['NTimelineItem']
     NTooltip: typeof import('naive-ui')['NTooltip']

mock/api/demo.ts

@@ -0,0 +1,20 @@
+import type { MockMethod } from 'vite-plugin-mock';
+
+const apis: MockMethod[] = [
+  {
+    url: '/mock/apiDemoWithAdapter',
+    method: 'post',
+    response: (): Service.MockServiceResult<ApiDemo.DataWithAdapter> => {
+      return {
+        code: 200,
+        message: 'ok',
+        data: {
+          dataId: '123',
+          dataName: 'demoName'
+        }
+      };
+    }
+  }
+];
+
+export default apis;

src/service/adapter/index.ts

@@ -1 +1,10 @@
-export {};
+export function adapterOfDataWithAdapter(res: Service.RequestResult<ApiDemo.DataWithAdapter>): Demo.DataWithAdapter {
+  const { dataId, dataName } = res.data!;
+
+  const result: Demo.DataWithAdapter = {
+    id: dataId,
+    name: dataName
+  };
+
+  return result;
+}

src/service/api/demo.ts

@@ -1,6 +1,9 @@
-import { request } from '../request';
+import { adapterOfServiceResult } from '@/utils';
+import { mockRequest } from '../request';
+import { adapterOfDataWithAdapter } from '../adapter';
 
-/** 测试请求代理 */
-export function fetchTestProxy() {
-  return request.get('/test');
+/** 带有适配器的请求(将请求结果进行数据处理) */
+export async function fetchDataWithAdapter() {
+  const res = await mockRequest.post<ApiDemo.DataWithAdapter>('/apiDemoWithAdapter');
+  return adapterOfServiceResult(adapterOfDataWithAdapter, res);
 }

src/service/request/request.ts

@@ -29,7 +29,7 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
    * - data: 请求的body的data
    * - axiosConfig: axios配置
    */
-  async function asyncRequest<T = any>(param: RequestParam): Promise<Service.RequestResult<T>> {
+  async function asyncRequest<T>(param: RequestParam): Promise<Service.RequestResult<T>> {
     const { url } = param;
     const method = param.method || 'get';
     const { instance } = customInstance;
@@ -49,7 +49,7 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
    * @param url - 请求地址
    * @param config - axios配置
    */
-  function get<T = any>(url: string, config?: AxiosRequestConfig) {
+  function get<T>(url: string, config?: AxiosRequestConfig) {
     return asyncRequest<T>({ url, method: 'get', axiosConfig: config });
   }
 
@@ -59,7 +59,7 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
    * @param data - 请求的body的data
    * @param config - axios配置
    */
-  function post<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+  function post<T>(url: string, data?: any, config?: AxiosRequestConfig) {
     return asyncRequest<T>({ url, method: 'post', data, axiosConfig: config });
   }
   /**
@@ -68,7 +68,7 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
    * @param data - 请求的body的data
    * @param config - axios配置
    */
-  function put<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+  function put<T>(url: string, data?: any, config?: AxiosRequestConfig) {
     return asyncRequest<T>({ url, method: 'put', data, axiosConfig: config });
   }
 
@@ -77,7 +77,7 @@ export function createRequest(axiosConfig: AxiosRequestConfig, backendConfig?: S
    * @param url - 请求地址
    * @param config - axios配置
    */
-  function handleDelete<T = any>(url: string, config: AxiosRequestConfig) {
+  function handleDelete<T>(url: string, config: AxiosRequestConfig) {
     return asyncRequest<T>({ url, method: 'delete', axiosConfig: config });
   }
 
@@ -112,7 +112,7 @@ export function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig
    * - data: 请求的body的data
    * - axiosConfig: axios配置
    */
-  function useRequest<T = any>(param: RequestParam): RequestResultHook<T> {
+  function useRequest<T>(param: RequestParam): RequestResultHook<T> {
     const { loading, startLoading, endLoading } = useLoading();
     const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine);
 
@@ -147,7 +147,7 @@ export function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig
    * @param url - 请求地址
    * @param config - axios配置
    */
-  function get<T = any>(url: string, config?: AxiosRequestConfig) {
+  function get<T>(url: string, config?: AxiosRequestConfig) {
     return useRequest<T>({ url, method: 'get', axiosConfig: config });
   }
 
@@ -157,7 +157,7 @@ export function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig
    * @param data - 请求的body的data
    * @param config - axios配置
    */
-  function post<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+  function post<T>(url: string, data?: any, config?: AxiosRequestConfig) {
     return useRequest<T>({ url, method: 'post', data, axiosConfig: config });
   }
   /**
@@ -166,7 +166,7 @@ export function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig
    * @param data - 请求的body的data
    * @param config - axios配置
    */
-  function put<T = any>(url: string, data?: any, config?: AxiosRequestConfig) {
+  function put<T>(url: string, data?: any, config?: AxiosRequestConfig) {
     return useRequest<T>({ url, method: 'put', data, axiosConfig: config });
   }
 
@@ -175,7 +175,7 @@ export function createHookRequest(axiosConfig: AxiosRequestConfig, backendConfig
    * @param url - 请求地址
    * @param config - axios配置
    */
-  function handleDelete<T = any>(url: string, config: AxiosRequestConfig) {
+  function handleDelete<T>(url: string, config: AxiosRequestConfig) {
     return useRequest<T>({ url, method: 'delete', axiosConfig: config });
   }
 

src/typings/api.d.ts

@@ -21,3 +21,10 @@ declare namespace ApiRoute {
     home: AuthRoute.RouteKey;
   }
 }
+
+declare namespace ApiDemo {
+  interface DataWithAdapter {
+    dataId: string;
+    dataName: string;
+  }
+}

src/typings/business.d.ts

@@ -21,3 +21,10 @@ declare namespace Auth {
     userRole: RoleType;
   }
 }
+
+declare namespace Demo {
+  interface DataWithAdapter {
+    id: string;
+    name: string;
+  }
+}

src/utils/service/handler.ts

@@ -23,6 +23,7 @@ type Adapter<T = any> = (...args: Service.RequestResult[]) => T;
  */
 export function adapterOfServiceResult<T extends Adapter>(adapter: T, ...args: TypeUtil.GetFunArgs<T>) {
   let result: Service.RequestResult | undefined;
+
   const hasError = args.some(item => {
     const flag = Boolean(item.error);
     if (flag) {
@@ -41,5 +42,5 @@ export function adapterOfServiceResult<T extends Adapter>(adapter: T, ...args: T
     };
   }
 
-  return result as TypeUtil.GetFunReturn<T>;
+  return result as Service.RequestResult<TypeUtil.GetFunReturn<T>>;
 }