Angular 如何创建一个自动轮询服务来保持数据在数据库中的最新状态

我是Angular的新手，我很难弄清楚如何通过设置间隔的API请求自动刷新服务数据。这就是所讨论的服务，我打算更新给定计时器上的

shopPreferences

字段：

@Injectable({ providedIn: 'root' })
export class ShopManagerService {
    private shopPreferences: ShopPreferences = null;

    setPreferences(shopPreferences: ShopPreferences) {
        this.shopPreferences = shopPreferences;
    }

    isDeliverySlotsActive(){
        if(this.shopPreferences == null || this.shopPreferences.delivery_slots == null) return;
        return this.shopPreferences.delivery_slots;
    }

    getCurrencySymbol(){
       if(this.shopPreferences == null || this.shopPreferences.currency_display_symbol == null) return;
       return this.shopPreferences.currency_display_symbol;
    }
    ...
    // more data getters
}

目前，此

shopPreferences

字段是在初始化某个组件时使用单独的

APIManagerDrive

设置的，如下所示：

@Injectable({ providedIn: 'root' })
export class ApiManagerService {

    private token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MjcwMjA3MiwidGltZXN0YW1wIjoiMjAyMS0wNC0wOSAwOToxNToxNS4';

    constructor(private http: HttpClient) {}

    fetchShopPreferences(id: string) {
        const url = "https://commerce.ww-api.com/commerceapi/v1/front/front_url/" + id + "/";
        return this.http
            .get<ShopPreferences>(url, {
                headers: new HttpHeaders({
                    token: this.token,
                }),
            });
    }
    ...
    // more api requests
}

@Injectable（{providedIn:'root'}）
导出类ApiManagerService{
私有令牌='EYJ0ExaiioIjkv1qilchBgcioIjiuzi1nij9.EYJPZCI6MJCWMJA3MiWidGLTZN0YW1WIJOIMJAYMS0WNC0WOSAWOTOXNTOXNS4'；
构造函数（私有http:HttpClient）{}
fetchShopPreferences（id:string）{
常量url=”https://commerce.ww-api.com/commerceapi/v1/front/front_url/“+id+”/”；
返回此文件。http
.get（url{
标题：新的HttpHeaders({
token:this.token，
}),
});
}
...
//更多api请求
}

---

如何转换代码，使

ShopManagerService

能够处理API请求，并使

shopPreferences

对象以-2分钟为间隔保持最新？

在删除对

fetchShopPreferences

的现有调用的同时，可以尝试类似的操作。您必须为interval设置

id

属性，才能知道fetch调用使用什么（或者如果是静态调用，则直接将其作为参数提供）：

@Injectable（{providedIn:'root'}）
导出类ApiManagerService{
私有令牌='EYJ0ExaiioIjkv1qilchBgcioIjiuzi1nij9.EYJPZCI6MJCWMJA3MiWidGLTZN0YW1WIJOIMJAYMS0WNC0WOSAWOTOXNTOXNS4'；
public id:string；//需要时在何处更新此
构造函数（私有http:HttpClient，私有shopManagerService:shopManagerService）{
间隔（120000）。管道(
switchMap（（）=>fetchShopPreferences（this.id）.pipe(
第一个（）
)
)
.认购（（res）{
shopManagerService.setPreferences（res）；
});
}
fetchShopPreferences（id:string）{
常量url=”https://commerce.ww-api.com/commerceapi/v1/front/front_url/“+id+”/”；
返回此文件。http
.get（url{
标题：新的HttpHeaders({
token:this.token，
}),
});
}
...
//更多api请求
}

您在哪里调用

fetchShopPreferences

？@Chrillewoodz正在我的一个组件中调用它。组件中注入了

ShopManagerService

和

apimagerservice

。这样我就调用了

fetchShopPreferences

和

setPreferences

（我定义了一个订阅）。但是，不能在此组件中设置此属性，因为它应该在初始化服务时设置，并且在给定的时间段内保持最新。感谢您的回复。我即将尝试您的解决方案，但我似乎无法理解我将在何处调用

setPreferences

，以便设置

shopPreferences

属性。你介意澄清一下这部分吗？@ManuelBrás更新了。我在这段时间里终于弄明白了。谢谢您，好先生，您的解决方案有效！另外，关于

id

字段：该属性将在用户登录其店铺后设置（从店铺所有者的角度将其视为Uber Eats）。当

id

未设置时，构造函数内部的调用会发生什么情况？当我没有问题地获得这个属性时，我可以使用

setId（）

方法吗？@ManuelBrás你甚至不需要函数来设置它，直接使用这个属性就可以了。在运行获取之前，可以在间隔管道中设置一个

过滤器

，以检查是否设置了id。如果不是，它将跳过它。或者使用一个函数并将属性设置为私有，以使代码更严格。

@Injectable({ providedIn: 'root' })
export class ApiManagerService {

    private token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MjcwMjA3MiwidGltZXN0YW1wIjoiMjAyMS0wNC0wOSAwOToxNToxNS4';

    public id: string; // Update this where/when you need to

    constructor(private http: HttpClient, private shopManagerService: ShopManagerService) {
      interval(120000).pipe(
        switchMap(() => fetchShopPreferences(this.id).pipe(
          first())
        )
      )
      .subscribe((res) {
        shopManagerService.setPreferences(res);
      });
    }

    fetchShopPreferences(id: string) {
        const url = "https://commerce.ww-api.com/commerceapi/v1/front/front_url/" + id + "/";
        return this.http
            .get<ShopPreferences>(url, {
                headers: new HttpHeaders({
                    token: this.token,
                }),
            });
    }
    ...
    // more api requests
}