Cancel local requests on component destroy
Consider you have some component e.g. autocomplete that sends GET request to server:
...
someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
someObjet.prop = result;
});
vm.$onDestroy = () => {
someObject = null;
}
If component is destroyed while request is pending, callback will throw js error.
I know that in this concrete example I can solve this using simple If, however quite obvious that it is better to canel this request:
var canceler = $q.defer();
vm.search = someFactory.getHttp(params, canceler)...
vm.$onDestroy = () => {
canceler.resolve();
someObject = null;
}
This works perfectly, but having such code in each component seems weird. I would like to have something like:
vm.search = someFactory.getHttp(params, $scope.destroyPromise)
But such thing does not seem to exist...
Question: Is there any easy way to cancel requests on component destroy?
both in Angularjs or in Angular
angularjs
edited Nov 14 '18 at 11:59
yannick
432114
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
add a comment |
Consider you have some component e.g. autocomplete that sends GET request to server:
...
someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
someObjet.prop = result;
});
vm.$onDestroy = () => {
someObject = null;
}
If component is destroyed while request is pending, callback will throw js error.
I know that in this concrete example I can solve this using simple If, however quite obvious that it is better to canel this request:
var canceler = $q.defer();
vm.search = someFactory.getHttp(params, canceler)...
vm.$onDestroy = () => {
canceler.resolve();
someObject = null;
}
This works perfectly, but having such code in each component seems weird. I would like to have something like:
vm.search = someFactory.getHttp(params, $scope.destroyPromise)
But such thing does not seem to exist...
Question: Is there any easy way to cancel requests on component destroy?
both in Angularjs or in Angular
angularjs
edited Nov 14 '18 at 11:59
yannick
432114
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
add a comment |
Consider you have some component e.g. autocomplete that sends GET request to server:
...
someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
someObjet.prop = result;
});
vm.$onDestroy = () => {
someObject = null;
}
If component is destroyed while request is pending, callback will throw js error.
I know that in this concrete example I can solve this using simple If, however quite obvious that it is better to canel this request:
var canceler = $q.defer();
vm.search = someFactory.getHttp(params, canceler)...
vm.$onDestroy = () => {
canceler.resolve();
someObject = null;
}
This works perfectly, but having such code in each component seems weird. I would like to have something like:
vm.search = someFactory.getHttp(params, $scope.destroyPromise)
But such thing does not seem to exist...
Question: Is there any easy way to cancel requests on component destroy?
both in Angularjs or in Angular
angularjs
edited Nov 14 '18 at 11:59
yannick
432114
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
Consider you have some component e.g. autocomplete that sends GET request to server:
...
someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
someObjet.prop = result;
});
vm.$onDestroy = () => {
someObject = null;
}
If component is destroyed while request is pending, callback will throw js error.
I know that in this concrete example I can solve this using simple If, however quite obvious that it is better to canel this request:
var canceler = $q.defer();
vm.search = someFactory.getHttp(params, canceler)...
vm.$onDestroy = () => {
canceler.resolve();
someObject = null;
}
This works perfectly, but having such code in each component seems weird. I would like to have something like:
vm.search = someFactory.getHttp(params, $scope.destroyPromise)
But such thing does not seem to exist...
Question: Is there any easy way to cancel requests on component destroy?
both in Angularjs or in Angular
angularjs
angularjs
edited Nov 14 '18 at 11:59
yannick
432114
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
edited Nov 14 '18 at 11:59
yannick
432114
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
edited Nov 14 '18 at 11:59
yannick
432114
edited Nov 14 '18 at 11:59
yannick
432114
edited Nov 14 '18 at 11:59
yannick
432114
432114
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
asked Nov 14 '18 at 10:30
Petr AveryanovPetr Averyanov
6,66811223
6,66811223
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
One thing I've done in Angular is use RXjs for requests, using subscriptions, and adding those subscriptions to an array that we iterate over and cancel on destroy, like this:
import { Component, OnInit, OnDestroy} from "@angular/core";
import { ActivatedRoute } from "@angular/router";
export class AppComponent implements OnInit, OnDestroy {
private subscriptions = ;
constructor(private route AppRoute) {}
ngOnInit() {
this.subscriptions.push(this.route.data.subscribe());
}
ngOnDestroy() {
for (let subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
}
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
add a comment |
Why not assign the created object to an object that doesn't get destroyed? This way your behaviour is maintained and the you can do a simple check to prevent any errors.
...
var baseObj = {};
baseObj.someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
if (baseObj.someObject != null) {
baseObj.someObjet.prop = result;
}
});
vm.$onDestroy = () => {
baseObj.someObject = null;
}
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
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%2f53298051%2fcancel-local-requests-on-component-destroy%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
One thing I've done in Angular is use RXjs for requests, using subscriptions, and adding those subscriptions to an array that we iterate over and cancel on destroy, like this:
import { Component, OnInit, OnDestroy} from "@angular/core";
import { ActivatedRoute } from "@angular/router";
export class AppComponent implements OnInit, OnDestroy {
private subscriptions = ;
constructor(private route AppRoute) {}
ngOnInit() {
this.subscriptions.push(this.route.data.subscribe());
}
ngOnDestroy() {
for (let subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
}
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
add a comment |
One thing I've done in Angular is use RXjs for requests, using subscriptions, and adding those subscriptions to an array that we iterate over and cancel on destroy, like this:
import { Component, OnInit, OnDestroy} from "@angular/core";
import { ActivatedRoute } from "@angular/router";
export class AppComponent implements OnInit, OnDestroy {
private subscriptions = ;
constructor(private route AppRoute) {}
ngOnInit() {
this.subscriptions.push(this.route.data.subscribe());
}
ngOnDestroy() {
for (let subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
}
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
add a comment |
One thing I've done in Angular is use RXjs for requests, using subscriptions, and adding those subscriptions to an array that we iterate over and cancel on destroy, like this:
import { Component, OnInit, OnDestroy} from "@angular/core";
import { ActivatedRoute } from "@angular/router";
export class AppComponent implements OnInit, OnDestroy {
private subscriptions = ;
constructor(private route AppRoute) {}
ngOnInit() {
this.subscriptions.push(this.route.data.subscribe());
}
ngOnDestroy() {
for (let subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
}
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
One thing I've done in Angular is use RXjs for requests, using subscriptions, and adding those subscriptions to an array that we iterate over and cancel on destroy, like this:
import { Component, OnInit, OnDestroy} from "@angular/core";
import { ActivatedRoute } from "@angular/router";
export class AppComponent implements OnInit, OnDestroy {
private subscriptions = ;
constructor(private route AppRoute) {}
ngOnInit() {
this.subscriptions.push(this.route.data.subscribe());
}
ngOnDestroy() {
for (let subscription of this.subscriptions) {
subscription.unsubscribe();
}
}
}
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
answered Nov 21 '18 at 18:34
Jordan StubblefieldJordan Stubblefield
565
565
add a comment |
add a comment |
Why not assign the created object to an object that doesn't get destroyed? This way your behaviour is maintained and the you can do a simple check to prevent any errors.
...
var baseObj = {};
baseObj.someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
if (baseObj.someObject != null) {
baseObj.someObjet.prop = result;
}
});
vm.$onDestroy = () => {
baseObj.someObject = null;
}
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
add a comment |
Why not assign the created object to an object that doesn't get destroyed? This way your behaviour is maintained and the you can do a simple check to prevent any errors.
...
var baseObj = {};
baseObj.someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
if (baseObj.someObject != null) {
baseObj.someObjet.prop = result;
}
});
vm.$onDestroy = () => {
baseObj.someObject = null;
}
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
add a comment |
Why not assign the created object to an object that doesn't get destroyed? This way your behaviour is maintained and the you can do a simple check to prevent any errors.
...
var baseObj = {};
baseObj.someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
if (baseObj.someObject != null) {
baseObj.someObjet.prop = result;
}
});
vm.$onDestroy = () => {
baseObj.someObject = null;
}
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
Why not assign the created object to an object that doesn't get destroyed? This way your behaviour is maintained and the you can do a simple check to prevent any errors.
...
var baseObj = {};
baseObj.someObject = create();
vm.search = someFactory.getHttp(params).then(result => {
if (baseObj.someObject != null) {
baseObj.someObjet.prop = result;
}
});
vm.$onDestroy = () => {
baseObj.someObject = null;
}
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
answered Nov 25 '18 at 6:43
TheChetanTheChetan
2,35311932
2,35311932
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
add a comment |
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
I gave very-very simple example. E.g. callback may also call some statefull factory methods (and yes statefull factories are bad, but sometimes it saves tons of code lines) -- so I do not want to think about "How write callback, so it wont throw errrors" -- I want this callback be never executed one component is destroyed.
– Petr Averyanov
Nov 28 '18 at 11:04
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%2f53298051%2fcancel-local-requests-on-component-destroy%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
