wip-request

src/pages/index/index.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
+  import { ref, reactive } from 'vue';
   import Test from '@/components/test/Test.vue';
   const title = ref('Hello');
   const url = import.meta.env.VITE_BASE_URL;
@@ -21,9 +21,31 @@
   const jumLogin = () => {
     console.log('/pages/login/index');
 
-    // uni.navigateTo({
-    //   url: '/pages/login/index',
-    // });
+    uni.navigateTo({
+      url: '/pages/login/index',
+    });
+  };
+
+  import { request } from '@/utils/http/index';
+  const form = reactive({
+    email: 'catch@admin.com',
+    password: 'catchadmin',
+  });
+  const loginType = ref('');
+  const submit = () => {
+    request
+      .post({
+        url: '/login',
+        data: form,
+      })
+      .then((res: any) => {
+        loginType.value = '登录成功';
+        console.log(res.message);
+      })
+      .catch((err: any) => {
+        loginType.value = '登录失败';
+        console.log(err.message);
+      });
   };
 </script>
 

src/pages/login/index.vue

@@ -17,18 +17,18 @@
 
 <script setup lang="ts">
   import { reactive, ref } from 'vue';
-  import { request } from '@/utils/http/request/index';
+  import { request } from '@/utils/http/index';
   const form = reactive({
     email: 'catch@admin.com',
     password: 'catchadmin',
   });
   const loginType = ref('');
   const submit = () => {
-    request({
-      url: '/login',
-      method: 'POST',
-      data: form,
-    })
+    request
+      .post({
+        url: '/login',
+        data: form,
+      })
       .then((res: any) => {
         loginType.value = '登录成功';
         console.log(res.message);

src/utils/http/index.ts

@@ -0,0 +1,26 @@
+import { HttpRequest } from '@/utils/http/request';
+import { assign } from 'lodash-es';
+import { Request, RequestOptions } from '@/utils/types/request';
+const BASE_URL = import.meta.env.VITE_BASE_URL;
+
+function invoke(args: Request.Params & Partial<RequestOptions>) {
+  args = assign(args, {
+    dataType: 'json',
+    responseType: 'text',
+    header: {
+      'Content-Type': 'application/json;charset=UTF-8;',
+      Accept: 'application/json, text/plain, */*',
+    },
+  });
+}
+
+function createRequest() {
+  return new HttpRequest({
+    baseUrl: BASE_URL,
+    interceptors: {
+      invoke,
+    },
+  });
+}
+
+export const request = createRequest();

src/utils/http/request.ts

@@ -0,0 +1,93 @@
+import { assign, cloneDeep, reject } from 'lodash-es';
+import { Request, RequestOptions } from '@/utils/types/request';
+
+export class HttpRequest {
+  private readonly options: Request.OptionsConfig;
+  requestTask: UniApp.RequestTask | undefined;
+
+  constructor(options: Request.OptionsConfig) {
+    this.options = options;
+    this.setupInterceptors();
+    this.requestTask = undefined;
+  }
+
+  /**
+   * 设置拦截器
+   * https://uniapp.dcloud.io/api/interceptor.html
+   */
+  setupInterceptors() {
+    this.options.interceptors && uni.addInterceptor('request', this.options.interceptors);
+  }
+
+  /**
+   * request调用
+   * @param requestParams
+   * @param options
+   */
+  async request(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    let _params = cloneDeep(requestParams);
+    const url = `${this.options.baseUrl}${_params.url}`;
+    _params = assign(_params, this.options, options, { url });
+    // this.requestTask = await uni.request(_params);
+    return new Promise((resolve, reject) => {
+      this.requestTask = uni.request({
+        ..._params,
+        success: (res) => {
+          resolve(res);
+        },
+        fail: (err) => {
+          // #ifdef APP-PLUS
+          reject(err);
+          // #endif
+          // #ifndef APP-PLUS
+          reject('请求失败');
+          // #endif
+        },
+        complete: () => {},
+      });
+    });
+  }
+
+  /**
+   * 请求中断
+   */
+  abort() {
+    this.requestTask && this.requestTask.abort();
+  }
+
+  get(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'GET' }), options);
+  }
+
+  post(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'POST' }), options);
+  }
+
+  put(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'PUT' }), options);
+  }
+
+  delete(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'DELETE' }), options);
+  }
+
+  option(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'OPTIONS' }), options);
+  }
+
+  /* #ifndef APP-PLUS */
+
+  trace(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'TRACE' }), options);
+  }
+
+  connect(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'CONNECT' }), options);
+  }
+
+  head(requestParams: Request.Params, options?: Partial<RequestOptions>) {
+    return this.request(assign(requestParams, { method: 'HEAD' }), options);
+  }
+
+  /* #endif */
+}

