ArcoDesign组件全局网络请求进度条控制实战指南

1次阅读

没有评论

共计 1849 个字符，预计需要花费 5 分钟才能阅读完成。

在基于 ArcoDesign 开发中后台应用时，全局网络请求进度条的控制是一个常见但容易被忽视的问题。今天我想分享一下我在实际项目中遇到的坑以及解决方案，希望能帮助到正在遇到类似问题的同学。

首先说说为什么会遇到这个问题。在现代化的前端应用中，我们经常会有多个接口同时请求的情况。这时候如果每个请求都独立控制进度条，就会出现进度条闪烁、重复触发的问题。

页面加载时同时发起 3 个 API 请求，进度条会快速显示又隐藏 3 次
快速切换路由时，上一个页面的请求还没完成，新页面的请求又来了
某些请求非常快（比如 304 缓存），导致进度条刚出现就消失

这些问题都会给用户带来不好的体验，让人觉得应用很不稳定。

针对这个问题，我调研了三种常见的解决方案：

纯 CSS 方案
优点：实现简单，无 JS 依赖
缺点：无法感知实际请求状态，容易出现假进度
Promise.all 封装
优点：能准确知道所有请求完成时机
缺点：需要改造所有请求调用方式，侵入性强
请求队列 + 计数器
优点：对现有代码改动小，能准确跟踪请求状态
缺点：实现稍复杂

经过实践，我选择了第三种方案，因为它对现有代码的侵入性最小，效果也最稳定。

首先我们需要一个全局的请求计数器，来跟踪当前活跃的请求数量。这里用 axios 的拦截器来实现：

let activeRequests = 0;

// 请求拦截器
axios.interceptors.request.use(config => {if (activeRequests++ === 0) {store.commit('showProgress');
  }
  return config;
});

// 响应拦截器
axios.interceptors.response.use(
  response => {if (--activeRequests === 0) {store.commit('hideProgress');
    }
    return response;
  },
  error => {if (--activeRequests === 0) {store.commit('hideProgress');
    }
    return Promise.reject(error);
  }
);

接下来我们需要在 Vuex 或 Pinia 中管理进度条状态：

// store/modules/loading.js
export default {state: () => ({
    isLoading: false,
    timer: null
  }),
  mutations: {showProgress(state) {clearTimeout(state.timer);
      state.isLoading = true;
    },
    hideProgress(state) {
      // 设置最小显示时长 500ms
      state.timer = setTimeout(() => {state.isLoading = false;}, 500);
    }
  }
};

最后在 ArcoDesign 的进度条组件中使用这个状态：

<template>
  <a-spin 
    :loading="isLoading" 
    tip="加载中..."
    class="global-loading"
  />
</template>

<script>
import {mapState} from 'vuex';

export default {
  computed: {...mapState('loading', ['isLoading'])
  }
};
</script>

在实际实现过程中，我遇到了一些坑，这里分享给大家：