Angular服务订阅二次调用不触发网络请求，返回旧值问题求助

核心原因分析 #

你遇到的问题是浏览器对GET请求的缓存导致的——虽然你在请求头里加了缓存禁用配置，但要么是头未正确生效，要么是浏览器依然复用了缓存结果；另外组件的订阅销毁逻辑存在错误（虽不直接导致缓存，但会引发内存泄漏）。

修复步骤 #

1. 修正组件的订阅销毁逻辑 #

你的代码里把订阅对象存在this.subscription，但销毁时误操作了方法this.getSubscription，导致无法正确取消订阅，修改如下：

ngOnDestroy(): void {
    if (this.subscription) {
        this.subscription.unsubscribe();
    }
}

2. 强制禁用浏览器GET缓存（两种方案选其一） #

方案一：URL添加随机参数（最可靠）

每次请求时给URL加时间戳参数，确保请求URL唯一，彻底避免浏览器缓存：

getService(options?: object): Observable<any> { 
    // 合并参数时先传默认配置，再传自定义配置，避免覆盖缓存头
    const optionsHttp = Object.assign({}, this.httpOptions, options);
    // 追加时间戳参数
    const uniqueUrl = `${this.url}?cacheBuster=${Date.now()}`;
    return this.http.get<any>(uniqueUrl, optionsHttp).pipe(
        retry(3)
    );
}

方案二：确保缓存请求头正确生效

如果不想修改URL，检查请求头的创建方式，改用set方法确保头被正确设置：

protected httpOptions = {
    headers: new HttpHeaders()
        .set('Content-Type', 'application/json; charset=utf-8')
        .set('Cache-Control', 'no-store, must-revalidate')
        .set('Pragma', 'no-cache')
        .set('Expires', 'Sat, 01 Jan 3000 00:00:00 GMT'),
    withCredentials: true
};

getService(options?: object): Observable<any> { 
    const optionsHttp = Object.assign({}, this.httpOptions, options);
    return this.http.get<any>(this.url, optionsHttp).pipe(
        retry(3)
    );
}

3. 额外检查项 #

• 确认服务器端没有返回Cache-Control: max-age=xxx这类缓存响应头，若存在需要后端配合修改，否则客户端请求头会被忽略。
• 检查项目中是否有HTTP拦截器实现了缓存逻辑，若有需调整拦截器，确保目标请求不被缓存。

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