refactor(projects): 请求函数重构初步

src/hooks/common/useBoolean.ts

@@ -3,20 +3,22 @@ import { ref } from 'vue';
 export default function useBoolean(initValue: boolean = false) {
   const bool = ref(initValue);
 
+  function setBool(value: boolean) {
+    bool.value = value;
+  }
   function setTrue() {
-    bool.value = true;
+    setBool(true);
   }
-
   function setFalse() {
-    bool.value = false;
+    setBool(false);
   }
-
   function toggle() {
-    bool.value = !bool.value;
+    setBool(!bool.value);
   }
 
   return {
     bool,
+    setBool,
     setTrue,
     setFalse,
     toggle

src/service/api/auth.ts

@@ -0,0 +1 @@
+export {};

src/service/api/index.ts

@@ -0,0 +1 @@
+export * from './auth';

src/service/index.ts

@@ -0,0 +1 @@
+export * from './api';

src/service/middleware/auth.ts

@@ -0,0 +1 @@
+export function handleResponse() {}

src/service/middleware/index.ts

@@ -0,0 +1 @@
+export * from './auth';

src/service/request/axios/index.ts

@@ -0,0 +1,8 @@
+import type { AxiosRequestConfig } from 'axios';
+import CustomAxiosInstance from './instance';
+import Request from './request';
+
+export function createRequest(axiosConfig: AxiosRequestConfig) {
+  const customInstance = new CustomAxiosInstance(axiosConfig);
+  return new Request(customInstance.instance);
+}

src/service/request/instance.ts → src/service/request/axios/instance.ts

@@ -1,9 +1,7 @@
 import axios from 'axios';
-import qs from 'qs';
-import type { AxiosRequestConfig, AxiosInstance } from 'axios';
-import { ContentType } from '@/enum';
+import type { AxiosRequestConfig, AxiosInstance, CancelTokenStatic } from 'axios';
 import { getToken } from '@/utils';
-import { transformFile, errorHandler } from '../utils';
+import { transformRequestData, handleResponseError } from '../helpers';
 
 export interface StatusConfig {
   /** 表明请求状态的属性key */
@@ -16,54 +14,47 @@ export interface StatusConfig {
 
 /**
  * 封装axios请求类
- * @author Soybean(曹理斌) 2021-03-13
- * @class CustomAxiosInstance
+ * @author Soybean<honghuangdc@gmail.com> 2021-03-13
  */
 export default class CustomAxiosInstance {
   instance: AxiosInstance;
 
-  constructor(
-    axiosConfig: AxiosRequestConfig,
-    statusConfig: StatusConfig = {
-      statusKey: 'code',
-      msgKey: 'message',
-      successCode: 200
-    }
-  ) {
+  cancelToken: CancelTokenStatic;
+
+  private statusConfig: StatusConfig = {
+    statusKey: 'code',
+    msgKey: 'message',
+    successCode: 200
+  };
+
+  constructor(axiosConfig: AxiosRequestConfig) {
     this.instance = axios.create(axiosConfig);
-    this.setInterceptor(statusConfig);
+    this.cancelToken = axios.CancelToken;
+    this.setInterceptor();
   }
 
   /** 设置请求拦截器 */
-  setInterceptor(statusConfig: StatusConfig): void {
+  setInterceptor(): void {
     this.instance.interceptors.request.use(
       async config => {
         const handleConfig = { ...config };
         if (handleConfig.headers) {
-          // form类型转换
-          if (handleConfig.headers['Content-Type'] === ContentType.formUrlencoded) {
-            handleConfig.data = qs.stringify(handleConfig.data);
-          }
-          // 文件类型转换
-          if (handleConfig?.headers['Content-Type'] === ContentType.formData) {
-            const key = Object.keys(handleConfig.data)[0];
-            const file = handleConfig.data[key];
-            handleConfig.data = await transformFile(file, key);
-          }
+          // 数据转换
+          handleConfig.data = await transformRequestData(handleConfig.data, handleConfig.headers['Content-Type']);
           // 设置token
           handleConfig.headers.Authorization = getToken();
         }
         return handleConfig;
       },
       error => {
-        errorHandler(error);
+        handleResponseError(error);
         return Promise.reject(error);
       }
     );
     this.instance.interceptors.response.use(
       response => {
         const { status, data } = response;
-        const { statusKey, msgKey, successCode } = statusConfig;
+        const { statusKey, msgKey, successCode } = this.statusConfig;
         if (status === 200 || status < 300 || status === 304) {
           const responseData = data as any;
           if (responseData[statusKey] === successCode) {
@@ -73,11 +64,11 @@ export default class CustomAxiosInstance {
           return Promise.reject(responseData[msgKey]);
         }
         const error = { response };
-        errorHandler(error);
+        handleResponseError(error);
         return Promise.reject(error);
       },
       error => {
-        errorHandler(error);
+        handleResponseError(error);
         return Promise.reject(error);
       }
     );

src/service/request/request.ts → src/service/request/axios/request.ts

@@ -1,6 +1,4 @@
 import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios';
-import CustomAxiosInstance from './instance';
-import type { StatusConfig } from './instance';
 
 type ResponseSuccess = [null, any];
 type ResponseFail = [any, null];
@@ -10,7 +8,7 @@ type ResponseFail = [any, null];
  * @author Soybean<honghuangdc@gmail.com> 2021-03-15
  * @class Request
  */
-class Request {
+export default class Request {
   instance: AxiosInstance;
 
   constructor(instance: AxiosInstance) {
@@ -44,8 +42,37 @@ class Request {
   }
 }
 
-export function createRequest(axiosConfig: AxiosRequestConfig, statusConfig?: StatusConfig) {
-  const customInstance = new CustomAxiosInstance(axiosConfig, statusConfig);
-  const request = new Request(customInstance.instance);
-  return request;
-}
+// import type { AxiosRequestConfig, AxiosInstance } from 'axios';
+// import { useBoolean } from '@/hooks';
+
+// type RequestMethod = 'get' | 'post' | 'put' | 'delete';
+
+// interface RequestParam<ResponseData> {
+//   /** axios实例 */
+//   instance: AxiosInstance;
+//   /** 请求地址 */
+//   url: string;
+//   /** 请求方法 */
+//   method?: RequestMethod;
+//   /** axios请求配置 */
+//   axiosConfig?: AxiosRequestConfig;
+//   /** 请求结果的数据判断是否为空的函数 */
+//   responseDataEmptyFunc?: (data: ResponseData) => boolean;
+//   /** 全局请求错误时是否弹出消息 */
+//   showErrorMsg?: boolean;
+// }
+
+// /**
+//  * 请求函数hooks
+//  * @param requestParam - 请求函数的参数
+//  * @param url - 请求地址
+//  * @param axiosConfig
+//  */
+// export default function useRequest<ResponseData>(requestParam: RequestParam<ResponseData>) {
+//   /** 网络状况 */
+//   const { bool: networkStatus, setBool: setNetworkStatus } = useBoolean(window.navigator.onLine);
+//   /** 是否正在请求 */
+//   const { bool: isFetching, setBool: setIsFetching } = useBoolean();
+//   /** 响应的结果数据是否为空 */
+//   const { bool: isEmpty, setBool: setIsEmpty } = useBoolean();
+// }

src/service/request/helpers/error.ts

@@ -0,0 +1,50 @@
+const ERROR_STATUS = {
+  400: '400: 请求出现语法错误',
+  401: '401: 用户未授权~',
+  403: '403: 服务器拒绝访问~',
+  404: '404: 请求的资源不存在~',
+  405: '405: 请求方法未允许~',
+  408: '408: 网络请求超时~',
+  500: '500: 服务器内部错误~',
+  501: '501: 服务器未实现请求功能~',
+  502: '502: 错误网关~',
+  503: '503: 服务不可用~',
+  504: '504: 网关超时~',
+  505: '505: http版本不支持该请求~'
+};
+
+type ErrorStatus = keyof typeof ERROR_STATUS;
+
+type ErrorMsg = [boolean, string];
+/**
+ * 获取请求失败的错误
+ * @param error
+ */
+export function getFailRequestErrorMsg(error: any) {
+  const errorAction: ErrorMsg[] = [
+    [!window.navigator.onLine || error.message === 'Network Error', '网络不可用~'],
+    [error.code === 'ECONNABORTED' && error.message.includes('timeout'), '网络连接超时~'],
+    [error.response, ERROR_STATUS[error.response.status as ErrorStatus]]
+  ];
+  let errorMsg = '请求错误~';
+  errorAction.some(item => {
+    const [flag, msg] = item;
+    if (flag) {
+      errorMsg = msg;
+    }
+    return flag;
+  });
+  return errorMsg;
+}
+
+/**
+ * 处理请求失败的错误
+ * @param error - 错误
+ */
+export function handleResponseError(error: any) {
+  const { $message: Message } = window;
+
+  const msg = getFailRequestErrorMsg(error);
+
+  Message?.error(msg);
+}

src/service/request/helpers/handler.ts

@@ -0,0 +1,16 @@
+// type ResultHandler<T> = (...arg: any) => T;
+// type SuccessRequest<T> = {
+//   error: null;
+//   data: T;
+// };
+// type FailRequest = {
+//   error: any;
+//   data: null;
+// };
+// type RequestResult<T> = SuccessRequest<T> | FailRequest;
+// /**
+//  * 对请求的结果数据进行格式化的处理
+//  * @param handleFunc - 处理函数
+//  * @param requests - 请求结果
+//  */
+// export function handleResponse<ResponseData>(resultHandler: ResultHandler<ResponseData>, requests: RequestResult[]) {}

src/service/request/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './transform';
+export * from './error';

src/service/request/helpers/transform.ts

@@ -0,0 +1,40 @@
+import qs from 'qs';
+import FormData from 'form-data';
+import { isArray } from '@/utils';
+import { ContentType } from '@/enum';
+
+export async function transformRequestData(requestData: any, contentType?: string) {
+  // application/json类型不处理
+  let data = requestData;
+  // form类型转换
+  if (contentType === ContentType.formUrlencoded) {
+    data = qs.stringify(requestData);
+  }
+  // form-data类型转换
+  if (contentType === ContentType.formData) {
+    const key = Object.keys(requestData)[0];
+    const file = requestData.data[key];
+    data = await transformFile(file, key);
+  }
+  return data;
+}
+
+/**
+ * 接口为上传文件的类型时数据转换
+ * @param file - 单文件或多文件
+ * @param key - 文件的属性名
+ */
+async function transformFile(file: File[] | File, key: string) {
+  const formData = new FormData();
+  if (isArray(file)) {
+    await Promise.all(
+      (file as File[]).map(item => {
+        formData.append(key, item);
+        return true;
+      })
+    );
+  } else {
+    await formData.append(key, file);
+  }
+  return formData;
+}

src/service/request/index.ts

@@ -1,4 +1,4 @@
-import { createRequest } from './request';
+import { createRequest } from './axios';
 
 export const adminRequest = createRequest({
   baseURL: import.meta.env.VITE_HTTP_URL_EMOSS_ADMIN as string