项目初始化，封装Axios请求

src/App.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view/>
+</template>

src/api/index.ts

@@ -0,0 +1,3 @@
+import EnclosureHttp from "./utils/core";
+
+export default EnclosureHttp;

src/api/utils/config.ts

@@ -0,0 +1,29 @@
+import { AxiosRequestConfig } from "axios";
+import { excludeProps } from "./utils";
+/**
+ * 默认配置
+ */
+export const defaultConfig: AxiosRequestConfig = {
+  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/api/utils/core.ts

@@ -0,0 +1,267 @@
+import Axios, {
+  AxiosRequestConfig,
+  CancelTokenStatic,
+  AxiosInstance,
+  Canceler
+} from "axios";
+
+import { genConfig } from "./config";
+
+import { transformConfigByMethod } from "./utils";
+
+import {
+  cancelTokenType,
+  RequestMethods,
+  EnclosureHttpRequestConfig,
+  EnclosureHttpResoponse,
+  EnclosureHttpError
+} from "./types.d";
+
+class EnclosureHttp {
+  // 初始化配置对象
+  private static initConfig: EnclosureHttpRequestConfig = {};
+
+  // 保存当前Axios实例对象
+  private static axiosInstance: AxiosInstance;
+
+  // 保存 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 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;
+
+        const cancelKey = this.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 = this.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;
+        }
+
+        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);
+        // 所有的响应异常 区分来源为取消请求/非取消请求
+        return Promise.reject($error);
+      }
+    );
+  }
+
+  /**
+   * @description 获取唯一实例
+   * @returns EnclosureHttp实例
+   */
+  static getInstance(): EnclosureHttp {
+    if (!this.EnclosureHttpInstance) {
+      this.axiosInstance = Axios.create(this.initConfig);
+      this.EnclosureHttpInstance = new EnclosureHttp();
+      this.EnclosureHttpInstance.httpInterceptorsRequest();
+      this.EnclosureHttpInstance.httpInterceptorsResponse();
+    }
+    return this.EnclosureHttpInstance;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  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) => {
+      Axios
+        .request(config)
+        .then((response: EnclosureHttpResoponse) => {
+          resolve(response.data);
+        })
+        .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);
+  }
+  
+  /**
+   * 注入初始化配置
+   * @description 私有化方法
+   * @param config axios配置
+   * @returns void 0
+   */
+  static install(config?: EnclosureHttpRequestConfig): void {
+    this.initConfig = genConfig(config);
+  }
+}
+
+export default EnclosureHttp;

src/api/utils/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>
+    static install(config?: EnclosureHttpRequestConfig): void
+    static getInstance(): EnclosureHttp
+}

src/api/utils/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
+  };
+}

src/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import EnclosureHttp from "./api/utils/core"
+
+const app = createApp(App)
+
+// 全局注册Axios
+app.config.globalProperties.$http = new EnclosureHttp()
+
+app.use(store).use(router).mount('#app')

src/router/index.ts

@@ -0,0 +1,25 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
+import Home from '../views/home.vue'
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/',
+    name: 'home',
+    component: Home
+  },
+  // {
+  //   path: '/about',
+  //   name: 'About',
+  //   // route level code-splitting
+  //   // this generates a separate chunk (about.[hash].js) for this route
+  //   // which is lazy-loaded when the route is visited.
+  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  // }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

src/store/index.ts

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/home.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, nextTick } from "vue"
+export default {
+  mounted() {
+    this.$http.request("get", "https://api.github.com/users")
+  },
+  setup() {
+    const text = ref("vue-ts")
+    return {
+      text,
+    }
+  },
+}
+</script>