如何延迟1秒显示ngx spinner？isRequestServed赋值位置求助

原代码里全局的isRequestServed是引发异常的核心——所有HTTP请求共享这个变量，当某个请求完成后把它设为true，后续请求的spinnerLogic会因为这个全局状态判断为true而无法触发加载动画；如果有并发请求，还会出现状态混乱导致的循环或显示异常。

修复思路：移除全局isRequestServed，仅用请求计数(count)控制状态 #

我们只需要通过全局维护的count变量跟踪活跃请求数即可，不需要额外的状态标记：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const time = 900;
    // 类中全局初始化count为0（在构造函数中设置：this.count = 0;）
    const spinnerLogic = () => {
        // 延迟时间到后，只要还有未完成的请求，就显示spinner
        if (this.count > 0) {
            this.spinner.show();
        }
    };
    const onDataReceive = () => {
        this.count--;
        // 所有请求完成后隐藏spinner
        if (this.count === 0) {
            this.spinner.hide();
        }
    };

    // 拦截到请求时立即递增活跃请求数
    this.count++;

    const res$ = next.handle(req);
    const timeout$ = of(spinnerLogic).pipe(delay(time));
    // 请求在延迟前完成则执行空函数，不触发spinner
    const spinner$ = merge(res$.pipe(mapTo(() => {})), timeout$).pipe(first());
    
    spinner$.subscribe(f => f());
    return res$.pipe(finalize(onDataReceive));
}

关键调整说明 #

• 删掉全局isRequestServed变量，彻底避免跨请求的状态污染
• 每次拦截请求时立刻递增count，保证活跃请求数统计准确
• spinnerLogic改为判断count > 0：延迟时间到后，只要还有未完成的请求就显示加载动画
• onDataReceive只负责递减计数，计数归0时隐藏动画，逻辑更简洁清晰

这样修改后，不管是单个请求还是并发请求，都能正确控制加载动画的显示与隐藏，不会出现循环或异常问题。

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