refactor: sql取消执行逻辑调整、前端使用vueuse重构部分代码

mayfly_go_web/src/common/request.ts

@@ -1,11 +1,20 @@
 import router from '../router';
-import Axios from 'axios';
 import config from './config';
 import { getClientId, getToken } from './utils/storage';
 import { templateResolve } from './utils/string';
 import { ElMessage } from 'element-plus';
 import axios from 'axios';
 
+export default {
+    request,
+    fetchReq,
+    get,
+    post,
+    put,
+    del,
+    getApiUrl,
+};
+
 export interface Result {
     /**
      * 响应码
@@ -30,6 +39,7 @@ enum ResultEnum {
 }
 
 const baseUrl: string = config.baseApiUrl;
+// const baseUrl: string = 'http://localhost:18888/api';
 // const baseWsUrl: string = config.baseWsUrl;
 
 /**
@@ -42,13 +52,13 @@ function notifyErrorMsg(msg: string) {
 }
 
 // create an axios instance
-const service = Axios.create({
+const axiosInst = axios.create({
     baseURL: baseUrl, // url = base url + request url
     timeout: 60000, // request timeout
 });
 
 // request interceptor
-service.interceptors.request.use(
+axiosInst.interceptors.request.use(
     (config: any) => {
         // do something before request is sent
         const token = getToken();
@@ -65,21 +75,8 @@ service.interceptors.request.use(
 );
 
 // response interceptor
-service.interceptors.response.use(
-    (response) => {
-        // 获取请求返回结果
-        const res: Result = response.data;
-        if (res.code === ResultEnum.SUCCESS) {
-            return res.data;
-        }
-        // 如果提示没有权限，则移除token，使其重新登录
-        if (res.code === ResultEnum.NO_PERMISSION) {
-            router.push({
-                path: '/401',
-            });
-        }
-        return Promise.reject(res);
-    },
+axiosInst.interceptors.response.use(
+    (response) => response,
     (e: any) => {
         const rejectPromise = Promise.reject(e);
 
@@ -125,35 +122,37 @@ service.interceptors.response.use(
  * @param {Object} uri    uri
  * @param {Object} params 参数
  */
-function request(method: string, url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    if (!url) throw new Error('请求url不能为空');
+function request(method: string, url: string, params: any = null, options: any = {}): Promise<any> {
+    if (!url) {
+        throw new Error('请求url不能为空');
+    }
+
     // 简单判断该url是否是restful风格
     if (url.indexOf('{') != -1) {
         url = templateResolve(url, params);
     }
-    const query: any = {
+
+    const req: any = {
         method,
-        url: url,
+        url,
         ...options,
     };
-    if (headers) {
-        query.headers = headers;
-    }
 
     // post和put使用json格式传参
     if (method === 'post' || method === 'put') {
-        query.data = params;
+        req.data = params;
     } else {
-        query.params = params;
+        req.params = params;
     }
-    return service
-        .request(query)
-        .then((res) => res)
+
+    return axiosInst
+        .request(req)
+        .then((response) => {
+            // 获取请求返回结果
+            const result: Result = response.data;
+            return parseResult(result);
+        })
         .catch((e) => {
-            // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可。忽略登录超时或没有权限的提示（直接跳转至401页面）
-            if (e.msg && e?.code != ResultEnum.NO_PERMISSION) {
-                notifyErrorMsg(e.msg);
-            }
             return Promise.reject(e);
         });
 }
@@ -165,20 +164,20 @@ function request(method: string, url: string, params: any = null, headers: any =
  * @param {Object} url   uri
  * @param {Object} params 参数
  */
-function get(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    return request('get', url, params, headers, options);
+function get(url: string, params: any = null, options: any = {}): Promise<any> {
+    return request('get', url, params, options);
 }
 
-function post(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    return request('post', url, params, headers, options);
+function post(url: string, params: any = null, options: any = {}): Promise<any> {
+    return request('post', url, params, options);
 }
 
-function put(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    return request('put', url, params, headers, options);
+function put(url: string, params: any = null, options: any = {}): Promise<any> {
+    return request('put', url, params, options);
 }
 
-function del(url: string, params: any = null, headers: any = null, options: any = null): Promise<any> {
-    return request('delete', url, params, headers, options);
+function del(url: string, params: any = null, options: any = {}): Promise<any> {
+    return request('delete', url, params, options);
 }
 
 function getApiUrl(url: string) {
@@ -191,11 +190,80 @@ export function joinClientParams(): string {
     return `token=${getToken()}&clientId=${getClientId()}`;
 }
 
-export default {
-    request,
-    get,
-    post,
-    put,
-    del,
-    getApiUrl,
-};
+async function fetchReq(method: string, url: string, params: any = null, options: RequestInit = {}): Promise<any> {
+    options.method = method;
+
+    if (params) {
+        // post和put使用json格式传参
+        if (method === 'post' || method === 'put') {
+            options.body = JSON.stringify(params);
+        } else {
+            const searchParam = new URLSearchParams();
+            Object.keys(params).forEach((key) => {
+                const val = params[key];
+                if (val) {
+                    searchParam.append(key, val);
+                }
+            });
+            url = `${url}?${searchParam.toString()}`;
+        }
+    }
+
+    // Part 1: Add headers and attach auth token
+    const headers = new Headers(options.headers || {});
+
+    const token = getToken();
+    if (token) {
+        headers.set('Authorization', token);
+        headers.set('ClientId', getClientId());
+    }
+    options.headers = headers;
+
+    try {
+        const res: Response = await fetch(`${baseUrl}${url}`, options);
+        if (!res.ok) {
+            throw new Error(`请求响应错误: 状态码=${res.status}`);
+        }
+
+        const jsonRes = await res.json();
+        // 获取请求返回结果
+        const result: Result = jsonRes;
+        return parseResult(result);
+    } catch (e: any) {
+        const rejectPromise = Promise.reject(e);
+
+        if (e?.name == 'AbortError') {
+            console.log('请求已取消');
+            return rejectPromise;
+        }
+
+        if (e.message) {
+            notifyErrorMsg(e.message);
+            return rejectPromise;
+        }
+
+        notifyErrorMsg('网络请求错误');
+        console.error(e);
+        return rejectPromise;
+    }
+}
+
+function parseResult(result: Result) {
+    if (result.code === ResultEnum.SUCCESS) {
+        return result.data;
+    }
+
+    // 如果提示没有权限，则移除token，使其重新登录
+    if (result.code === ResultEnum.NO_PERMISSION) {
+        router.push({
+            path: '/401',
+        });
+    }
+
+    // 如果返回的code不为成功，则会返回对应的错误msg，则直接统一通知即可。忽略登录超时或没有权限的提示（直接跳转至401页面）
+    if (result.msg && result?.code != ResultEnum.NO_PERMISSION) {
+        notifyErrorMsg(result.msg);
+    }
+
+    return Promise.reject(result);
+}