refactor(projects): 精简版+动态路由权限初步

src/service/request/index.ts

@@ -1,12 +1,8 @@
-import { REQUEST_TIMEOUT } from '@/config';
 import { createRequest } from './request';
+import { serviceEnv } from '~/.env-config';
 
-export const request = createRequest({
-  baseURL: import.meta.env.VITE_HTTP_URL,
-  timeout: REQUEST_TIMEOUT
-});
+const { url } = serviceEnv[import.meta.env.VITE_HTTP_ENV];
 
-export const mockRequest = createRequest({
-  baseURL: '',
-  timeout: REQUEST_TIMEOUT
-});
+export const request = createRequest({ baseURL: url });
+
+export const mockRequest = createRequest({ baseURL: '/mock' });

src/service/request/instance.ts

@@ -1,7 +1,14 @@
 import axios from 'axios';
 import type { AxiosRequestConfig, AxiosInstance, AxiosError, CancelTokenStatic } from 'axios';
-import { getToken, transformRequestData, handleAxiosError, handleResponseError, handleBackendError } from '@/utils';
-import type { BackendServiceResult } from '@/interface';
+import { REQUEST_TIMEOUT } from '@/config';
+import {
+  getToken,
+  transformRequestData,
+  handleAxiosError,
+  handleResponseError,
+  handleBackendError,
+  handleServiceResult
+} from '@/utils';
 
 /**
  * 封装axios请求类
@@ -15,7 +22,11 @@ export default class CustomAxiosInstance {
   cancelToken: CancelTokenStatic;
 
   constructor(axiosConfig: AxiosRequestConfig) {
-    this.instance = axios.create(axiosConfig);
+    const defaultConfig: AxiosRequestConfig = {
+      timeout: REQUEST_TIMEOUT
+    };
+    Object.assign(defaultConfig, axiosConfig);
+    this.instance = axios.create(defaultConfig);
     this.cancelToken = axios.CancelToken;
     this.setInterceptor();
   }
@@ -36,26 +47,26 @@ export default class CustomAxiosInstance {
       },
       (axiosError: AxiosError) => {
         const error = handleAxiosError(axiosError);
-        return Promise.reject(error);
+        return handleServiceResult(error, null);
       }
     );
     this.instance.interceptors.response.use(
       response => {
         const { status } = response;
         if (status === 200 || status < 300 || status === 304) {
-          const backendServiceResult = response.data as BackendServiceResult;
-          if (backendServiceResult.code === this.backendSuccessCode) {
-            return Promise.resolve(backendServiceResult.data);
+          const backend = response.data as Service.BackendServiceResult;
+          if (backend.code === this.backendSuccessCode) {
+            return handleServiceResult(null, backend.data);
           }
-          const error = handleBackendError(backendServiceResult);
-          return Promise.reject(error);
+          const error = handleBackendError(backend);
+          return handleServiceResult(error, null);
         }
         const error = handleResponseError(response);
-        return Promise.reject(error);
+        return handleServiceResult(error, null);
       },
       (axiosError: AxiosError) => {
         const error = handleAxiosError(axiosError);
-        return Promise.reject(error);
+        return handleServiceResult(error, null);
       }
     );
   }

src/service/request/request.ts

@@ -1,66 +1,111 @@
-import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
-import type { RequestServiceError, CustomSuccessRequestResult, CustomFailRequestResult } from '@/interface';
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import type { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { useLoading, useBoolean } from '@/hooks';
 import CustomAxiosInstance from './instance';
 
-/**
- * 封装各个请求方法及结果处理的类
- * @author Soybean<honghuangdc@gmail.com>
- */
-export class Request {
-  instance: AxiosInstance;
+type RequestMethod = 'get' | 'post' | 'put' | 'delete';
 
-  constructor(instance: AxiosInstance) {
-    this.instance = instance;
-  }
+type RequestResultHook<T = any> = {
+  data: Ref<T | null>;
+  error: Ref<Service.RequestError | null>;
+  loading: Ref<boolean>;
+  network: Ref<boolean>;
+};
 
-  static successHandler<ResponseData>(response: AxiosResponse) {
-    const successResult: CustomSuccessRequestResult<ResponseData> = {
-      data: response as unknown as ResponseData,
-      error: null
-    };
-
-    return successResult;
-  }
-
-  static failHandler(error: RequestServiceError) {
-    const failResult: CustomFailRequestResult = {
-      data: null,
-      error
-    };
-
-    return failResult;
-  }
-
-  get<ResponseData>(url: string, config?: AxiosRequestConfig) {
-    return this.instance
-      .get(url, config)
-      .then(res => Request.successHandler<ResponseData>(res))
-      .catch(Request.failHandler);
-  }
-
-  post<ResponseData>(url: string, data?: any, config?: AxiosRequestConfig) {
-    return this.instance
-      .post(url, data, config)
-      .then(res => Request.successHandler<ResponseData>(res))
-      .catch(Request.failHandler);
-  }
-
-  put<ResponseData>(url: string, data?: any, config?: AxiosRequestConfig) {
-    return this.instance
-      .put(url, data, config)
-      .then(res => Request.successHandler<ResponseData>(res))
-      .catch(Request.failHandler);
-  }
-
-  delete<ResponseData>(url: string, config?: AxiosRequestConfig) {
-    return this.instance
-      .delete(url, config)
-      .then(res => Request.successHandler<ResponseData>(res))
-      .catch(Request.failHandler);
-  }
+interface RequestParam {
+  url: string;
+  method?: RequestMethod;
+  data?: any;
+  axiosConfig?: AxiosRequestConfig;
 }
 
 export function createRequest(axiosConfig: AxiosRequestConfig) {
   const customInstance = new CustomAxiosInstance(axiosConfig);
-  return new Request(customInstance.instance);
+
+  /**
+   * hooks请求
+   * @param param - 请求参数
+   * - url: 请求地址
+   * - method: 请求方法(默认get)
+   * - data: 请求的body的data
+   * - axiosConfig: axios配置
+   * @param hookMode - 是否启用hook写法
+   */
+  function request<T = any>(param: RequestParam, hookMode: true): RequestResultHook<T>;
+  function request<T = any>(param: RequestParam, hookMode: false): Promise<Service.RequestResult<T>>;
+  function request<T = any>(
+    param: RequestParam,
+    hookMode: boolean
+  ): RequestResultHook<T> | Promise<Service.RequestResult<T>> {
+    const { url } = param;
+    const method = param.method || 'get';
+    const { instance } = customInstance;
+    if (hookMode) {
+      return useRequest(instance, method, url, param.data, param.axiosConfig);
+    }
+    return asyncRequest(instance, method, url, param.data, param.axiosConfig);
+  }
+
+  return request;
+}
+
+function useRequest<T = any>(
+  instance: AxiosInstance,
+  method: RequestMethod,
+  url: string,
+  bodyData?: any,
+  config?: AxiosRequestConfig
+): RequestResultHook<T> {
+  const { loading, startLoading, endLoading } = useLoading();
+  const { bool: network, setBool: setNetwork } = useBoolean(window.navigator.onLine);
+
+  startLoading();
+  const data = ref<T | null>(null) as Ref<T | null>;
+  const error = ref<Service.RequestError | null>(null);
+
+  function handleRequestResult(response: any) {
+    const res = response as Service.RequestResult<T>;
+    data.value = res.data;
+    error.value = res.error;
+    endLoading();
+    setNetwork(window.navigator.onLine);
+  }
+
+  getRequestResponse(instance, method, url, bodyData, config).then(handleRequestResult);
+
+  return {
+    data,
+    error,
+    loading,
+    network
+  };
+}
+
+async function asyncRequest<T = any>(
+  instance: AxiosInstance,
+  method: RequestMethod,
+  url: string,
+  bodyData?: any,
+  config?: AxiosRequestConfig
+): Promise<Service.RequestResult<T>> {
+  const res = (await getRequestResponse(instance, method, url, bodyData, config)) as Service.RequestResult<T>;
+
+  return res;
+}
+
+async function getRequestResponse(
+  instance: AxiosInstance,
+  method: RequestMethod,
+  url: string,
+  data?: any,
+  config?: AxiosRequestConfig
+) {
+  let res: any;
+  if (method === 'get' || method === 'delete') {
+    res = await instance[method](url, config);
+  } else {
+    res = await instance[method](url, data, config);
+  }
+  return res;
 }