feat: add pure-admin-thin

src/utils/http/config.ts

@@ -0,0 +1,32 @@
+import { AxiosRequestConfig } from "axios";
+import { excludeProps } from "./utils";
+/**
+ * 默认配置
+ */
+export const defaultConfig: AxiosRequestConfig = {
+  baseURL: "",
+  //10秒超时
+  timeout: 10000,
+  headers: {
+    Accept: "application/json, text/plain, */*",
+    "Content-Type": "application/json",
+    "X-Requested-With": "XMLHttpRequest"
+  }
+};
+
+export function genConfig(config?: AxiosRequestConfig): AxiosRequestConfig {
+  if (!config) {
+    return defaultConfig;
+  }
+
+  const { headers } = config;
+  if (headers && typeof headers === "object") {
+    defaultConfig.headers = {
+      ...defaultConfig.headers,
+      ...headers
+    };
+  }
+  return { ...excludeProps(config!, "headers"), ...defaultConfig };
+}
+
+export const METHODS = ["post", "get", "put", "delete", "option", "patch"];

src/utils/http/core.ts

@@ -0,0 +1,248 @@
+import Axios, {
+  AxiosRequestConfig,
+  CancelTokenStatic,
+  AxiosInstance
+} from "axios";
+
+import NProgress from "../progress";
+
+import { genConfig } from "./config";
+
+import { transformConfigByMethod } from "./utils";
+
+import {
+  cancelTokenType,
+  RequestMethods,
+  EnclosureHttpRequestConfig,
+  EnclosureHttpResoponse,
+  EnclosureHttpError
+} from "./types.d";
+
+class EnclosureHttp {
+  constructor() {
+    this.httpInterceptorsRequest();
+    this.httpInterceptorsResponse();
+  }
+  // 初始化配置对象
+  private static initConfig: EnclosureHttpRequestConfig = {};
+
+  // 保存当前Axios实例对象
+  private static axiosInstance: AxiosInstance = Axios.create(genConfig());
+
+  // 保存 EnclosureHttp实例
+  private static EnclosureHttpInstance: EnclosureHttp;
+
+  // axios取消对象
+  private CancelToken: CancelTokenStatic = Axios.CancelToken;
+
+  // 取消的凭证数组
+  private sourceTokenList: Array<cancelTokenType> = [];
+
+  // 记录当前这一次cancelToken的key
+  private currentCancelTokenKey = "";
+
+  private beforeRequestCallback: EnclosureHttpRequestConfig["beforeRequestCallback"] =
+    undefined;
+
+  private beforeResponseCallback: EnclosureHttpRequestConfig["beforeResponseCallback"] =
+    undefined;
+
+  public get cancelTokenList(): Array<cancelTokenType> {
+    return this.sourceTokenList;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  public set cancelTokenList(value) {
+    throw new Error("cancelTokenList不允许赋值");
+  }
+
+  /**
+   * @description 私有构造不允许实例化
+   * @returns void 0
+   */
+  // constructor() {}
+
+  /**
+   * @description 生成唯一取消key
+   * @param config axios配置
+   * @returns string
+   */
+  // eslint-disable-next-line class-methods-use-this
+  private static genUniqueKey(config: EnclosureHttpRequestConfig): string {
+    return `${config.url}--${JSON.stringify(config.data)}`;
+  }
+
+  /**
+   * @description 取消重复请求
+   * @returns void 0
+   */
+  private cancelRepeatRequest(): void {
+    const temp: { [key: string]: boolean } = {};
+
+    this.sourceTokenList = this.sourceTokenList.reduce<Array<cancelTokenType>>(
+      (res: Array<cancelTokenType>, cancelToken: cancelTokenType) => {
+        const { cancelKey, cancelExecutor } = cancelToken;
+        if (!temp[cancelKey]) {
+          temp[cancelKey] = true;
+          res.push(cancelToken);
+        } else {
+          cancelExecutor();
+        }
+        return res;
+      },
+      []
+    );
+  }
+
+  /**
+   * @description 删除指定的CancelToken
+   * @returns void 0
+   */
+  private deleteCancelTokenByCancelKey(cancelKey: string): void {
+    this.sourceTokenList =
+      this.sourceTokenList.length < 1
+        ? this.sourceTokenList.filter(
+            cancelToken => cancelToken.cancelKey !== cancelKey
+          )
+        : [];
+  }
+
+  /**
+   * @description 拦截请求
+   * @returns void 0
+   */
+
+  private httpInterceptorsRequest(): void {
+    EnclosureHttp.axiosInstance.interceptors.request.use(
+      (config: EnclosureHttpRequestConfig) => {
+        const $config = config;
+        NProgress.start(); // 每次切换页面时，调用进度条
+        const cancelKey = EnclosureHttp.genUniqueKey($config);
+        $config.cancelToken = new this.CancelToken(
+          (cancelExecutor: (cancel: any) => void) => {
+            this.sourceTokenList.push({ cancelKey, cancelExecutor });
+          }
+        );
+        this.cancelRepeatRequest();
+        this.currentCancelTokenKey = cancelKey;
+        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        if (typeof this.beforeRequestCallback === "function") {
+          this.beforeRequestCallback($config);
+          this.beforeRequestCallback = undefined;
+          return $config;
+        }
+        if (EnclosureHttp.initConfig.beforeRequestCallback) {
+          EnclosureHttp.initConfig.beforeRequestCallback($config);
+          return $config;
+        }
+        return $config;
+      },
+      error => {
+        return Promise.reject(error);
+      }
+    );
+  }
+
+  /**
+   * @description 清空当前cancelTokenList
+   * @returns void 0
+   */
+  public clearCancelTokenList(): void {
+    this.sourceTokenList.length = 0;
+  }
+
+  /**
+   * @description 拦截响应
+   * @returns void 0
+   */
+  private httpInterceptorsResponse(): void {
+    const instance = EnclosureHttp.axiosInstance;
+    instance.interceptors.response.use(
+      (response: EnclosureHttpResoponse) => {
+        // 请求每次成功一次就删除当前canceltoken标记
+        const cancelKey = EnclosureHttp.genUniqueKey(response.config);
+        this.deleteCancelTokenByCancelKey(cancelKey);
+        // 优先判断post/get等方法是否传入回掉，否则执行初始化设置等回掉
+        if (typeof this.beforeResponseCallback === "function") {
+          this.beforeResponseCallback(response);
+          this.beforeResponseCallback = undefined;
+          return response.data;
+        }
+        if (EnclosureHttp.initConfig.beforeResponseCallback) {
+          EnclosureHttp.initConfig.beforeResponseCallback(response);
+          return response.data;
+        }
+        NProgress.done();
+        return response.data;
+      },
+      (error: EnclosureHttpError) => {
+        const $error = error;
+        // 判断当前的请求中是否在 取消token数组理存在，如果存在则移除（单次请求流程）
+        if (this.currentCancelTokenKey) {
+          const haskey = this.sourceTokenList.filter(
+            cancelToken => cancelToken.cancelKey === this.currentCancelTokenKey
+          ).length;
+          if (haskey) {
+            this.sourceTokenList = this.sourceTokenList.filter(
+              cancelToken =>
+                cancelToken.cancelKey !== this.currentCancelTokenKey
+            );
+            this.currentCancelTokenKey = "";
+          }
+        }
+        $error.isCancelRequest = Axios.isCancel($error);
+        NProgress.done();
+        // 所有的响应异常 区分来源为取消请求/非取消请求
+        return Promise.reject($error);
+      }
+    );
+  }
+
+  public request<T>(
+    method: RequestMethods,
+    url: string,
+    param?: AxiosRequestConfig,
+    axiosConfig?: EnclosureHttpRequestConfig
+  ): Promise<T> {
+    const config = transformConfigByMethod(param, {
+      method,
+      url,
+      ...axiosConfig
+    } as EnclosureHttpRequestConfig);
+    // 单独处理自定义请求/响应回掉
+    if (axiosConfig?.beforeRequestCallback) {
+      this.beforeRequestCallback = axiosConfig.beforeRequestCallback;
+    }
+    if (axiosConfig?.beforeResponseCallback) {
+      this.beforeResponseCallback = axiosConfig.beforeResponseCallback;
+    }
+    return new Promise((resolve, reject) => {
+      EnclosureHttp.axiosInstance
+        .request(config)
+        .then((response: undefined) => {
+          resolve(response);
+        })
+        .catch((error: any) => {
+          reject(error);
+        });
+    });
+  }
+
+  public post<T>(
+    url: string,
+    params?: T,
+    config?: EnclosureHttpRequestConfig
+  ): Promise<T> {
+    return this.request<T>("post", url, params, config);
+  }
+
+  public get<T>(
+    url: string,
+    params?: T,
+    config?: EnclosureHttpRequestConfig
+  ): Promise<T> {
+    return this.request<T>("get", url, params, config);
+  }
+}
+
+export default EnclosureHttp;

src/utils/http/index.ts

@@ -0,0 +1,2 @@
+import EnclosureHttp from "./core";
+export const http = new EnclosureHttp();

src/utils/http/types.d.ts

@@ -0,0 +1,50 @@
+import Axios, {
+  AxiosRequestConfig,
+  Canceler,
+  AxiosResponse,
+  Method,
+  AxiosError
+} from "axios";
+
+import { METHODS } from "./config";
+
+export type cancelTokenType = { cancelKey: string; cancelExecutor: Canceler };
+
+export type RequestMethods = Extract<
+  Method,
+  "get" | "post" | "put" | "delete" | "patch" | "option" | "head"
+>;
+
+export interface EnclosureHttpRequestConfig extends AxiosRequestConfig {
+  beforeRequestCallback?: (request: EnclosureHttpRequestConfig) => void; // 请求发送之前
+  beforeResponseCallback?: (response: EnclosureHttpResoponse) => void; // 相应返回之前
+}
+
+export interface EnclosureHttpResoponse extends AxiosResponse {
+  config: EnclosureHttpRequestConfig;
+}
+
+export interface EnclosureHttpError extends AxiosError {
+  isCancelRequest?: boolean;
+}
+
+export default class EnclosureHttp {
+  cancelTokenList: Array<cancelTokenType>;
+  clearCancelTokenList(): void;
+  request<T>(
+    method: RequestMethods,
+    url: string,
+    param?: AxiosRequestConfig,
+    axiosConfig?: EnclosureHttpRequestConfig
+  ): Promise<T>;
+  post<T>(
+    url: string,
+    params?: T,
+    config?: EnclosureHttpRequestConfig
+  ): Promise<T>;
+  get<T>(
+    url: string,
+    params?: T,
+    config?: EnclosureHttpRequestConfig
+  ): Promise<T>;
+}

src/utils/http/utils.ts

@@ -0,0 +1,29 @@
+import { EnclosureHttpRequestConfig } from "./types.d";
+
+export function excludeProps<T extends { [key: string]: any }>(
+  origin: T,
+  prop: string
+): { [key: string]: T } {
+  return Object.keys(origin)
+    .filter(key => !prop.includes(key))
+    .reduce((res, key) => {
+      res[key] = origin[key];
+      return res;
+    }, {} as { [key: string]: T });
+}
+
+export function transformConfigByMethod(
+  params: any,
+  config: EnclosureHttpRequestConfig
+): EnclosureHttpRequestConfig {
+  const { method } = config;
+  const props = ["delete", "get", "head", "options"].includes(
+    method!.toLocaleLowerCase()
+  )
+    ? "params"
+    : "data";
+  return {
+    ...config,
+    [props]: params
+  };
+}