♻️ 封装 doRequest 方法，方便进行请求处理 & checkRequestSuccess 方法，统一控制判断服务端的响应是否成功…

…，方便应对服务端的响应结构切换

src/components/Table/ProTable.js

@@ -6,6 +6,7 @@ import './listToolBar.less'
 import './toolbar.less'
 import './alert.less'
 import './proTable.less'
+import { doRequest } from '@/utils/request'
 
 const SearchConfig = {
   searchText: {
@@ -271,10 +272,11 @@ export default {
      */
     loadData () {
       const params = this.pageParams()
-
       this.localLoading = true
-      this.request(params).then(res => {
-        if (res.code === 200) {
+
+      doRequest(this.request(params), {
+        successMessage: false,
+        onSuccess: (res) => {
           const data = res.data
 
           if(this.enablePagination){
@@ -292,14 +294,10 @@ export default {
           this.localDataSource = this.responseDataProcess(data)
           // 当分页加载成功时执行
           this.onPageLoadSuccess(data)
-        } else {
-          this.$message.warning(res.message || 'error request')
+        },
+        onFinally: () => {
+          this.localLoading = false
         }
-      }).catch((e) => {
-        // 未被 axios拦截器处理过，则在这里继续处理
-        !e.resolved && this.$message.error(e.message || 'error request')
-      }).finally(() => {
-        this.localLoading = false
       })
     },
     /**

src/mixins/formMixin.js

@@ -1,4 +1,6 @@
 import pick from 'lodash.pick'
+import { doRequest } from '@/utils/request'
+import { delObj } from '@/api/system/role'
 
 // 表单行为类型，标识当前表单是用来新建的还是更新的
 const FORM_ACTION = {
@@ -127,21 +129,17 @@ export default {
       this.form.validateFields((err, values) => {
         if (!err) {
           this.submitLoading = true
-          reqFunction(this.submitDataProcess(values))
-            .then(res => {
-              if (res.code === 200) {
-                this.$message.success(res.message)
-                this.submitSuccess(res)
-              } else {
-                this.submitError(res)
-              }
-            })
-            .catch(error => {
-              this.$message.error(error.response.data.message)
-            })
-            .finally(() => {
+          doRequest(reqFunction(this.submitDataProcess(values)), {
+            onSuccess: (res) => {
+              this.submitSuccess(res)
+            },
+            onFail: (res) => {
+              this.submitError(res)
+            },
+            onFinally: () => {
               this.submitLoading = false
-            })
+            }
+          })
         }
       })
     },

src/mixins/tablePageMixin.js

@@ -1,5 +1,7 @@
 import { littleCamelToUnderline } from '@/utils/strUtil'
 import { enableI18n } from '@/config/projectConfig'
+import { doRequest } from '@/utils/request'
+import { delObj } from '@/api/system/role'
 
 export default {
   data () {
@@ -106,29 +108,24 @@ export default {
      */
     loadData () {
       const params = this.pageParams()
-
       this.loading = true
-      this.getPage(params)
-        .then(res => {
-          if (res.code === 200) {
-            const page = res.data
-            // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
-            if (page.records.length === 0 && this.pagination.current > 1) {
-              this.pagination.current--
-              this.loadData()
-              return
-            }
-            this.dataSource = page.records
-            this.pagination.total = page.total
-            this.onPageLoadSuccess(page)
-          } else {
-            this.$message.warning(res.message || 'error request')
+      doRequest(this.getPage(params), {
+        successMessage: false,
+        onSuccess: (res) => {
+          const page = res.data
+          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+          if (page.records.length === 0 && this.pagination.current > 1) {
+            this.pagination.current--
+            this.loadData()
+            return
           }
-        }).catch((e) => {
-        // 未被 axios拦截器处理过，则在这里继续处理
-        !e.resolved && this.$message.error(e.message || 'error request')
-      }).finally(() => {
-        this.loading = false
+          this.dataSource = page.records
+          this.pagination.total = page.total
+          this.onPageLoadSuccess(page)
+        },
+        onFinally: () => {
+          this.loading = false
+        }
       })
     },
     /**
@@ -178,16 +175,10 @@ export default {
 
     // 删除
     handleDel (record) {
-      this.delObj(record[this.rowKey]).then(res => {
-        if (res.code === 200) {
-          this.$message.success(res.message)
+      doRequest(delObj(record[this.rowKey]), {
+        onSuccess: () => {
           this.reloadTable(false)
-        } else {
-          this.$message.error(res.message)
         }
-      }).catch((e) => {
-        // 未被 axios拦截器处理过，则在这里继续处理
-        !e.resolved && this.$message.error(e.message || 'error request')
       })
     },
 

src/store/modules/dict.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { DICT } from '@/store/mutation-types'
 import { getDictData, invalidDictHash } from '@/api/system/dict'
+import { checkRequestSuccess } from '@/utils/request'
 
 // 字典项hash列表的Key
 const DICT_HASH_KEY = 'dict-hashes'
@@ -80,7 +81,7 @@ export default {
         }
         commit(DICT.SET_DICT_REQUEST_FLAG, requestFlagKey)
         const res = await getDictData(noDataList)
-        if (res.code === 200 && res.data) {
+        if (checkRequestSuccess(res) && res.data) {
           res.data.forEach(dictData => {
             const dictCode = dictData.dictCode
             const hashCode = dictData.hashCode
@@ -113,7 +114,7 @@ export default {
       // 如果有属性，则去后台查询是否过期
       if (map && Object.getOwnPropertyNames(map).length > 0) {
         const res = await invalidDictHash(map)
-        if (res.code === 200) {
+        if (checkRequestSuccess(res)) {
           // 删除对应过期数据
           for (let dictCode of res.data) {
             Vue.ls.remove(DICT_DATA_KEY_PREFIX + dictCode)

src/store/modules/lov.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { LOV } from '@/store/mutation-types'
 import { check, getData } from '@/api/system/lov'
+import { checkRequestSuccess } from '@/utils/request'
 
 // 缓存过期时间
 const TTL = 7 * 24 * 60 * 60 * 1000
@@ -60,7 +61,7 @@ const lov = {
         const res = await getData(keyword)
 
         // 解析
-        if (res.code === 200 && res.data) {
+        if (checkRequestSuccess(res) && res.data) {
           Vue.ls.set(getKey(keyword), JSON.stringify(res.data), TTL)
           commit(LOV.SET_CACHE, { keyword, lovInfo: res.data })
           cacheUpdateTime(res.data)
@@ -90,11 +91,10 @@ const lov = {
       const cache = getCache()
       if (cache && Object.getOwnPropertyNames(cache).length > 0) {
         const res = await check(cache)
-        if (res.code === 200 && res.data) {
+        if (checkRequestSuccess(res) && res.data) {
           return res.data
         }
       }
-
       return []
     }
   }

src/utils/request.js

@@ -1,10 +1,12 @@
 import axios from 'axios'
 import store from '@/store'
 import notification from 'ant-design-vue/es/notification'
+import { message } from 'ant-design-vue'
 import { enableI18n } from '@/config/projectConfig'
+import { debug } from 'script-ext-html-webpack-plugin/lib/common'
 
 // 创建 axios 实例
-const service = axios.create({
+const axiosInstance = axios.create({
   baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
   timeout: 600000 // 请求超时时间
 })
@@ -37,7 +39,7 @@ const onRejected = (error) => {
 }
 
 // request interceptor
-service.interceptors.request.use(config => {
+axiosInstance.interceptors.request.use(config => {
   const headers = config.headers
 
   // token
@@ -59,7 +61,7 @@ service.interceptors.request.use(config => {
 }, onRejected)
 
 // response interceptor
-service.interceptors.response.use((response) => {
+axiosInstance.interceptors.response.use((response) => {
   const headers = response.headers
   if (headers != null && headers['content-type'] && headers['content-type'].startsWith('application/json')) {
     return response.data
@@ -68,4 +70,58 @@ service.interceptors.response.use((response) => {
   }
 }, onRejected)
 
-export default service
+// 判断是否请求成功
+export function checkRequestSuccess (res) {
+  return res.code === 200
+}
+
+// 默认的响应处理器
+const defaultResponseHandler = {
+  // 判断是否请求成功
+  checkRequestSuccess: checkRequestSuccess,
+  // 成功消息提示
+  successMessage: true,
+  // 成功时的处理函数
+  onSuccess (res) {
+  },
+  // 失败消息提示
+  failMessage: true,
+  // 失败时的处理函数
+  onFail (res) {
+  },
+  // 错误消息提示
+  errorMessage: true,
+  // 错误时的处理函数
+  onError (e) {
+  },
+  // 最终的执行函数
+  onFinally () {
+  }
+}
+
+/**
+ * 请求方法封装
+ * @param request promise
+ * @param userResponseHandler 用户设置的 userResponseHandler
+ */
+export function doRequest (request, userResponseHandler) {
+  const handler = Object.assign({}, defaultResponseHandler, userResponseHandler)
+  request.then(res => {
+    if (handler.checkRequestSuccess(res)) {
+      handler.successMessage && message.success(res.message)
+      handler.onSuccess(res)
+    } else {
+      handler.failMessage && message.error(res.message)
+      handler.onFail(res)
+    }
+  }).catch((e) => {
+    // 未被 axios拦截器处理过，则在这里继续处理
+    handler.errorMessage && !e.resolved && message.error(e.message || 'error request')
+    handler.onError(e)
+  }).finally(() => {
+      handler.onFinally()
+    }
+  )
+}
+
+export default axiosInstance

src/views/i18n/I18nMessageModal.vue

@@ -24,6 +24,8 @@
 <script>
 import { listByCode, putObj } from '@/api/i18n/i18n-data'
 import EditableCell from '@/components/Table/EditableCell'
+import { doRequest } from '@/utils/request'
+import { delObj } from '@/api/system/role'
 
 export default {
   name: 'I18nMessageModal',
@@ -90,18 +92,16 @@ export default {
       this.hasUpdate = true
       // 值变更，则请求后台更新 i18nData 数据
       this.dataLoading = true
-      putObj({
+
+      let obj = {
         code: record.code,
         languageTag: record.languageTag,
         message: value
-      }).then(res => {
-        if (res.code === 200) {
-          this.$message.success(res.message)
-        } else {
-          this.$message.error(res.message)
+      }
+      doRequest(putObj(obj), {
+        onFinally: () => {
+          this.dataLoading = false
         }
-      }).finally(() => {
-        this.dataLoading = false
       })
     }
   }

src/views/i18n/i18n-data/I18nDataPage.vue

@@ -101,6 +101,7 @@ import I18nDataUpdateModal from '@/views/i18n/i18n-data/I18nDataUpdateModal'
 import I18nDataImportModal from '@/views/i18n/i18n-data/I18nDataImportModal'
 import { remoteFileDownload } from '@/utils/fileUtil'
 import ProTable from '@/components/Table/ProTable'
+import { doRequest } from '@/utils/request'
 
 export default {
   name: 'I18nDataPage',
@@ -171,19 +172,11 @@ export default {
     },
     // 删除
     handleDel(record) {
-      delObj(record.code, record.languageTag)
-        .then(res => {
-          if (res.code === 200) {
-            this.$message.success(res.message)
-            this.reloadPageTable(false)
-          } else {
-            this.$message.error(res.message)
-          }
-        })
-        .catch(e => {
-          // 未被 axios拦截器处理过，则在这里继续处理
-          !e.resolved && this.$message.error(e.message || 'error request')
-        })
+      doRequest(delObj(record.code, record.languageTag), {
+        onSuccess: () => {
+          this.reloadPageTable(false)
+        }
+      })
     },
     /**
      * 导出国际化信息