I have api call more than one time, but want to trigger ajax only once in Angular 6
I have a dashboard with dynamic widgets adding up, If a user adds two widgets which have same api call, it obviously hit two ajax call. How can I make sure, if the API is called once, the second call get the result of first one
angular rxjs
add a comment |
I have a dashboard with dynamic widgets adding up, If a user adds two widgets which have same api call, it obviously hit two ajax call. How can I make sure, if the API is called once, the second call get the result of first one
angular rxjs
You can usePromises
and sequentially execute them. Take a look at this SO question: stackoverflow.com/a/45649612/4091337
– Teun van der Wijst
Nov 20 '18 at 11:58
You can check Observable. shareReplay operator. this might help.
– Suresh Kumar Ariya
Nov 20 '18 at 12:35
add a comment |
I have a dashboard with dynamic widgets adding up, If a user adds two widgets which have same api call, it obviously hit two ajax call. How can I make sure, if the API is called once, the second call get the result of first one
angular rxjs
I have a dashboard with dynamic widgets adding up, If a user adds two widgets which have same api call, it obviously hit two ajax call. How can I make sure, if the API is called once, the second call get the result of first one
angular rxjs
angular rxjs
asked Nov 20 '18 at 11:53
imranashakeimranashake
134
134
You can usePromises
and sequentially execute them. Take a look at this SO question: stackoverflow.com/a/45649612/4091337
– Teun van der Wijst
Nov 20 '18 at 11:58
You can check Observable. shareReplay operator. this might help.
– Suresh Kumar Ariya
Nov 20 '18 at 12:35
add a comment |
You can usePromises
and sequentially execute them. Take a look at this SO question: stackoverflow.com/a/45649612/4091337
– Teun van der Wijst
Nov 20 '18 at 11:58
You can check Observable. shareReplay operator. this might help.
– Suresh Kumar Ariya
Nov 20 '18 at 12:35
You can use
Promises
and sequentially execute them. Take a look at this SO question: stackoverflow.com/a/45649612/4091337– Teun van der Wijst
Nov 20 '18 at 11:58
You can use
Promises
and sequentially execute them. Take a look at this SO question: stackoverflow.com/a/45649612/4091337– Teun van der Wijst
Nov 20 '18 at 11:58
You can check Observable. shareReplay operator. this might help.
– Suresh Kumar Ariya
Nov 20 '18 at 12:35
You can check Observable. shareReplay operator. this might help.
– Suresh Kumar Ariya
Nov 20 '18 at 12:35
add a comment |
1 Answer
1
active
oldest
votes
You can use the shareReplay
operator. It is caching the results and emits them to new subscribers without creating the stream again.
import { ajax } from 'rxjs/ajax';
import { tap, map, shareReplay } from 'rxjs/operators';
const endpoint = 'https://api.github.com/users?per_page=1'
const obs$ = ajax.getJSON(endpoint).pipe(
tap(() => console.log('Making BE call')),
shareReplay(1)
);
obs$.subscribe(x => console.log('[1]', x));
obs$.subscribe(x => console.log('[2]', x));
// Output:
// Making BE call
// [1] object
// [2] object
You can have a look at this small demo: https://stackblitz.com/edit/rxjs-eyk9y5
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%2f53392446%2fi-have-api-call-more-than-one-time-but-want-to-trigger-ajax-only-once-in-angula%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can use the shareReplay
operator. It is caching the results and emits them to new subscribers without creating the stream again.
import { ajax } from 'rxjs/ajax';
import { tap, map, shareReplay } from 'rxjs/operators';
const endpoint = 'https://api.github.com/users?per_page=1'
const obs$ = ajax.getJSON(endpoint).pipe(
tap(() => console.log('Making BE call')),
shareReplay(1)
);
obs$.subscribe(x => console.log('[1]', x));
obs$.subscribe(x => console.log('[2]', x));
// Output:
// Making BE call
// [1] object
// [2] object
You can have a look at this small demo: https://stackblitz.com/edit/rxjs-eyk9y5
add a comment |
You can use the shareReplay
operator. It is caching the results and emits them to new subscribers without creating the stream again.
import { ajax } from 'rxjs/ajax';
import { tap, map, shareReplay } from 'rxjs/operators';
const endpoint = 'https://api.github.com/users?per_page=1'
const obs$ = ajax.getJSON(endpoint).pipe(
tap(() => console.log('Making BE call')),
shareReplay(1)
);
obs$.subscribe(x => console.log('[1]', x));
obs$.subscribe(x => console.log('[2]', x));
// Output:
// Making BE call
// [1] object
// [2] object
You can have a look at this small demo: https://stackblitz.com/edit/rxjs-eyk9y5
add a comment |
You can use the shareReplay
operator. It is caching the results and emits them to new subscribers without creating the stream again.
import { ajax } from 'rxjs/ajax';
import { tap, map, shareReplay } from 'rxjs/operators';
const endpoint = 'https://api.github.com/users?per_page=1'
const obs$ = ajax.getJSON(endpoint).pipe(
tap(() => console.log('Making BE call')),
shareReplay(1)
);
obs$.subscribe(x => console.log('[1]', x));
obs$.subscribe(x => console.log('[2]', x));
// Output:
// Making BE call
// [1] object
// [2] object
You can have a look at this small demo: https://stackblitz.com/edit/rxjs-eyk9y5
You can use the shareReplay
operator. It is caching the results and emits them to new subscribers without creating the stream again.
import { ajax } from 'rxjs/ajax';
import { tap, map, shareReplay } from 'rxjs/operators';
const endpoint = 'https://api.github.com/users?per_page=1'
const obs$ = ajax.getJSON(endpoint).pipe(
tap(() => console.log('Making BE call')),
shareReplay(1)
);
obs$.subscribe(x => console.log('[1]', x));
obs$.subscribe(x => console.log('[2]', x));
// Output:
// Making BE call
// [1] object
// [2] object
You can have a look at this small demo: https://stackblitz.com/edit/rxjs-eyk9y5
answered Nov 20 '18 at 21:34
BeneBene
35529
35529
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%2f53392446%2fi-have-api-call-more-than-one-time-but-want-to-trigger-ajax-only-once-in-angula%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
You can use
Promises
and sequentially execute them. Take a look at this SO question: stackoverflow.com/a/45649612/4091337– Teun van der Wijst
Nov 20 '18 at 11:58
You can check Observable. shareReplay operator. this might help.
– Suresh Kumar Ariya
Nov 20 '18 at 12:35