From 96a035a6779fb02775b4447359ad6c4c05d9f36d Mon Sep 17 00:00:00 2001
From: cenlj <cenlj@schbrain.com>
Date: Fri, 8 Apr 2022 10:25:29 +0800
Subject: [PATCH] feat: axios loading

---
 initializer-ui/src/components/starter.vue | 25 +++++++++--------------
 initializer-ui/src/utils/request.ts       | 13 ++++++++++--
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/initializer-ui/src/components/starter.vue b/initializer-ui/src/components/starter.vue
index 65c8c42..2525c33 100644
--- a/initializer-ui/src/components/starter.vue
+++ b/initializer-ui/src/components/starter.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="start-wrapper">
-    <a-spin :delay="500" :spinning="loading">
+    <a-spin :spinning="loading">
       <h3 style="margin-bottom: 20px">项目初始代码生成</h3>
       <a-form ref="downloadForm" :labelCol="{span: 6}" :model="formState" :rules="formRules" :wrapperCol="{span: 18}" class="form-wrapper">
         <a-form-item has-feedback label="GroupId" name="groupId">
@@ -30,10 +30,10 @@
 </template>
 
 <script lang="ts" setup>
-import {reactive, ref} from 'vue'
+import {reactive, ref, computed} from 'vue'
 import type {TreeProps} from 'ant-design-vue';
 import {FormInstance, message} from "ant-design-vue";
-import request from "../utils/request";
+import request, {isLoading} from "../utils/request";
 import BaseResponse from "../models/BaseResponse";
 
 interface FormState {
@@ -54,7 +54,7 @@ const fileNodeList = ref<FileNode[]>([])
 const treeData = ref<TreeProps['treeData']>([])
 const id = ref(-1)
 const visible = ref(false)
-const loading = ref(false)
+const loading = computed(() => isLoading.value)
 const downloadForm = ref<FormInstance>();
 
 const formState = reactive<FormState>({
@@ -75,16 +75,11 @@ const onGenerate = async () => {
     if (!result.packageNama) {
       result.packageNama = result.groupId
     }
-    loading.value = true
-    try {
-      let data: BaseResponse = await request.post('/archetype/generate', result)
-      if (data.code === 0) {
-        id.value = data.result
-        message.success('生成成功!')
-        loading.value = false
-      }
-    } catch (e) {
-      loading.value = false
+
+    let data: BaseResponse = await request.post('/archetype/generate', result)
+    if (data.code === 0) {
+      id.value = data.result
+      message.success('生成成功!')
     }
   }
 }
@@ -179,4 +174,4 @@ const createTreeData = (fileNodeList: FileNode[]): any => {
     border-radius: 6px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/initializer-ui/src/utils/request.ts b/initializer-ui/src/utils/request.ts
index ac3debd..230ab01 100644
--- a/initializer-ui/src/utils/request.ts
+++ b/initializer-ui/src/utils/request.ts
@@ -1,10 +1,19 @@
-import type {AxiosResponse} from "axios";
+import type { AxiosRequestConfig, AxiosResponse } from "axios";
 import axios from "axios";
 import {message} from "ant-design-vue";
+import { ref } from 'vue'
+
+export const isLoading = ref(false)
 
 // @ts-ignore
 axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL
+axios.interceptors.request.use((config: AxiosRequestConfig) => {
+    isLoading.value = true
+    return config
+})
+
 axios.interceptors.response.use((config: AxiosResponse) => {
+    isLoading.value = false
     const {data} = config
     if (config.headers['content-type'] === 'application/json') {
         switch (data.code) {
@@ -19,4 +28,4 @@ axios.interceptors.response.use((config: AxiosResponse) => {
     }
 })
 
-export default axios
\ No newline at end of file
+export default axios
-- 
GitLab