Angular应用中添加loading spinner是否存在通用标准的实现方式？

推荐方案：封装全局请求拦截器 #

这是最适合全场景覆盖的实现方式，不需要每个业务接口单独写状态控制逻辑

• 如果你用的是axios/fetch这类请求库：
  • 请求拦截器阶段：在请求发出前直接把全局loading状态设为true
  • 响应拦截器阶段：不管请求成功/失败，在回调的最后统一把loading状态设为false
  • 可以加额外的白名单配置：比如不需要触发loading的轻量轮询接口，直接在拦截器里跳过状态变更逻辑
• 如果你用的是前端框架自带的请求方案：
  • 比如Vue的useFetch、React的React Query/SWR，可以直接封装通用的自定义hook，在hook内部统一处理loading状态的切换，所有业务场景调用封装后的hook即可

备选方案：页面/组件级局部控制 #

如果不同接口的loading需要对应到不同区域的spinner（不是全局统一的顶部/居中loading），可以用这个方案：

• 在发起请求的代码行之前手动将对应作用域的loading设为true
• 在Promise的finally回调里统一把loading设为false，不用分别在then和catch里写重复代码

示例代码（JS通用写法）：

const submitData = async () => {
  loading.value = true
  try {
    await api.submitForm(formData)
    // 业务成功逻辑
  } catch (err) {
    // 错误处理逻辑
  } finally {
    loading.value = false
  }
}

注意事项 #

• 避免多个并发请求导致loading被提前关闭：可以维护一个请求计数变量，每发一个请求计数+1，每结束一个请求计数-1，只有当计数归0的时候才把loading设为false
• 加最短展示时长防闪：如果请求响应太快（小于200ms），loading一闪而过体验很差，可以加个定时器，最短展示300ms再隐藏

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