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 TushevskyiBogdan Tushevskyi
14814
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)">
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
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)">
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
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)">
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
edited Nov 21 '18 at 8:43
Bogdan Tushevskyi
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
asked Nov 21 '18 at 8:36
Bogdan TushevskyiBogdan Tushevskyi
14814
14814
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
martinmartin
45.9k1193137
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 WijstTeun van der Wijst
580315
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 AriyaSuresh Kumar Ariya
4,8491217
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
martinmartin
45.9k1193137
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
martinmartin
45.9k1193137
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
martinmartin
45.9k1193137
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
martinmartin
45.9k1193137
answered Nov 21 '18 at 9:05
martinmartin
45.9k1193137
answered Nov 21 '18 at 9:05
martinmartin
45.9k1193137
answered Nov 21 '18 at 9:05
martinmartin
45.9k1193137
45.9k1193137
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 WijstTeun van der Wijst
580315
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 WijstTeun van der Wijst
580315
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 WijstTeun van der Wijst
580315
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 WijstTeun van der Wijst
580315
answered Nov 21 '18 at 8:44
Teun van der WijstTeun van der Wijst
580315
answered Nov 21 '18 at 8:44
Teun van der WijstTeun van der Wijst
580315
answered Nov 21 '18 at 8:44
Teun van der WijstTeun van der Wijst
580315
580315
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 AriyaSuresh Kumar Ariya
4,8491217
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 AriyaSuresh Kumar Ariya
4,8491217
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 AriyaSuresh Kumar Ariya
4,8491217
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 AriyaSuresh Kumar Ariya
4,8491217
answered Nov 21 '18 at 8:59
Suresh Kumar AriyaSuresh Kumar Ariya
4,8491217
answered Nov 21 '18 at 8:59
Suresh Kumar AriyaSuresh Kumar Ariya
4,8491217
answered Nov 21 '18 at 8:59
Suresh Kumar AriyaSuresh Kumar Ariya
4,8491217
4,8491217
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.
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
