title: Jquery ajax call inside a then function
body: <p>So I need two ajax calls to get all the data. I am using <code>jQuery</code>'s ajax call to achieve that. But then I am a bit confused at the execution order. Here is my problematic code:</p>
  
  <pre><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
   })
  </code></pre>
  
  <p>The output is </p>
  
  <pre><code>I am the first
  I am the third
  I am the second
  </code></pre>
  
  <p>Should not the <code>then</code>wait for the second <code>ajax</code> to finish its job before proceeding?</p>
  
  <p>The correct one:</p>
  
  <pre><code>$.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")
    })
  })
  </code></pre>