wait for all pending request resolved and take value from last
I have a method getData() inside Angular app which calls on click every time when asc > desc sorting in the table is changed. If I click it 10 times in a row I will make 10 get request and data will assign to table every time when the request is resolved, so it makes it blinking till the last request. How can I waiting for data only for the last request and ignore another?
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
data$ is using in view with *ngFor
*ngFor="let item of (data$ | async)">
angular rxjs
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
add a comment |
I have a method getData() inside Angular app which calls on click every time when asc > desc sorting in the table is changed. If I click it 10 times in a row I will make 10 get request and data will assign to table every time when the request is resolved, so it makes it blinking till the last request. How can I waiting for data only for the last request and ignore another?
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
data$ is using in view with *ngFor
*ngFor="let item of (data$ | async)">
angular rxjs
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
add a comment |
I have a method getData() inside Angular app which calls on click every time when asc > desc sorting in the table is changed. If I click it 10 times in a row I will make 10 get request and data will assign to table every time when the request is resolved, so it makes it blinking till the last request. How can I waiting for data only for the last request and ignore another?
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
data$ is using in view with *ngFor
*ngFor="let item of (data$ | async)">
angular rxjs
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
I have a method getData() inside Angular app which calls on click every time when asc > desc sorting in the table is changed. If I click it 10 times in a row I will make 10 get request and data will assign to table every time when the request is resolved, so it makes it blinking till the last request. How can I waiting for data only for the last request and ignore another?
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
data$ is using in view with *ngFor
*ngFor="let item of (data$ | async)">
angular rxjs
angular rxjs
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
edited Nov 21 '18 at 8:43
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
asked Nov 21 '18 at 8:36
Bogdan Tushevskyi
12910
12910
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
The point is not calling directly getData() yourself but rather creating a Subject and stuffing search queries there. You can then use the Subject to create a chain that can unsubscribe from the previous requests:
private s$ = new Subject();
private result$ = s$.pipe(
takeUntil(this.ngUnsubscribe$),
switchMap(reqParams => this.endpointsService.getData(reqParams)),
);
getData(reqParams) {
this.s$.next(reqParams);
}
Then in your template:
*ngFor="let item of (result$ | async)">
The switchMap operator will unsubscribe from its inner Observable on every emission from its source.
Ideally you can also use debounceTime() before switchMap to avoid even creating so many request.
answered Nov 21 '18 at 9:05
martin
41.8k1184125
add a comment |
If I understand correctly you want to wait a certain period of time after a user interaction for the table to not change sorting and then apply the function?
You could do so with debounceTime()
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$),
debounceTime(1000),
distinctUntilChanged()
).subscribe((data) => {
this.data$.next(data);
}
}
debounceTime(1000) will wait for the sorting to be unchanged for 1 second, then it will fetch data
Reference: https://stackoverflow.com/a/50740491/4091337
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes thegetDatacall will only be executed if debounceTime allows so
– Teun van der Wijst
Nov 21 '18 at 8:51
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
add a comment |
You can achieve this using Delay operator.
endpointsService:
getData(){
return this.http.get(url).pipe(
delay(500)
)
}
Component:
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408051%2fwait-for-all-pending-request-resolved-and-take-value-from-last%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
The point is not calling directly getData() yourself but rather creating a Subject and stuffing search queries there. You can then use the Subject to create a chain that can unsubscribe from the previous requests:
private s$ = new Subject();
private result$ = s$.pipe(
takeUntil(this.ngUnsubscribe$),
switchMap(reqParams => this.endpointsService.getData(reqParams)),
);
getData(reqParams) {
this.s$.next(reqParams);
}
Then in your template:
*ngFor="let item of (result$ | async)">
The switchMap operator will unsubscribe from its inner Observable on every emission from its source.
Ideally you can also use debounceTime() before switchMap to avoid even creating so many request.
answered Nov 21 '18 at 9:05
martin
41.8k1184125
add a comment |
The point is not calling directly getData() yourself but rather creating a Subject and stuffing search queries there. You can then use the Subject to create a chain that can unsubscribe from the previous requests:
private s$ = new Subject();
private result$ = s$.pipe(
takeUntil(this.ngUnsubscribe$),
switchMap(reqParams => this.endpointsService.getData(reqParams)),
);
getData(reqParams) {
this.s$.next(reqParams);
}
Then in your template:
*ngFor="let item of (result$ | async)">
The switchMap operator will unsubscribe from its inner Observable on every emission from its source.
Ideally you can also use debounceTime() before switchMap to avoid even creating so many request.
answered Nov 21 '18 at 9:05
martin
41.8k1184125
add a comment |
The point is not calling directly getData() yourself but rather creating a Subject and stuffing search queries there. You can then use the Subject to create a chain that can unsubscribe from the previous requests:
private s$ = new Subject();
private result$ = s$.pipe(
takeUntil(this.ngUnsubscribe$),
switchMap(reqParams => this.endpointsService.getData(reqParams)),
);
getData(reqParams) {
this.s$.next(reqParams);
}
Then in your template:
*ngFor="let item of (result$ | async)">
The switchMap operator will unsubscribe from its inner Observable on every emission from its source.
Ideally you can also use debounceTime() before switchMap to avoid even creating so many request.
answered Nov 21 '18 at 9:05
martin
41.8k1184125
The point is not calling directly getData() yourself but rather creating a Subject and stuffing search queries there. You can then use the Subject to create a chain that can unsubscribe from the previous requests:
private s$ = new Subject();
private result$ = s$.pipe(
takeUntil(this.ngUnsubscribe$),
switchMap(reqParams => this.endpointsService.getData(reqParams)),
);
getData(reqParams) {
this.s$.next(reqParams);
}
Then in your template:
*ngFor="let item of (result$ | async)">
The switchMap operator will unsubscribe from its inner Observable on every emission from its source.
Ideally you can also use debounceTime() before switchMap to avoid even creating so many request.
answered Nov 21 '18 at 9:05
martin
41.8k1184125
answered Nov 21 '18 at 9:05
martin
41.8k1184125
answered Nov 21 '18 at 9:05
martin
41.8k1184125
answered Nov 21 '18 at 9:05
martin
41.8k1184125
41.8k1184125
add a comment |
add a comment |
If I understand correctly you want to wait a certain period of time after a user interaction for the table to not change sorting and then apply the function?
You could do so with debounceTime()
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$),
debounceTime(1000),
distinctUntilChanged()
).subscribe((data) => {
this.data$.next(data);
}
}
debounceTime(1000) will wait for the sorting to be unchanged for 1 second, then it will fetch data
Reference: https://stackoverflow.com/a/50740491/4091337
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes thegetDatacall will only be executed if debounceTime allows so
– Teun van der Wijst
Nov 21 '18 at 8:51
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
add a comment |
If I understand correctly you want to wait a certain period of time after a user interaction for the table to not change sorting and then apply the function?
You could do so with debounceTime()
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$),
debounceTime(1000),
distinctUntilChanged()
).subscribe((data) => {
this.data$.next(data);
}
}
debounceTime(1000) will wait for the sorting to be unchanged for 1 second, then it will fetch data
Reference: https://stackoverflow.com/a/50740491/4091337
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes thegetDatacall will only be executed if debounceTime allows so
– Teun van der Wijst
Nov 21 '18 at 8:51
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
add a comment |
If I understand correctly you want to wait a certain period of time after a user interaction for the table to not change sorting and then apply the function?
You could do so with debounceTime()
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$),
debounceTime(1000),
distinctUntilChanged()
).subscribe((data) => {
this.data$.next(data);
}
}
debounceTime(1000) will wait for the sorting to be unchanged for 1 second, then it will fetch data
Reference: https://stackoverflow.com/a/50740491/4091337
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
If I understand correctly you want to wait a certain period of time after a user interaction for the table to not change sorting and then apply the function?
You could do so with debounceTime()
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$),
debounceTime(1000),
distinctUntilChanged()
).subscribe((data) => {
this.data$.next(data);
}
}
debounceTime(1000) will wait for the sorting to be unchanged for 1 second, then it will fetch data
Reference: https://stackoverflow.com/a/50740491/4091337
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
answered Nov 21 '18 at 8:44
Teun van der Wijst
580215
580215
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes thegetDatacall will only be executed if debounceTime allows so
– Teun van der Wijst
Nov 21 '18 at 8:51
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
add a comment |
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes thegetDatacall will only be executed if debounceTime allows so
– Teun van der Wijst
Nov 21 '18 at 8:51
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
in this situation, debounceTime(1000) is not affected to the server request, because the request will fire and only after it debounceTime, or I'm wrong?
– Bogdan Tushevskyi
Nov 21 '18 at 8:49
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes the
getData call will only be executed if debounceTime allows so– Teun van der Wijst
Nov 21 '18 at 8:51
Here is an explanation of debounceTime: medium.com/aviabird/…. Yes the
getData call will only be executed if debounceTime allows so– Teun van der Wijst
Nov 21 '18 at 8:51
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
Yes, but it seems that I need to use debounceTime before the call to api.
– Bogdan Tushevskyi
Nov 21 '18 at 8:57
add a comment |
You can achieve this using Delay operator.
endpointsService:
getData(){
return this.http.get(url).pipe(
delay(500)
)
}
Component:
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
add a comment |
You can achieve this using Delay operator.
endpointsService:
getData(){
return this.http.get(url).pipe(
delay(500)
)
}
Component:
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
add a comment |
You can achieve this using Delay operator.
endpointsService:
getData(){
return this.http.get(url).pipe(
delay(500)
)
}
Component:
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
You can achieve this using Delay operator.
endpointsService:
getData(){
return this.http.get(url).pipe(
delay(500)
)
}
Component:
this.getData() {
this.endpointsService.getData(reqParams).pipe(
takeUntil(this.ngUnsubscribe$)
).subscribe((data) => {
this.data$.next(data);
}
}
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
answered Nov 21 '18 at 8:59
Suresh Kumar Ariya
4,4131215
4,4131215
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53408051%2fwait-for-all-pending-request-resolved-and-take-value-from-last%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
