Angular Universal:跨客户端缓存外部HTTP调用

Question

我正在开发一个使用Angular Universal的Angular web应用程序，该应用程序在每个页面上都有几个外部API调用。

我正在尝试为那些跨客户端工作的API调用实现一个SSR缓存，也就是说：当应用程序由Client1呈现，并从Angular Universal服务器生成对Endpoint1lient2有AU呈现也调用Endpoint1的页面时，将存储并返回响应。

不幸的是，我不知道如何继续，因为我的理解是HTTP拦截器在这里不起作用，因为它们不会在不同的客户端之间存储数据。有些东西可能应该在server.ts中的Express级别实现，但我不知道具体是什么。

Answer 1

在一个有角度的通用项目中面临同样的问题，其中某些页面包含从另一个api获取的数据，并且所有客户端的数据都是相同的。但每次我都得去拿。在角侧没有找到任何有效的解决方案。所以我在我的express服务器上实现了一个机制。

首先，我知道哪些页面包含可以缓存的数据。因此，我编写了一个函数，检查客户端请求的页面的url，如果它有任何http调用，express服务器就会进行调用并获取数据。然后，我使用节点缓存将数据缓存在express服务器上，并在http调用之前进行检查，这样当另一个客户端请求同一页面时，数据已经在缓存中了。所以现在我可以从缓存中提供数据了。接下来，我使用提供程序将数据从server.ts发送到angular组件，因此angular现在可以访问数据。

服务器.ts

server.get('*', async (req, res) => {
var list = await getList(req.url);
res.render(indexHtml, {
req,
providers: [
{provide: APP_BASE_HREF, useValue: req.baseUrl},
{provide: 'REQUEST', useValue: req},
{provide: 'RESPONSE', useValue: res},
{provide: 'List', useValue: list},
],
});
});

getList函数是

getList(url: string){
if (/*checking for appropriate url*/) {
var val = // check cache for data;
if (val) {
return val;
}
let response = // http call as no cache data
if (response) {
//save data to cache for further   
}
return response.data;
}
return null
}

最后是角度分量

constructor(
@Optional() @Inject('List') private list: any,
) {
}

所以现在我可以把它和this.list一起使用了。这可能不是最好的方法。但它对我的案子起了作用。