Angular 7 HTTP拦截器实现的加载动画在页面刷新时失效

嘿，这个问题我之前在项目里踩过坑！核心问题出在页面刷新/首次加载时的应用初始化顺序上——你的拦截器还没来得及完成注册，那些初始的REST请求就已经发出去了，自然没法触发加载动画。下面给你几个实用的解决方案，分不同场景来说：

页面刷新时，浏览器会优先加载页面静态资源并执行初始脚本，而你的HTTP拦截器通常是应用框架初始化流程的一部分。如果初始REST请求（比如获取用户信息、页面初始数据）是在拦截器注册完成前发送的，拦截器就捕获不到这些请求，加载动画自然不会触发。而编程导航或操作触发的请求，都是在应用完全初始化后发起的，所以拦截器能正常工作。

1. 确保拦截器在应用启动最早期注册 #

这是最通用的解决思路，核心是让拦截器在任何请求发送前就完成注册。

针对Angular项目 #

把拦截器注册到AppModule的providers中，同时用APP_INITIALIZER提前初始化加载状态服务，确保拦截器能及时生效：

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { LoadingInterceptor } from './loading.interceptor';
import { LoadingService } from './loading.service';

// 提前初始化加载服务
export function initLoadingService(loadingService: LoadingService) {
  return () => Promise.resolve(loadingService.init());
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    LoadingService,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoadingInterceptor,
      multi: true
    },
    {
      provide: APP_INITIALIZER,
      useFactory: initLoadingService,
      deps: [LoadingService],
      multi: true
    }
  ]
})
export class AppModule {}

针对Axios（React/Vue等项目） #

在项目入口文件（比如main.js/index.js）中，先注册Axios拦截器，再初始化应用：

// main.js
import axios from 'axios';
import LoadingService from './services/LoadingService';
import App from './App';
import { createRoot } from 'react-dom/client';

// 先实例化加载服务并注册拦截器
const loadingService = new LoadingService();

axios.interceptors.request.use(config => {
  loadingService.showLoading();
  return config;
}, error => {
  loadingService.hideLoading();
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  loadingService.hideLoading();
  return response;
}, error => {
  loadingService.hideLoading();
  return Promise.reject(error);
});

// 最后挂载应用
const root = createRoot(document.getElementById('root'));
root.render(<App />);

2. 手动处理初始页面加载的请求 #

如果有些初始请求是在HTML中直接触发的（比如fetch脚本或第三方资源请求），拦截器无法捕获，这时候可以：

• 把初始请求移到应用初始化完成后发送（比如在React的useEffect、Angular的ngOnInit中）
• 或者在页面加载时手动显示加载动画，直到所有初始请求完成：

<!-- index.html 中添加初始加载动画 -->
<div id="initial-loader" style="position:fixed;inset:0;background:#fff;display:flex;justify-content:center;align-items:center;font-size:1.2rem;">
  加载中...
</div>

// 入口文件中处理初始请求与动画隐藏
async function bootstrapApp() {
  try {
    // 先发送初始数据请求
    await axios.get('/api/initial-page-data');
    // 请求完成后隐藏初始加载动画
    document.getElementById('initial-loader').style.display = 'none';
    // 挂载应用
    const root = createRoot(document.getElementById('root'));
    root.render(<App />);
  } catch (err) {
    console.error('初始请求失败:', err);
    document.getElementById('initial-loader').textContent = '加载失败，请刷新重试';
  }
}

bootstrapApp();

3. 调整加载动画触发逻辑 #

不要完全依赖拦截器的请求拦截来显示动画，而是在应用启动时先主动显示动画，直到第一个响应返回或应用初始化完成：

// Angular AppComponent 示例
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoadingService } from './loading.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="loadingService.isLoading" class="loading-overlay">
      <div class="spinner"></div>
    </div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit {
  constructor(public loadingService: LoadingService, private http: HttpClient) {}

  ngOnInit() {
    // 页面加载时主动显示动画
    this.loadingService.showLoading();
    // 监听初始请求完成后隐藏动画
    this.http.get('/api/user-profile').subscribe({
      next: () => this.loadingService.hideLoading(),
      error: () => this.loadingService.hideLoading()
    });
  }
}

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