refactor(projects): refactor code organization

Author: soybeanfe

src/index.ts

@@ -1,41 +1,41 @@
 import axios from 'axios';
 import type { AxiosRequestConfig, AxiosInstance } from 'axios';
 import {
-  CONTENT_TYPE,
+  createDefaultRequestConfig,
+  getRequestHeaderContentType,
   transformRequestData,
   isHttpSuccess,
   handleAxiosError,
   handleHttpError,
   handleBackendError
 } from './shared';
-import type { ContentTypeValue } from './shared';
-import type { RequestConfig } from './types';
+import type { RequestConfig, RequiredRequestConfig } from './types';
 
 class Request {
   axiosInstance: AxiosInstance;
 
-  requestConfig: RequestConfig;
+  requestConfig: RequiredRequestConfig;
 
-  constructor(axiosConfig: AxiosRequestConfig, requestConfig: RequestConfig) {
+  constructor(axiosConfig: AxiosRequestConfig, requestConfig?: RequestConfig) {
     this.axiosInstance = axios.create(axiosConfig);
     this.setInterceptor();
 
-    this.requestConfig = requestConfig;
+    this.requestConfig = createDefaultRequestConfig(requestConfig);
   }
 
   /** 设置请求拦截器 */
   setInterceptor() {
     this.axiosInstance.interceptors.request.use(
       async config => {
-        const conf = { ...config };
+        const conf: AxiosRequestConfig = { ...config };
 
-        if (conf.headers) {
-          // 数据转换
-          const contentType = (conf.headers['Content-Type'] || CONTENT_TYPE.json) as ContentTypeValue;
-          conf.data = await transformRequestData(config.data, contentType);
-        }
+        const contentType = getRequestHeaderContentType(conf);
+
+        conf.data = await transformRequestData(config.data, contentType);
+
+        const handledConf = await this.requestConfig.onRequest(conf);
 
-        Object.assign(conf, this.requestConfig.onRequest(conf));
+        Object.assign(conf, handledConf);
 
         return conf;
       },
@@ -68,21 +68,15 @@ class Request {
   }
 }
 
-export function createRequest(axiosConfig: AxiosRequestConfig, requestConfig?: Partial<RequestConfig>) {
-  const configs: RequestConfig = {
-    codeKey: 'code',
-    dataKey: 'data',
-    msgKey: 'message',
-    successCode: 200,
-    onRequest: config => config,
-    onBackendSuccess: responseData => {
-      const { codeKey, successCode } = configs;
-      return responseData[codeKey] === successCode;
-    }
-  };
-  Object.assign(configs, requestConfig);
-
-  const request = new Request(axiosConfig, configs);
+/**
+ * 创建请求
+ * @param axiosConfig axios配置
+ * @param requestConfig 请求配置
+ * @param isRaw 是否返回原始的axios实例, (默认返回自定义的请求实例)
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function createRequest(axiosConfig: AxiosRequestConfig, requestConfig?: RequestConfig, isRaw = false) {
+  const request = new Request(axiosConfig, requestConfig);
 
   return request.axiosInstance;
 }

src/shared/common.ts

@@ -1,3 +1,35 @@
+import type { AxiosRequestConfig, AxiosInstance } from 'axios';
+import { CONTENT_TYPE, type ContentTypeValue } from './constant';
+import type { RequestConfig, RequiredRequestConfig } from '../types';
+
+export function createDefaultRequestConfig(requestConfig?: RequestConfig) {
+  const configs: RequiredRequestConfig = {
+    codeKey: 'code',
+    dataKey: 'data',
+    msgKey: 'message',
+    onRequest: async config => config,
+    onBackendSuccess: responseData => {
+      const BACKEND_SUCCESS_CODE = 200;
+      const { codeKey } = configs;
+      return responseData[codeKey] === BACKEND_SUCCESS_CODE;
+    },
+    onBackendFail: async () => {},
+    onError: async ({ error }) => {
+      window.console.log(`code: ${error.code}, msg: ${error.msg}`);
+    }
+  };
+
+  Object.assign(configs, requestConfig);
+
+  return configs;
+}
+
+export function getRequestHeaderContentType(config: AxiosRequestConfig) {
+  const contentType = (config?.headers?.['Content-Type'] || CONTENT_TYPE.json) as ContentTypeValue;
+
+  return contentType;
+}
+
 /**
  * http是否请求成功
  * @param status http状态码
@@ -6,3 +38,6 @@ export function isHttpSuccess(status: number) {
   const isSuccessCode = status >= 200 && status < 300;
   return isSuccessCode || status === 304;
 }
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function getCustomRequestInstance(instance: AxiosInstance) {}

src/shared/constant.ts

@@ -33,6 +33,8 @@ export const NETWORK_ERROR_CODE = 'NETWORK_ERROR';
 /** 网络不可用的错误文本 */
 export const NETWORK_ERROR_MSG = '网络不可用~';
 
+export const BLANK_AXIOS_ERROR_CODE = '';
+
 /** 请求不成功各种状态的错误 */
 export const ERROR_STATUS = {
   400: '400: 请求出现语法错误~',

src/shared/error.ts

@@ -1,61 +1,16 @@
-import type { AxiosError, AxiosResponse } from 'axios';
+import type { AxiosResponse } from 'axios';
 import {
   DEFAULT_REQUEST_ERROR_CODE,
   DEFAULT_REQUEST_ERROR_MSG,
   NETWORK_ERROR_CODE,
   NETWORK_ERROR_MSG,
   REQUEST_TIMEOUT_CODE,
   REQUEST_TIMEOUT_MSG,
+  BLANK_AXIOS_ERROR_CODE,
   ERROR_STATUS
 } from './constant';
 import type { ErrorStatus } from './constant';
-import type { RequestConfig } from '../types';
-
-/**
- * 请求的错误类型：
- * - axios: axios错误：网络错误, 请求超时, 默认的兜底错误
- * - http: 请求成功，响应的http状态码非200的错误
- * - backend: 请求成功，响应的http状态码为200，由后端定义的业务错误
- */
-export type RequestErrorType = 'axios' | 'http' | 'backend';
-
-type AxiosErrorCode =
-  | 'ERR_FR_TOO_MANY_REDIRECTS'
-  | 'ERR_BAD_OPTION_VALUE'
-  | 'ERR_BAD_OPTION'
-  | 'ERR_NETWORK'
-  | 'ERR_DEPRECATED'
-  | 'ERR_BAD_RESPONSE'
-  | 'ERR_BAD_REQUEST'
-  | 'ERR_NOT_SUPPORT'
-  | 'ERR_INVALID_URL'
-  | 'ERR_CANCELED'
-  | 'ECONNABORTED'
-  | 'ETIMEDOUT';
-
-const BLANK_AXIOS_ERROR_CODE = '';
-
-type RawError<T, D> = Pick<AxiosError<T, D>, 'message' | 'config' | 'response'> & {
-  code: AxiosErrorCode | typeof BLANK_AXIOS_ERROR_CODE;
-  request: XMLHttpRequest;
-};
-
-interface CustomError {
-  /** 请求服务的错误类型 */
-  type: RequestErrorType;
-  /** 错误码 */
-  code: string | number;
-  /** 错误信息 */
-  msg: string;
-}
-
-/** 请求错误 */
-interface RequestError<T, D> {
-  /** 自定义的错误 */
-  error: CustomError;
-  /** 原始请求错误 */
-  rawError: RawError<T, D>;
-}
+import type { CustomError, RawError, RequestError, RequestConfig } from '../types';
 
 function updateCustomError(error: CustomError, update: Partial<CustomError>) {
   Object.assign(error, update);

src/shared/transform.ts

@@ -1,5 +1,6 @@
 import qs from 'qs';
 import FormData from 'form-data';
+import { isArray, isFile } from './typeof';
 import { CONTENT_TYPE } from './constant';
 import type { ContentTypeValue } from './constant';
 
@@ -59,12 +60,6 @@ async function transformFile(formData: FormData, key: string, file: File[] | Fil
   }
 }
 
-function isArray<T extends any[]>(value: T | unknown): value is T {
-  return Object.prototype.toString.call(value) === '[object Array]';
-}
-function isFile<T extends File>(value: T | unknown): value is T {
-  return Object.prototype.toString.call(value) === '[object File]';
-}
 function isFileArray<T extends File[]>(value: T | unknown): value is T {
   return isArray(value) && value.length > 0 && isFile(value[0]);
 }

src/shared/typeof.ts

@@ -0,0 +1,23 @@
+export function isObject<T extends Record<string, unknown>>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Object]';
+}
+
+export function isArray<T extends any[]>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Array]';
+}
+
+export function isFile<T extends File>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object File]';
+}
+
+export function isBlob<T extends Blob>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object Blob]';
+}
+
+export function isArrayBuffer<T extends ArrayBuffer>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object ArrayBuffer]';
+}
+
+export function isArrayBufferView<T extends ArrayBufferView>(value: T | unknown): value is T {
+  return Object.prototype.toString.call(value) === '[object ArrayBufferView]';
+}

