Vue.js：请求处理时添加全局页面加载进度条（代码调试）

一、全局加载进度条的布局实现 #

要实现页面级的加载遮罩效果，需将进度条放在全屏覆盖层内，避免受局部布局限制。将以下代码添加到页面组件的最外层（或v-app内部的顶层位置）：

<v-overlay :value="loading" z-index="9999">
  <v-progress-circular
    indeterminate
    color="primary"
    size="64"
  ></v-progress-circular>
</v-overlay>

• v-overlay会生成全屏半透明遮罩，阻止用户在加载期间操作页面
• z-index="9999"确保遮罩层在所有页面内容上方
• size="64"调整进度条尺寸，提升视觉辨识度

二、修正保存方法的加载逻辑 #

当前代码中finally和setTimeout的冲突会导致加载状态异常，需改用Promise.all确保加载状态至少维持5秒，同时等待API请求完成：

async clickSave() {
  this.editGroup = false
  this.loading = true

  const uri = this.endpointPrefix + '/groups/' + this.groupid
  const dat = {
    name: this.groupDataEdited.name,
    description: this.groupDataEdited.description,
    idTariff: this.groupDataEdited.idTariff,
    idEvseToAdd: [],
  }

  // 同时等待API请求和5秒延迟，取最长等待时间
  await Promise.all([
    this.$axios.$put(uri, dat)
      .then(() => {
        this.$nuxt.$emit('show-notification', {
          text: 'updated',
          color: 'green',
        })
        this.loadData(this.groupid)
      })
      .catch((error) => {
        this.$nuxt.$emit('show-notification', {
          text: 'could not be updated !' + error.response.data,
          color: 'red',
        })
      }),
    new Promise(resolve => setTimeout(resolve, 5000))
  ])

  // 两个任务都完成后关闭加载状态
  this.loading = false
},

三、基础状态校验 #

确保组件的data中正确声明loading状态：

data() {
  return {
    // ...其他业务数据
    loading: false,
    editGroup: false
  }
}

内容的提问来源于stack exchange，提问作者Llexii