角度传输状态不阻止重复http调用 [英] Angular Transfer State not preventing repeat http calls
问题描述
我将http请求作为服务注入到我的组件并从那里订阅。由于我在应用程序中引入了带有通用角度的服务器端渲染，因此页面上的结果至少重复两次。
我有点击时调用的方法，执行http请求到facebook的api
getAlbum（albumId：number）{
this.albumPhotos = this .state.get（ALBUM_PHOTOS_KEY，null as any）;
if（！this.albumPhotos）{
this.facebookService.getBachadiffAlbumPhotos（albumId）.subscribe（res => {
this.bachataPicsArray = res;
this.state.set（ALBUM_PHOTOS_KEY，res as any）;
}）;
}
}
我宣布const变量低于导入
const ALBUM_PHOTOS_KEY = makeStateKey（'albumPhotos'）;
我还宣布该物业
albumNames：any;
我假设我已完成所有导入，我的代码
你在如果您在服务器或浏览器端只执行一次而不是两次执行查询，则只需要以正确的方式处理您的服务。
伪逻辑：
- 如果服务器 - >执行http请求 - >设置传输状态值
- 如果浏览器 - >从转移状态获取价值
为此，您可以像下面这样增强您的服务：
@Injectable（）
导出类F acebookEventsService {
const ALBUM_PHOTOS_KEY：StateKey< number> ;;
构造函数（@Inject（PLATFORM_ID）private platformId：Object，private http：HttpClient）{
this.ALBUM_PHOTOS_KEY = makeStateKey（'albumPhotos'）;
}
getBachaDiffFacebookEvents（）：Observable< CalendarEvent []> {
//这里我们检查服务器或浏览器端是否为
if（isPlatformServer（this.platformId））{
返回this.getServerBachaDiffFacebookEvents（）;
} else {
返回this.getBrowserBachaDiffFacebookEvents（）;
}
}
getServerBachaDiffFacebookEvents（）：Observable< CalendarEvent []> {
返回this.http.get（this.facebookEventsUrl）
.map（res => {
//这里保存也导致转移状态
this.transferState.set（ALBUM_PHOTOS_KEY，calendarEvents）;
}）;
}
getBrowserBachaDiffFacebookEvents（）：Observable< CalendarEvent []> {
返回新的Observable（observer => {
observer.next（this.transferState.get（ALBUM_PHOTOS_KEY，null））;
}）;
}
}
更新
要使用此逻辑，您还需要：
-
TransferHttpCacheModule（在app.module.ts中初始化）。
TransferHttpCacheModule安装一个Http拦截器，避免客户端上的
重复HttpClient请求，用于请求在服务器端呈现应用程序时已经生成
。
https://github.com/angular/universal/tree/master/modules/common
-
服务器端的ServerTransferStateModule和BrowserTransferStateModule在客户端使用TransferState
https://angular.io/api/platform-browser/TransferState
PS：请注意，如果您这样做并增强了服务器，当然您不再需要在getAlbum（）方法中将值设置为transfer-state哟你显示在上面
更新2
如果你想处理服务器和浏览器方面，就像你在 gallery.component.ts 中所做的那样，你可以做类似以下的事情：
getAlbum（albumId：number）{
if（isPlatformServer（this.platformId））{
if（！this.albumPhotos）{
this.facebookService.getBachadiffAlbumPhotos（albumId）.subscribe（res => {
this.bachataPicsArray = res;
this.state.set（ALBUM_PHOTOS_KEY，null）;
}）;
}
} else {
this.albumPhotos = this.state.get（ALBUM_PHOTOS_KEY，null）;
}
}
更新3
问题是，您的操作 getAlbum 永远不会在服务器端调用。只有在呈现页面时，当用户单击特定操作时，此操作才会在浏览器端使用。因此，在该特定情况下使用转移状态是不正确/不需要的。
此外不确定您服务中的Observable是否正确订阅。
此处需要更改的内容正在运行：
gallery.component.ts
getAlbum（albumId：number）{
this.facebookService.getBachadiffAlbumPhotos（albumId）.subscribe（res => {
this.albumPhotos = res;
}）;
}
facebook-events.service.ts
getBachadiffAlbumPhotos（albumId：number）：Observable< Object> {
this.albumId = albumId;
this.facebookAlbumPhotosUrl =`https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token= $ {this.accessToken}`;
返回Observable.fromPromise（this.getPromiseBachaDiffAlbumPhotos（albumId））;
}
private getPromiseBachaDiffAlbumPhotos（albumId：number）：Promise< {}> {
返回新的承诺（（解决，拒绝）=> {
this.facebookAlbumPhotosUrl =`https://graph.facebook.com/v2.11/${this.albumId}/photos？ limit = 20& fields = images，id，link，height，width& access_token = $ {this.accessToken}`;
let facebookPhotos：FacebookPhoto [] = new Array（）;
让facebookPhoto：FacebookPhoto;
const params：HttpParams = new HttpParams（）;
this.http.get（this.facebookAlbumPhotosUrl，{params：params}）
.subscribe（ res => {
让facebookPhotoData = res ['data'];
for（让facebookPhotoData的照片）{
facebookPhotos.push （
facebookPhoto = {
id：photo.id，
image：photo.images [3] .source，
link：photo.link，
height：photo 。高，
宽度：photo.width
}）;
}
res olve（facebookPhotos）;
}，（错误）=> {
拒绝（错误）;
}）;
}）;
}
更新4
ngOnInit在服务器端执行，这意味着我的第一个答案必须在这种情况下使用。
此外，请注意，在服务器端，您无权访问该窗口，因此调用 $
使用 gallery.component.ts 你可以做这样的事情只运行一次http查询，但这不能解决你所有的问题，我认为还需要进一步改进。
ngOnInit（）{
if（isPlatformServer（this.platformId））{
this.facebookService.getBachadiffFacebookVideos（ ）.subscribe（res => {
this.bachataVidsArray = res;
this.state.set（VIDEOS_KEY，res as any）;
}）;
this.facebookService.getBachadiffFacebookLastClassPictures（）。subscribe（res => {
this.bachataPicsArray = res;
this.state.set（LAST_CLASS_PICTURES_KEY，res如任何）;
}）;
this.facebookService.getBachadiffAlbumNames（）。subscribe（res => {
this.bachataAlbumHeaderNames = res;
this.state.set（ALBUM_NAMES_KEY，res as any）;
}）;
} else {
$（'ul.tabs'）。tabs（）;
this.bachataVidsArray = this.state.get（VIDEOS_KEY，null as any）;
this.bachataPicsArray = this.state.get（LAST_CLASS_PICTURES_KEY，null as any）;
this.bachataAlbumHeaderNames = this.state.get（ALBUM_NAMES_KEY，null as any）;
}
}
I have the http request being made a service which is injected onto my component and subscribed to from there. Since I introduced server side rendering with angular universal to my application, the results on the page are repeated at least twice.
I have method which is called on click, which performs the http request to facebook's api
getAlbum(albumId: number) {
this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY, null as any);
if (!this.albumPhotos) {
this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
this.bachataPicsArray = res;
this.state.set(ALBUM_PHOTOS_KEY, res as any);
});
}
}
I declared the const variable below the imports
const ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');
And I also declared the property
albumNames: any;
I am assuming I have done all of the imports right I have the code on github in the gallery component.
You are on the right pass, you just need to handle your service differently if you are on the server or the browser side to perform your queries only once and not twice.
Pseudo logic:
- If server -> Do http request -> Set value in transfer-state
- If browser -> Get value from transfer-state
To do so, you could for example enhance your Service like following:
@Injectable()
export class FacebookEventsService {
const ALBUM_PHOTOS_KEY: StateKey<number>;
constructor(@Inject(PLATFORM_ID) private platformId: Object, private http: HttpClient) {
this.ALBUM_PHOTOS_KEY = makeStateKey('albumPhotos');
}
getBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
// Here we check if server or browser side
if (isPlatformServer(this.platformId)) {
return this.getServerBachaDiffFacebookEvents();
} else {
return this.getBrowserBachaDiffFacebookEvents();
}
}
getServerBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
return this.http.get(this.facebookEventsUrl)
.map(res => {
// Here save also result in transfer-state
this.transferState.set(ALBUM_PHOTOS_KEY, calendarEvents);
});
}
getBrowserBachaDiffFacebookEvents(): Observable<CalendarEvent[]> {
return new Observable(observer => {
observer.next(this.transferState.get(ALBUM_PHOTOS_KEY, null));
});
}
}
UPDATE
To use this logic you would also need:
TransferHttpCacheModule(to be initialized in app.module.ts).
TransferHttpCacheModule installs a Http interceptor that avoids duplicate HttpClient requests on the client, for requests that were already made when the application was rendered on the server side.
https://github.com/angular/universal/tree/master/modules/common
ServerTransferStateModuleon the server side andBrowserTransferStateModuleon the client side to use TransferState
https://angular.io/api/platform-browser/TransferState
P.S.: Note that if you do so and enhance your server, of course you would not need anymore to set the value in transfer-state in your getAlbum() method you displayed above
UPDATE 2
If you want to handle the server and browser side as you did in your gallery.component.ts, you could do something like the following:
getAlbum(albumId: number) {
if (isPlatformServer(this.platformId)) {
if (!this.albumPhotos) {
this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
this.bachataPicsArray = res;
this.state.set(ALBUM_PHOTOS_KEY, null);
});
}
} else {
this.albumPhotos = this.state.get(ALBUM_PHOTOS_KEY,null);
}
}
UPDATE 3
The thing is, your action getAlbum is never called on the server side. This action is only used on the browser side, once the page is rendered, when the user click on a specific action. Therefore, using transfer-state in that specific case isn't correct/needed.
Furthermore not sure that the Observable in your service was correctly subscribed.
Here what to change to make it running:
gallery.component.ts
getAlbum(albumId: number) {
this.facebookService.getBachadiffAlbumPhotos(albumId).subscribe(res => {
this.albumPhotos = res;
});
}
facebook-events.service.ts
getBachadiffAlbumPhotos(albumId: number): Observable<Object> {
this.albumId = albumId;
this.facebookAlbumPhotosUrl = `https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token=${this.accessToken}`;
return Observable.fromPromise(this.getPromiseBachaDiffAlbumPhotos(albumId));
}
private getPromiseBachaDiffAlbumPhotos(albumId: number): Promise<{}> {
return new Promise((resolve, reject) => {
this.facebookAlbumPhotosUrl = `https://graph.facebook.com/v2.11/${this.albumId}/photos?limit=20&fields=images,id,link,height,width&access_token=${this.accessToken}`;
let facebookPhotos: FacebookPhoto[] = new Array();
let facebookPhoto: FacebookPhoto;
const params: HttpParams = new HttpParams();
this.http.get(this.facebookAlbumPhotosUrl, {params: params})
.subscribe(res => {
let facebookPhotoData = res['data'];
for (let photo of facebookPhotoData) {
facebookPhotos.push(
facebookPhoto = {
id: photo.id,
image: photo.images[3].source,
link: photo.link,
height: photo.height,
width: photo.width
});
}
resolve(facebookPhotos);
}, (error) => {
reject(error);
});
});
}
UPDATE 4
ngOnInit is executed on the server side, this means that my very first answer here has to be use in this case.
Furthermore, also note that on the server side you doesn't have access to the window, therefore calling $
With gallery.component.ts you could do something like this to run only the http queries once but this won't solve all your problems, I think it will still need further improvements.
ngOnInit() {
if (isPlatformServer(this.platformId)) {
this.facebookService.getBachadiffFacebookVideos().subscribe(res => {
this.bachataVidsArray = res;
this.state.set(VIDEOS_KEY, res as any);
});
this.facebookService.getBachadiffFacebookLastClassPictures().subscribe(res => {
this.bachataPicsArray = res;
this.state.set(LAST_CLASS_PICTURES_KEY, res as any);
});
this.facebookService.getBachadiffAlbumNames().subscribe(res => {
this.bachataAlbumHeaderNames = res;
this.state.set(ALBUM_NAMES_KEY, res as any);
});
} else {
$('ul.tabs').tabs();
this.bachataVidsArray = this.state.get(VIDEOS_KEY, null as any);
this.bachataPicsArray = this.state.get(LAST_CLASS_PICTURES_KEY, null as any);
this.bachataAlbumHeaderNames = this.state.get(ALBUM_NAMES_KEY, null as any);
}
}
这篇关于角度传输状态不阻止重复http调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
