feature: http封装

sdk/http.ts

@@ -1,13 +1,171 @@
 import axios from "node_modules/axios/index";
-import type { CreateAxiosDefaults } from "node_modules/axios/index";
+import type {
+  CreateAxiosDefaults,
+  AxiosInstance,
+  AxiosInterceptorOptions,
+  AxiosRequestConfig,
+  InternalAxiosRequestConfig,
+  AxiosResponse,
+} from "node_modules/axios/index";
 
-export function createHttpInstance(options: CreateAxiosDefaults) {
-  const instance = axios.create({
-    timeout: 10000,
-    ...options,
-  });
+class WrappedAxios {
+  private instance?: AxiosInstance;
 
-  return {
-    instance,
-  };
+  constructor(options: CreateAxiosDefaults = {}) {
+    this.instance = axios.create({
+      timeout: 10000,
+      ...options,
+    });
+  }
+
+  beforeRequest<V = any>(
+    onFulfilled?:
+      | ((
+          value: InternalAxiosRequestConfig<V>
+        ) =>
+          | InternalAxiosRequestConfig<V>
+          | Promise<InternalAxiosRequestConfig<V>>)
+      | null,
+    onRejected?: ((error: any) => any) | null,
+    options?: AxiosInterceptorOptions
+  ) {
+    this.instance.interceptors.request.use(onFulfilled, onRejected, options);
+    return this;
+  }
+
+  afterResponse<V = any, D = any>(
+    onFulfilled?:
+      | ((
+          value: AxiosResponse<V, D>
+        ) => AxiosResponse<V, D> | Promise<AxiosResponse<V, D>>)
+      | null,
+    onRejected?: ((error: any) => any) | null,
+    options?: AxiosInterceptorOptions
+  ) {
+    this.instance.interceptors.response.use(onFulfilled, onRejected, options);
+    return this;
+  }
+
+  get axiosInstance() {
+    return this.instance;
+  }
+
+  get<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.instance.get(url, {
+      params: data,
+      ...config,
+    }) as Promise<R>;
+  }
+
+  post<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.instance.post(url, data, config) as Promise<R>;
+  }
+
+  put<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.instance.put(url, data, config) as Promise<R>;
+  }
+
+  delete<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.instance.delete(url, {
+      params: data,
+      ...config,
+    }) as Promise<R>;
+  }
+
+  private createCancelObj<R>(
+    config: AxiosRequestConfig = {},
+    send: () => Promise<R>
+  ) {
+    const controller = new AbortController();
+    config.signal = controller.signal;
+    return {
+      cancel() {
+        controller.abort();
+      },
+      send,
+    };
+  }
+
+  createGetWithCancel<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.createCancelObj<R>(config, () => {
+      return this.get<R>(url, data, config);
+    });
+  }
+
+  createPostWithCancel<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.createCancelObj<R>(config, () => {
+      return this.post<R>(url, data, config);
+    });
+  }
+
+  createPutWithCancel<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.createCancelObj<R>(config, () => {
+      return this.put<R>(url, data, config);
+    });
+  }
+
+  createDeleteWithCancel<R = any>(
+    url: string,
+    data: Record<string, any>,
+    config: AxiosRequestConfig = {}
+  ) {
+    return this.createCancelObj<R>(config, () => {
+      return this.delete<R>(url, data, config);
+    });
+  }
 }
+
+const http = new WrappedAxios();
+
+http
+  .beforeRequest((config) => {
+    config.headers.token = "123";
+    return config;
+  })
+  .afterResponse(
+    (response) => {
+      return response.data;
+    },
+    (error) => {
+      return Promise.reject(error);
+    }
+  );
+
+http.get("/a", { a: 1 });
+
+const req = http.createGetWithCancel("/a", { a: 1 });
+req.send();
+
+setTimeout(() => {
+  req.cancel();
+});
+
+export { WrappedAxios };

src/router/index.js

@@ -45,6 +45,12 @@ const routes = [
         component: () =>
           import(/* webpackChunkName: "flexible" */ "../views/flexible.vue"),
       },
+      {
+        path: "http",
+        name: "http",
+        component: () =>
+          import(/* webpackChunkName: "http" */ "../views/http.vue"),
+      },
       {
         path: "",
         redirect: {

src/views/http.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <Block
+      title="Http"
+      desc="根据使用习惯将axios进行了二次封装，提供了更方便的cancel方法，"
+    >
+      <p>DEMO</p>
+      <Codemirror v-model="code" :disabled="true" />
+    </Block>
+  </div>
+</template>
+
+<script setup>
+import Block from "@/components/block.vue";
+import { ref } from "vue";
+import { Codemirror } from "vue-codemirror";
+
+const code = ref(`import { WrappedAxios } from "ludash";
+  
+const http = new WrappedAxios();
+
+http
+  .beforeRequest((config) => {
+    config.headers.token = "123";
+    return config;
+  })
+  .afterResponse(
+    (response) => {
+      return response.data;
+    },
+    (error) => {
+      return Promise.reject(error);
+    }
+  );
+
+http.get("/a", { a: 1 });
+
+const req = http.createGetWithCancel("/a", { a: 1 });
+req.send();
+
+setTimeout(() => {
+  req.cancel();
+});`);
+</script>