src/utils/http/request/index.ts

@@ -1,69 +0,0 @@
-const BASE_URL = import.meta.env.VITE_BASE_URL;
-function createRequest(options: RequestOptions) {
-  const _options = Object.assign({}, options);
-  return new Promise((resolve, reject) => {
-    uni.request({
-      ..._options,
-      success(res) {
-        const { statusCode, data: resData } = res;
-        if (statusCode === 200) {
-          const { code, data, message } = resData;
-          switch (code) {
-            case 10000:
-              resolve(resData);
-              break;
-            case 10001:
-            default:
-              reject(resData);
-              break;
-          }
-        }
-      },
-      fail(err) {
-        reject(err);
-      },
-    });
-  });
-}
-
-export const request = createRequest;
-
-function beforeRequestInterceptors(args: any) {
-  uni.showLoading({});
-  args.url = `${BASE_URL}${args.url}`;
-  args.dataType = 'json';
-  args.responseType = 'text';
-  args.header = {
-    'Content-Type': 'application/json;charset=UTF-8;',
-    Accept: 'application/json, text/plain, */*',
-  };
-}
-
-function responseSuccessInterceptors(res: any) {}
-
-function responseFailInterceptors(err: any) {}
-
-function completeInterceptors(res: any) {
-  uni.hideLoading();
-}
-
-export function requestInterceptors() {
-  uni.addInterceptor('request', {
-    invoke(args) {
-      // request 触发前拦截
-      beforeRequestInterceptors(args);
-    },
-    success(res) {
-      // 响应成功后触发拦截
-      responseSuccessInterceptors(res);
-    },
-    fail(err) {
-      // 响应失败后触发拦截
-      responseFailInterceptors(err);
-    },
-    complete(res) {
-      // 响应失败后触发拦截
-      completeInterceptors(res);
-    },
-  });
-}

src/utils/http/request/request.d.ts

@@ -1 +0,0 @@
-declare type RequestOptions = UniApp.RequestOptions;

src/utils/interceptors/index.ts

@@ -1,5 +1 @@
-import { requestInterceptors } from '@/utils/http/request';
-
-export function setupInterceptors() {
-  requestInterceptors();
-}
+export function setupInterceptors() {}

src/utils/types/request.d.ts

@@ -0,0 +1,20 @@
+import { extend } from 'lodash-es';
+
+declare type RequestOptions = UniApp.RequestOptions;
+
+declare namespace Request {
+  /**
+   * 选项配置
+   */
+  interface OptionsConfig extends Partial<RequestOptions> {
+    interceptors?: UniApp.InterceptorOptions;
+    baseUrl: string;
+  }
+
+  interface Params<T = any> {
+    url: string;
+    data?: string | AnyObject | ArrayBuffer | T;
+    method?: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT';
+    skipAuth?: Boolean;
+  }
+}

vite.config.ts

@@ -34,7 +34,7 @@ export default defineConfig({
     MiniProgramTailwind({
       // 是否开启自动转换至 rpx 单位值的功能
       enableRpx: true,
-      // 	设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率
+      // 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率
       designWidth: 350,
     }),
     // eslintPlugin({