Jquery ajax call inside a then function
So I need two ajax calls to get all the data. I am using jQuery's ajax call to achieve that. But then I am a bit confused at the execution order. Here is my problematic code:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")//correct
}).then(function () {
//second ajax
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second")//third
})
}).then(function () {
console.log("I am the third")//second
})
The output is
I am the first
I am the third
I am the second
Should not the thenwait for the second ajax to finish its job before proceeding?
The correct one:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")
}).then(function () {
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function () {
console.log("I am the second")
}).then(function(){
console.log("I am the third")
})
})
javascript jquery ajax promise
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
add a comment |
So I need two ajax calls to get all the data. I am using jQuery's ajax call to achieve that. But then I am a bit confused at the execution order. Here is my problematic code:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")//correct
}).then(function () {
//second ajax
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second")//third
})
}).then(function () {
console.log("I am the third")//second
})
The output is
I am the first
I am the third
I am the second
Should not the thenwait for the second ajax to finish its job before proceeding?
The correct one:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")
}).then(function () {
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function () {
console.log("I am the second")
}).then(function(){
console.log("I am the third")
})
})
javascript jquery ajax promise
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
add a comment |
So I need two ajax calls to get all the data. I am using jQuery's ajax call to achieve that. But then I am a bit confused at the execution order. Here is my problematic code:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")//correct
}).then(function () {
//second ajax
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second")//third
})
}).then(function () {
console.log("I am the third")//second
})
The output is
I am the first
I am the third
I am the second
Should not the thenwait for the second ajax to finish its job before proceeding?
The correct one:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")
}).then(function () {
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function () {
console.log("I am the second")
}).then(function(){
console.log("I am the third")
})
})
javascript jquery ajax promise
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
So I need two ajax calls to get all the data. I am using jQuery's ajax call to achieve that. But then I am a bit confused at the execution order. Here is my problematic code:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")//correct
}).then(function () {
//second ajax
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second")//third
})
}).then(function () {
console.log("I am the third")//second
})
The output is
I am the first
I am the third
I am the second
Should not the thenwait for the second ajax to finish its job before proceeding?
The correct one:
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first")
}).then(function () {
$.ajax({
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function () {
console.log("I am the second")
}).then(function(){
console.log("I am the third")
})
})
javascript jquery ajax promise
javascript jquery ajax promise
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
edited Nov 25 '18 at 1:09
Demi-Gods and Semi-Devils
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
asked Nov 25 '18 at 1:03
Demi-Gods and Semi-DevilsDemi-Gods and Semi-Devils
225
225
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
In the problematic code, you are simply missing a return.
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first");
}).then(function () {
return $.ajax({
^^^^^^
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second");
});
}).then(function () {
console.log("I am the third");
});
Without the return, there's nothing to inform the outer promise chain of the inner promise's exitence, hence the outer chain does not wait for the inner promise to settle before proceeding to the third stage.
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
add a comment |
The "second" $.ajax is initialized within the second .then, but that $.ajax isn't chained with anything else - the interpreter initializes the request and that's it, so when the end of the second .then is reached, the next .then (the third) executes immediately.
Try returning the second Promise instead - a subsequent .then will only wait for a Promise to resolve if that Promise is returned by the previous .then:
.then(function (data) {
console.log("I am the first")//correct
})
.then(function () {
//second ajax
return $.ajax({
// ...
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
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%2f53463808%2fjquery-ajax-call-inside-a-then-function%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
In the problematic code, you are simply missing a return.
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first");
}).then(function () {
return $.ajax({
^^^^^^
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second");
});
}).then(function () {
console.log("I am the third");
});
Without the return, there's nothing to inform the outer promise chain of the inner promise's exitence, hence the outer chain does not wait for the inner promise to settle before proceeding to the third stage.
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
add a comment |
In the problematic code, you are simply missing a return.
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first");
}).then(function () {
return $.ajax({
^^^^^^
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second");
});
}).then(function () {
console.log("I am the third");
});
Without the return, there's nothing to inform the outer promise chain of the inner promise's exitence, hence the outer chain does not wait for the inner promise to settle before proceeding to the third stage.
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
add a comment |
In the problematic code, you are simply missing a return.
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first");
}).then(function () {
return $.ajax({
^^^^^^
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second");
});
}).then(function () {
console.log("I am the third");
});
Without the return, there's nothing to inform the outer promise chain of the inner promise's exitence, hence the outer chain does not wait for the inner promise to settle before proceeding to the third stage.
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
In the problematic code, you are simply missing a return.
$.ajax({
type: "GET",
url: "/api/data",
dataType: "json"
}).then(function (data) {
console.log("I am the first");
}).then(function () {
return $.ajax({
^^^^^^
type: "GET",
url: "/api/lifecyclephase",
dataType: "json"
}).then(function (data) {
console.log("I am the second");
});
}).then(function () {
console.log("I am the third");
});
Without the return, there's nothing to inform the outer promise chain of the inner promise's exitence, hence the outer chain does not wait for the inner promise to settle before proceeding to the third stage.
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
answered Nov 25 '18 at 1:22
Roamer-1888Roamer-1888
15.4k42238
15.4k42238
add a comment |
add a comment |
The "second" $.ajax is initialized within the second .then, but that $.ajax isn't chained with anything else - the interpreter initializes the request and that's it, so when the end of the second .then is reached, the next .then (the third) executes immediately.
Try returning the second Promise instead - a subsequent .then will only wait for a Promise to resolve if that Promise is returned by the previous .then:
.then(function (data) {
console.log("I am the first")//correct
})
.then(function () {
//second ajax
return $.ajax({
// ...
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
add a comment |
The "second" $.ajax is initialized within the second .then, but that $.ajax isn't chained with anything else - the interpreter initializes the request and that's it, so when the end of the second .then is reached, the next .then (the third) executes immediately.
Try returning the second Promise instead - a subsequent .then will only wait for a Promise to resolve if that Promise is returned by the previous .then:
.then(function (data) {
console.log("I am the first")//correct
})
.then(function () {
//second ajax
return $.ajax({
// ...
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
add a comment |
The "second" $.ajax is initialized within the second .then, but that $.ajax isn't chained with anything else - the interpreter initializes the request and that's it, so when the end of the second .then is reached, the next .then (the third) executes immediately.
Try returning the second Promise instead - a subsequent .then will only wait for a Promise to resolve if that Promise is returned by the previous .then:
.then(function (data) {
console.log("I am the first")//correct
})
.then(function () {
//second ajax
return $.ajax({
// ...
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
The "second" $.ajax is initialized within the second .then, but that $.ajax isn't chained with anything else - the interpreter initializes the request and that's it, so when the end of the second .then is reached, the next .then (the third) executes immediately.
Try returning the second Promise instead - a subsequent .then will only wait for a Promise to resolve if that Promise is returned by the previous .then:
.then(function (data) {
console.log("I am the first")//correct
})
.then(function () {
//second ajax
return $.ajax({
// ...
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
answered Nov 25 '18 at 1:17
CertainPerformanceCertainPerformance
81.8k143967
81.8k143967
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%2f53463808%2fjquery-ajax-call-inside-a-then-function%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
