优化 post 显示动画

wuxw
1 parent 468b84d2
Showing 4 changed files with 58 additions and 40 deletions
src/api/community/communityManageApi.js
src/components/community/communityDataToIot.vue
src/utils/request.js
src/views/community/communityManageList.vue
@@ -30,7 +30,7 @@ export function listAreas(params) {
     }).then(response => {
       const res = response.data
  
-        resolve(res)
+      resolve(res)
  
     }).catch(error => {
       reject(error)
@@ -67,11 +67,8 @@ export function updateCommunity(data) {
       data
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
-        resolve(res)
-      } else {
-        reject(new Error(res.msg || '更新小区失败'))
-      }
+      resolve(res)
+
     }).catch(error => {
       reject(error)
     })
@@ -87,11 +84,8 @@ export function deleteCommunity(data) {
       data
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
-        resolve(res)
-      } else {
-        reject(new Error(res.msg || '删除小区失败'))
-      }
+      resolve(res)
+
     }).catch(error => {
       reject(error)
     })
@@ -107,11 +101,8 @@ export function sendCommunityToIot(data) {
       data
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
-        resolve(res)
-      } else {
-        reject(new Error(res.msg || '同步到IOT失败'))
-      }
+      resolve(res)
+
     }).catch(error => {
       reject(error)
     })
@@ -127,11 +118,9 @@ export function auditEnterCommunity(data) {
       data
     }).then(response => {
       const res = response.data
-      if (res.code === 0) {
-        resolve(res)
-      } else {
-        reject(new Error(res.msg || '撤回审核失败'))
-      }
+
+      resolve(res)
+
     }).catch(error => {
       reject(error)
     })
 <template>
-  <el-dialog
-    :title="$t('communityDataToIot.title')"
-    :visible.sync="visible"
-    width="30%"
-    @close="closeCommunityDataToIotModel"
-  >
+  <el-dialog :title="$t('communityDataToIot.title')" :visible.sync="visible" width="30%"
+    @close="closeCommunityDataToIotModel">
     <div style="text-align: center">
       <p>{{ $t('communityDataToIot.confirmText') }}</p>
     </div>
 import axios from 'axios'
-import { Message } from 'element-ui'
+import { Message, Loading } from 'element-ui'
 import config from '@/conf/config'
 import { getHeader } from './header'
  
+// 创建loading实例
+let loadingInstance = null
+
 // 创建axios实例
 const service = axios.create({
   baseURL: config.baseApi, // 基础URL
   timeout: config.apiTimeout // 请求超时时间
 })
  
+// 显示加载动画
+const showLoading = () => {
+  loadingInstance = Loading.service({
+    lock: true,
+    text: '加载中...',
+    spinner: 'el-icon-loading',
+    background: 'rgba(0, 0, 0, 0.7)'
+  })
+}
+
+// 隐藏加载动画
+const hideLoading = () => {
+  if (loadingInstance) {
+    loadingInstance.close()
+    loadingInstance = null
+  }
+}
  
 // 请求拦截器
 service.interceptors.request.use(
@@ -19,19 +39,26 @@ service.interceptors.request.use(
     config.headers['Accept'] = 'application/json'
     config.headers['app-id'] = _header['app-id']
     config.headers['TRANSACTION-ID'] = _header['TRANSACTION-ID']
-    config.headers['REQ-TIME'] =  _header['REQ-TIME']
-    config.headers['SIGN'] =  _header['SIGN']
-    config.headers['user-id'] =  _header['user-id']
+    config.headers['REQ-TIME'] = _header['REQ-TIME']
+    config.headers['SIGN'] = _header['SIGN']
+    config.headers['user-id'] = _header['user-id']
     config.headers['X-Requested-With'] = 'XMLHttpRequest'
     // 这里可以添加token等认证信息
     config.headers['Authorization'] = _header['Authorization']
-    if(config.url.indexOf('/app/') == -1 && config.url.indexOf('/callComponent/') == -1){
+    if (config.url.indexOf('/app/') == -1 && config.url.indexOf('/callComponent/') == -1) {
       config.baseURL = "/app"
     }
+    // GET请求不显示加载动画，其他请求显示
+    if (config.method !== 'get' && config.showLoading !== false) {
+      showLoading()
+    }
+
     return config
   },
   error => {
     console.log(error)
+    // 请求错误时也要隐藏加载动画
+    hideLoading()
     return Promise.reject(error)
   }
 )
@@ -39,6 +66,9 @@ service.interceptors.request.use(
 // 响应拦截器
 service.interceptors.response.use(
   response => {
+    // 隐藏加载动画
+    hideLoading()
+
     const res = response.data
  
     if (res.code && res.code != 0) {
@@ -47,28 +77,31 @@ service.interceptors.response.use(
         type: 'error',
         duration: 5 * 1000
       })
-      return Promise.reject(new Error(res.message || 'Error'))
+      return Promise.reject()
     } else {
       return response
     }
   },
   error => {
     console.log(error)
-    
+
+    // 隐藏加载动画
+    hideLoading()
+
     // 判断是否为401未授权错误
     if (error.response && error.response.status === 401) {
       // 清除本地存储的token
       localStorage.removeItem('token')
       // 跳转到登录页面
       window.location.href = '/#/views/user/login'
-      
+
       // Message({
       //   message: '登录已过期，请重新登录',
       //   type: 'error',
       //   duration: 5 * 1000
       // })
     }
-   
+
     return Promise.reject(error)
   }
 )
@@ -80,9 +80,9 @@
         @current-change="handleCurrentChange" />
     </el-card>
     <!-- 组件 -->
-    <add-community ref="addCommunity" @listData="_queryCommunityMethod"/>
-    <edit-community ref="editCommunity" @listData="_queryCommunityMethod"/>
-    <delete-community ref="deleteCommunity" @listData="_queryCommunityMethod"/>
+    <add-community ref="addCommunity" @listData="_queryCommunityMethod" />
+    <edit-community ref="editCommunity" @listData="_queryCommunityMethod" />
+    <delete-community ref="deleteCommunity" @listData="_queryCommunityMethod" />
     <community-data-to-iot ref="communityDataToIot" />
   </div>
 </template>
@@ -202,7 +202,7 @@ export default {
       const { data } = await getAttrSpecList({
         page: 1,
         row: 100,
-        tableName:'building_community_attr'
+        tableName: 'building_community_attr'
       })
       this.communityManageInfo.listColumns = []
       data.forEach(item => {