diff --git a/web/src/views/apps/mysql/IndexView.vue b/web/src/views/apps/mysql/IndexView.vue
index 9d77ca11..5d33fb6f 100644
--- a/web/src/views/apps/mysql/IndexView.vue
+++ b/web/src/views/apps/mysql/IndexView.vue
@@ -12,9 +12,19 @@ import systemctl from '@/api/panel/systemctl'
 const currentTab = ref('status')
 const status = ref(false)
 const isEnabled = ref(false)
-const config = ref('')
-const slowLog = ref('')
-const rootPassword = ref('')
+
+const { data: rootPassword } = useRequest(mysql.rootPassword, {
+  initialData: ''
+})
+const { data: config } = useRequest(mysql.config, {
+  initialData: ''
+})
+const { data: slowLog } = useRequest(mysql.slowLog, {
+  initialData: ''
+})
+const { data: load } = useRequest(mysql.load, {
+  initialData: []
+})
 
 const statusType = computed(() => {
   return status.value ? 'success' : 'error'
@@ -39,12 +49,6 @@ const loadColumns: any = [
   }
 ]
 
-const load = ref<any[]>([])
-
-const getLoad = async () => {
-  return await mysql.load()
-}
-
 const getStatus = async () => {
   status.value = await systemctl.status('mysqld')
 }
@@ -53,21 +57,6 @@ const getIsEnabled = async () => {
   isEnabled.value = await systemctl.isEnabled('mysqld')
 }
 
-const getRootPassword = async () => {
-  await mysql.rootPassword().then((res: any) => {
-    rootPassword.value = res.data
-  })
-}
-
-const getSlowLog = async () => {
-  return await mysql.slowLog()
-}
-
-const getConfig = async () => {
-  const { data } = await mysql.config()
-  return data
-}
-
 const handleSaveConfig = async () => {
   await mysql.saveConfig(config.value)
   window.$message.success('保存成功')
@@ -126,16 +115,6 @@ const handleSetRootPassword = async () => {
 onMounted(() => {
   getStatus()
   getIsEnabled()
-  getRootPassword()
-  getLoad().then((res) => {
-    load.value = res
-  })
-  getSlowLog().then((res) => {
-    slowLog.value = res
-  })
-  getConfig().then((res) => {
-    config.value = res
-  })
 })
 </script>
 
diff --git a/web/src/views/apps/nginx/IndexView.vue b/web/src/views/apps/nginx/IndexView.vue
index 724a00e5..aae6e563 100644
--- a/web/src/views/apps/nginx/IndexView.vue
+++ b/web/src/views/apps/nginx/IndexView.vue
@@ -12,8 +12,16 @@ import systemctl from '@/api/panel/systemctl'
 const currentTab = ref('status')
 const status = ref(false)
 const isEnabled = ref(false)
-const config = ref('')
-const errorLog = ref('')
+
+const { data: config } = useRequest(nginx.config, {
+  initialData: ''
+})
+const { data: errorLog } = useRequest(nginx.errorLog, {
+  initialData: ''
+})
+const { data: load } = useRequest(nginx.load, {
+  initialData: []
+})
 
 const statusType = computed(() => {
   return status.value ? 'success' : 'error'
@@ -39,12 +47,6 @@ const columns: any = [
   }
 ]
 
-const load = ref<any[]>([])
-
-const getLoad = async () => {
-  return await nginx.load()
-}
-
 const getStatus = async () => {
   status.value = await systemctl.status('nginx')
 }
@@ -53,14 +55,6 @@ const getIsEnabled = async () => {
   isEnabled.value = await systemctl.isEnabled('nginx')
 }
 
-const getErrorLog = async () => {
-  return await nginx.errorLog()
-}
-
-const getConfig = async () => {
-  return await nginx.config()
-}
-
 const handleSaveConfig = async () => {
   await nginx.saveConfig(config.value)
   window.$message.success('保存成功')
@@ -109,15 +103,6 @@ const handleReload = async () => {
 onMounted(() => {
   getStatus()
   getIsEnabled()
-  getLoad().then((res) => {
-    load.value = res
-  })
-  getErrorLog().then((res) => {
-    errorLog.value = res
-  })
-  getConfig().then((res) => {
-    config.value = res
-  })
 })
 </script>
 
diff --git a/web/src/views/apps/php/PhpView.vue b/web/src/views/apps/php/PhpView.vue
index cd1e923c..58c9f2ac 100644
--- a/web/src/views/apps/php/PhpView.vue
+++ b/web/src/views/apps/php/PhpView.vue
@@ -18,10 +18,25 @@ const { version } = toRefs(props)
 const currentTab = ref('status')
 const status = ref(false)
 const isEnabled = ref(false)
-const config = ref('')
-const fpmConfig = ref('')
-const errorLog = ref('')
-const slowLog = ref('')
+
+const { data: config } = useRequest(php.config(version.value), {
+  initialData: ''
+})
+const { data: fpmConfig } = useRequest(php.fpmConfig(version.value), {
+  initialData: ''
+})
+const { data: errorLog } = useRequest(php.errorLog(version.value), {
+  initialData: ''
+})
+const { data: slowLog } = useRequest(php.slowLog(version.value), {
+  initialData: ''
+})
+const { data: load } = useRequest(php.load(version.value), {
+  initialData: []
+})
+const { data: extensions } = useRequest(php.extensions(version.value), {
+  initialData: []
+})
 
 const statusType = computed(() => {
   return status.value ? 'success' : 'error'
@@ -126,17 +141,6 @@ const loadColumns: any = [
   }
 ]
 
-const extensions = ref<any[]>([])
-const load = ref<any[]>([])
-
-const getLoad = async () => {
-  return await php.load(version.value)
-}
-
-const getExtensions = async () => {
-  return await php.extensions(version.value)
-}
-
 const getStatus = async () => {
   status.value = await systemctl.status(`php-fpm-${version.value}`)
 }
@@ -145,22 +149,6 @@ const getIsEnabled = async () => {
   isEnabled.value = await systemctl.isEnabled(`php-fpm-${version.value}`)
 }
 
-const getErrorLog = async () => {
-  errorLog.value = await php.errorLog(version.value)
-}
-
-const getSlowLog = async () => {
-  slowLog.value = await php.slowLog(version.value)
-}
-
-const getConfig = async () => {
-  config.value = await php.config(version.value)
-}
-
-const getFPMConfig = async () => {
-  fpmConfig.value = await php.fpmConfig(version.value)
-}
-
 const handleSetCli = async () => {
   await php.setCli(version.value)
   window.$message.success('设置成功')
@@ -174,7 +162,6 @@ const handleSaveConfig = async () => {
 const handleSaveFPMConfig = async () => {
   await php.saveFPMConfig(version.value, fpmConfig.value)
   window.$message.success('保存成功')
-  await getFPMConfig()
 }
 
 const handleClearErrorLog = async () => {
@@ -223,13 +210,13 @@ const handleReload = async () => {
 }
 
 const handleInstallExtension = async (slug: string) => {
-  await php.installExtension(version.value, slug).then(() => {
+  useRequest(php.installExtension(version.value, slug)).onSuccess(() => {
     window.$message.success('任务已提交，请稍后查看任务进度')
   })
 }
 
 const handleUninstallExtension = async (name: string) => {
-  await php.uninstallExtension(version.value, name).then(() => {
+  useRequest(php.uninstallExtension(version.value, name)).onSuccess(() => {
     window.$message.success('任务已提交，请稍后查看任务进度')
   })
 }
@@ -237,16 +224,6 @@ const handleUninstallExtension = async (name: string) => {
 onMounted(() => {
   getStatus()
   getIsEnabled()
-  getExtensions().then((res) => {
-    extensions.value = res
-  })
-  getLoad().then((res) => {
-    load.value = res
-  })
-  getErrorLog()
-  getSlowLog()
-  getConfig()
-  getFPMConfig()
 })
 </script>
 
diff --git a/web/src/views/apps/phpmyadmin/IndexView.vue b/web/src/views/apps/phpmyadmin/IndexView.vue
index 316b18bf..b66d3b09 100644
--- a/web/src/views/apps/phpmyadmin/IndexView.vue
+++ b/web/src/views/apps/phpmyadmin/IndexView.vue
@@ -16,7 +16,12 @@ const newPort = ref(0)
 const url = computed(() => {
   return `http://${hostname.value}:${port.value}/${path.value}`
 })
-const config = ref('')
+
+const { data: config } = useRequest(phpmyadmin.getConfig, {
+  initialData: {
+    config: ''
+  }
+})
 
 const getInfo = async () => {
   const data = await phpmyadmin.info()
@@ -31,10 +36,6 @@ const handleSave = async () => {
   await getInfo()
 }
 
-const getConfig = async () => {
-  return await phpmyadmin.getConfig()
-}
-
 const handleSaveConfig = async () => {
   await phpmyadmin.saveConfig(config.value)
   window.$message.success('保存成功')
@@ -42,9 +43,6 @@ const handleSaveConfig = async () => {
 
 onMounted(() => {
   getInfo()
-  getConfig().then((res) => {
-    config.value = res
-  })
 })
 </script>
 
diff --git a/web/src/views/apps/postgresql/IndexView.vue b/web/src/views/apps/postgresql/IndexView.vue
index ca460937..03cf5118 100644
--- a/web/src/views/apps/postgresql/IndexView.vue
+++ b/web/src/views/apps/postgresql/IndexView.vue
@@ -12,9 +12,19 @@ import systemctl from '@/api/panel/systemctl'
 const currentTab = ref('status')
 const status = ref(false)
 const isEnabled = ref(false)
-const config = ref('')
-const userConfig = ref('')
-const log = ref('')
+
+const { data: log } = useRequest(postgresql.log, {
+  initialData: ''
+})
+const { data: config } = useRequest(postgresql.config, {
+  initialData: ''
+})
+const { data: userConfig } = useRequest(postgresql.userConfig, {
+  initialData: ''
+})
+const { data: load } = useRequest(postgresql.load, {
+  initialData: []
+})
 
 const statusType = computed(() => {
   return status.value ? 'success' : 'error'
@@ -39,12 +49,6 @@ const loadColumns: any = [
   }
 ]
 
-const load = ref<any[]>([])
-
-const getLoad = async () => {
-  return await postgresql.load()
-}
-
 const getStatus = async () => {
   status.value = await systemctl.status('postgresql')
 }
@@ -53,18 +57,6 @@ const getIsEnabled = async () => {
   isEnabled.value = await systemctl.isEnabled('postgresql')
 }
 
-const getLog = async () => {
-  return await postgresql.log()
-}
-
-const getConfig = async () => {
-  config.value = await postgresql.config()
-}
-
-const getUserConfig = async () => {
-  userConfig.value = await postgresql.userConfig()
-}
-
 const handleSaveConfig = async () => {
   await postgresql.saveConfig(config.value)
   window.$message.success('保存成功')
@@ -118,14 +110,6 @@ const handleReload = async () => {
 onMounted(() => {
   getStatus()
   getIsEnabled()
-  getLoad().then((res) => {
-    load.value = res
-  })
-  getLog().then((res) => {
-    log.value = res
-  })
-  getConfig()
-  getUserConfig()
 })
 </script>
 
diff --git a/web/src/views/apps/redis/IndexView.vue b/web/src/views/apps/redis/IndexView.vue
index 5079475f..700eab3f 100644
--- a/web/src/views/apps/redis/IndexView.vue
+++ b/web/src/views/apps/redis/IndexView.vue
@@ -12,7 +12,13 @@ import systemctl from '@/api/panel/systemctl'
 const currentTab = ref('status')
 const status = ref(false)
 const isEnabled = ref(false)
-const config = ref('')
+
+const { data: config } = useRequest(redis.config, {
+  initialData: ''
+})
+const { data: load } = useRequest(redis.load, {
+  initialData: []
+})
 
 const statusType = computed(() => {
   return status.value ? 'success' : 'error'
@@ -37,12 +43,6 @@ const loadColumns: any = [
   }
 ]
 
-const load = ref<any[]>([])
-
-const getLoad = async () => {
-  return await redis.load()
-}
-
 const getStatus = async () => {
   status.value = await systemctl.status('redis')
 }
@@ -51,10 +51,6 @@ const getIsEnabled = async () => {
   isEnabled.value = await systemctl.isEnabled('redis')
 }
 
-const getConfig = async () => {
-  config.value = await redis.config()
-}
-
 const handleSaveConfig = async () => {
   await redis.saveConfig(config.value)
   window.$message.success('保存成功')
@@ -92,10 +88,6 @@ const handleRestart = async () => {
 onMounted(() => {
   getStatus()
   getIsEnabled()
-  getLoad().then((res) => {
-    load.value = res
-  })
-  getConfig()
 })
 </script>
 
diff --git a/web/src/views/database/DatabaseList.vue b/web/src/views/database/DatabaseList.vue
index aefc5217..0bb53fad 100644
--- a/web/src/views/database/DatabaseList.vue
+++ b/web/src/views/database/DatabaseList.vue
@@ -116,14 +116,14 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 )
 
 const handleDelete = async (serverID: number, name: string) => {
-  await database.delete(serverID, name).then(() => {
-    window.$message.success('删除成功')
+  useRequest(database.delete(serverID, name)).onSuccess(() => {
     refresh()
+    window.$message.success('删除成功')
   })
 }
 
 const handleComment = (row: any) => {
-  database.comment(row.server_id, row.name, row.comment).then(() => {
+  useRequest(database.comment(row.server_id, row.name, row.comment)).onSuccess(() => {
     window.$message.success('修改成功')
   })
 }
diff --git a/web/src/views/database/ServerList.vue b/web/src/views/database/ServerList.vue
index 26026303..eac8e6a2 100644
--- a/web/src/views/database/ServerList.vue
+++ b/web/src/views/database/ServerList.vue
@@ -228,14 +228,14 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 )
 
 const handleDelete = async (id: number) => {
-  await database.serverDelete(id).then(() => {
-    window.$message.success('删除成功')
+  useRequest(database.serverDelete(id)).onSuccess(() => {
     refresh()
+    window.$message.success('删除成功')
   })
 }
 
 const handleRemark = (row: any) => {
-  database.serverRemark(row.id, row.remark).then(() => {
+  useRequest(database.serverRemark(row.id, row.remark)).onSuccess(() => {
     window.$message.success('修改成功')
   })
 }
diff --git a/web/src/views/database/UserList.vue b/web/src/views/database/UserList.vue
index 69de8945..ced845e5 100644
--- a/web/src/views/database/UserList.vue
+++ b/web/src/views/database/UserList.vue
@@ -208,14 +208,14 @@ const { loading, data, page, total, pageSize, pageCount, refresh } = usePaginati
 )
 
 const handleDelete = async (id: number) => {
-  await database.userDelete(id).then(() => {
-    window.$message.success('删除成功')
+  useRequest(database.userDelete(id)).onSuccess(() => {
     refresh()
+    window.$message.success('删除成功')
   })
 }
 
 const handleRemark = (row: any) => {
-  database.userRemark(row.id, row.remark).then(() => {
+  useRequest(database.userRemark(row.id, row.remark)).onSuccess(() => {
     window.$message.success('修改成功')
   })
 }