Vue - automatic API call based on URL
I came across a pattern I never heard of today.
I've seen a Vue application with a front end mirroring the back end, meaning that:
xyz.com/customers/customer_id
Is automatically routed to a request to:
xyz.com/backend/customers/customer_id
before the component loads.
This is utterly annoying because you can't mock components easily without disabling either the route guard (which disables all the components that are already dependent on the response) or resort to always prioritize the backend before even trying ideas on the front end. Also if I had a component that only displays a local img, I'm tied in having a request sent to the server for no purpose.
I only considered a safe option (up to now) leveraging lifecycle hooks to load data.
Is this even a pattern?
Has this some utility that I have missed?
Thanks. If the question is too open, notify me and I'll take it down, but I couldn't find anything on the subject, if this is an actual pattern and whether has use cases that are helpful.
javascript vue.js
asked Nov 23 '18 at 0:56
Gigi
956
add a comment |
I came across a pattern I never heard of today.
I've seen a Vue application with a front end mirroring the back end, meaning that:
xyz.com/customers/customer_id
Is automatically routed to a request to:
xyz.com/backend/customers/customer_id
before the component loads.
This is utterly annoying because you can't mock components easily without disabling either the route guard (which disables all the components that are already dependent on the response) or resort to always prioritize the backend before even trying ideas on the front end. Also if I had a component that only displays a local img, I'm tied in having a request sent to the server for no purpose.
I only considered a safe option (up to now) leveraging lifecycle hooks to load data.
Is this even a pattern?
Has this some utility that I have missed?
Thanks. If the question is too open, notify me and I'll take it down, but I couldn't find anything on the subject, if this is an actual pattern and whether has use cases that are helpful.
javascript vue.js
asked Nov 23 '18 at 0:56
Gigi
956
I think this should be asked in exchange. But Just my two cents about this. I never see a pattern like this before, maybe the dev think this is clever and useful but if api calls are made automatically, how will you handle a route component that doesn't need to call to api? sure 404 will be thrown but that alone still consumes bandwith.
– keysl
Nov 23 '18 at 1:04
More when the promise rejects on 404 the route is aborted...
– Gigi
Nov 23 '18 at 1:13
add a comment |
I came across a pattern I never heard of today.
I've seen a Vue application with a front end mirroring the back end, meaning that:
xyz.com/customers/customer_id
Is automatically routed to a request to:
xyz.com/backend/customers/customer_id
before the component loads.
This is utterly annoying because you can't mock components easily without disabling either the route guard (which disables all the components that are already dependent on the response) or resort to always prioritize the backend before even trying ideas on the front end. Also if I had a component that only displays a local img, I'm tied in having a request sent to the server for no purpose.
I only considered a safe option (up to now) leveraging lifecycle hooks to load data.
Is this even a pattern?
Has this some utility that I have missed?
Thanks. If the question is too open, notify me and I'll take it down, but I couldn't find anything on the subject, if this is an actual pattern and whether has use cases that are helpful.
javascript vue.js
asked Nov 23 '18 at 0:56
Gigi
956
I came across a pattern I never heard of today.
I've seen a Vue application with a front end mirroring the back end, meaning that:
xyz.com/customers/customer_id
Is automatically routed to a request to:
xyz.com/backend/customers/customer_id
before the component loads.
This is utterly annoying because you can't mock components easily without disabling either the route guard (which disables all the components that are already dependent on the response) or resort to always prioritize the backend before even trying ideas on the front end. Also if I had a component that only displays a local img, I'm tied in having a request sent to the server for no purpose.
I only considered a safe option (up to now) leveraging lifecycle hooks to load data.
Is this even a pattern?
Has this some utility that I have missed?
Thanks. If the question is too open, notify me and I'll take it down, but I couldn't find anything on the subject, if this is an actual pattern and whether has use cases that are helpful.
javascript vue.js
javascript vue.js
asked Nov 23 '18 at 0:56
Gigi
956
asked Nov 23 '18 at 0:56
Gigi
956
asked Nov 23 '18 at 0:56
Gigi
956
asked Nov 23 '18 at 0:56
Gigi
956
asked Nov 23 '18 at 0:56
Gigi
956
956
I think this should be asked in exchange. But Just my two cents about this. I never see a pattern like this before, maybe the dev think this is clever and useful but if api calls are made automatically, how will you handle a route component that doesn't need to call to api? sure 404 will be thrown but that alone still consumes bandwith.
– keysl
Nov 23 '18 at 1:04
More when the promise rejects on 404 the route is aborted...
– Gigi
Nov 23 '18 at 1:13
add a comment |
I think this should be asked in exchange. But Just my two cents about this. I never see a pattern like this before, maybe the dev think this is clever and useful but if api calls are made automatically, how will you handle a route component that doesn't need to call to api? sure 404 will be thrown but that alone still consumes bandwith.
– keysl
Nov 23 '18 at 1:04
More when the promise rejects on 404 the route is aborted...
– Gigi
Nov 23 '18 at 1:13
I think this should be asked in exchange. But Just my two cents about this. I never see a pattern like this before, maybe the dev think this is clever and useful but if api calls are made automatically, how will you handle a route component that doesn't need to call to api? sure 404 will be thrown but that alone still consumes bandwith.
– keysl
Nov 23 '18 at 1:04
I think this should be asked in exchange. But Just my two cents about this. I never see a pattern like this before, maybe the dev think this is clever and useful but if api calls are made automatically, how will you handle a route component that doesn't need to call to api? sure 404 will be thrown but that alone still consumes bandwith.
– keysl
Nov 23 '18 at 1:04
More when the promise rejects on 404 the route is aborted...
– Gigi
Nov 23 '18 at 1:13
More when the promise rejects on 404 the route is aborted...
– Gigi
Nov 23 '18 at 1:13
add a comment |
0
active
oldest
votes
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%2f53439523%2fvue-automatic-api-call-based-on-url%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53439523%2fvue-automatic-api-call-based-on-url%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
I think this should be asked in exchange. But Just my two cents about this. I never see a pattern like this before, maybe the dev think this is clever and useful but if api calls are made automatically, how will you handle a route component that doesn't need to call to api? sure 404 will be thrown but that alone still consumes bandwith.
– keysl
Nov 23 '18 at 1:04
More when the promise rejects on 404 the route is aborted...
– Gigi
Nov 23 '18 at 1:13