title: Uncaught in promise error but getting result from first call
body: <p>I have two AJAX calls, the second one depends on the first one, so I decided to use promises. I keep getting <strong>Uncaught (in promise) abc123</strong> error in console. Note that <code>abc123</code> is the id I am expecting from the first AJAX call. The second AJAX call never goes inside success function.</p>
  
  <pre><code>var promise = new Promise(function(reject, resolve) {
    $.ajax({
      url: url1, 
      dataType: 'json',
      success: function (obj1) {
        console.log("Got obj1");
        resolve(obj1.id);
      }
    });
  });
  
  promise.then((id)=&gt; {
    $.ajax({
      url: url2, 
      dataType: 'json',
      success: function (obj2) {
        console.log("Got obj2");
      }
    });
  });
  </code></pre>
  
  <p>The structure looks exactly the same as <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise" rel="nofollow noreferrer">Basic Example</a>. I am really confused about what I am doing wrong. </p>