src/types/index.ts

@@ -56,23 +56,44 @@ export interface RequestConfig {
   dataKey: string;
   /** 表示后端消息的属性字段 */
   msgKey: string;
-  /** 后端业务上定义的成功请求的状态 */
-  successCode: number | string;
   /**
    * 请求前的钩子函数
    * @param config 请求配置
    * @example 可以对请求头进行操作，如设置Token
    */
-  onRequest(config: AxiosRequestConfig): AxiosRequestConfig;
+  onRequest?: (config: AxiosRequestConfig) => Promise<AxiosRequestConfig>;
   /**
    * http请求成功情况下，后端业务上表示请求成功的处理
    * @param responseData 请求后的数据 (response.data)
    */
-  onBackendSuccess(responseData: any): boolean;
+  onBackendSuccess?: (responseData: any) => boolean;
   /**
    * http请求成功情况下, 后端业务上表示请求失败的处理
    * @param response axios的相响应
    * @param axiosInstance axios实例
    */
-  onBackendFail?(response: AxiosResponse, axiosInstance: AxiosInstance): Promise<AxiosResponse | void>;
+  onBackendFail?: (response: AxiosResponse, axiosInstance: AxiosInstance) => Promise<AxiosResponse | void>;
+  /** 请求失败情况下，对错误进行处理，例如：进行错误信息展示 */
+  onError?: <T, D>(error: RequestError<T, D>) => Promise<void>;
 }
+
+export type RequiredRequestConfig = Required<RequestConfig>;
+
+/** 自定义的请求成功结果 */
+export interface SuccessResponse<T> {
+  /** 请求错误 */
+  error: null;
+  /** 请求数据 */
+  data: T;
+}
+
+/** 自定义的请求失败结果 */
+export interface FailedResponse<T> {
+  /** 请求错误 */
+  error: RequestError<T, any>;
+  /** 请求数据 */
+  data: null;
+}
+
+/** 自定义的请求结果 */
+export type CustomResponse<T> = SuccessResponse<T> | FailedResponse<T>;