title: AngularJS $http POST request different results with then and success
body: <p>Something is driving me nuts; maybe someone can help me out with the following? :</p>
  
  <p>I am using <strong>AngularJS 1.2.26</strong> (have to because IE8 needs to be supported)</p>
  
  <p>I have to invoke some backend services that were initially build for a backbone frontend. I managed to do that in the following way:</p>
  
  <pre><code>$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: this._transformRequest,
    data: formData
  })
  .success(function (data) {
    // bla bla not relevant
  }).error(function (error) {
    // bla bla not relevant
  });
  </code></pre>
  
  <p>Now i try to work with the then function as i find that more consequent, so i change the code into:</p>
  
  <pre><code>$http({
    method: 'POST',
    url: url,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    transformRequest: this._transformRequest,
    data: formData
  }).then(
    function (response) {
      // not relevant
    }, function (error) {
      // not relevant
    });
  </code></pre>
  
  <p>According to me, in theory this should have the same result as the initial implementation, however to my surprise the request now fails on the server. While debugging I noticed that the result of the transform request function delivers a very different result in both scenario's in the request that is handled with success and error the result of transform request is as follows:</p>
  
  <blockquote>
    <p>com.bank.token.session=XXXXX&amp;model=%7B%22relatieRol%22%3A%22AANVRAGER%22%2C%22evaUitgevoerdDat%22%3Anull%2C%22sfhUitgevoerdDat%22%3Anull%2C%22bkrUitgevoerdDat%22%3Anull%2C%22bkrBekendCd%22%3A%22GOED_BEKEND%22%7D</p>
  </blockquote>
  
  <p>When i use the 'then' function as the way to handle the result the transformRequest function returns the following (wrong) result:</p>
  
  <blockquote>
    <p>com.bank.token.session=XXXXXXXXXXX&amp;model=%7B%22data%22%3A%7B%22relatieRol%22%3A%22AANVRAGER%22%2C%22evaUitgevoerdDat%22%3Anull%2C%22sfhUitgevoerdDat%22%3Anull%2C%22bkrUitgevoerdDat%22%3Anull%7D%2C%22status%22%3A200%2C%22config%22%3A%7B%22method%22%3A%22POST%22%2C%22transformResponse%22%3A%5Bnull%5D%2C%22url%22%3A%22http%3A%2F%2Flocalhost%2Femployee%2Findex.html%2Ffoo-web%2Fxchannel-foo-secure-portlet%2F1598792178%2Fver%3D2.0%2Fresource%2Fid%3Dfoo-fetch-%2Frparam%3Dportal%3DfooPortal.wsp%22%2C%22headers%22%3A%7B%22Content-Type%22%3A%22application%2Fx-www-form-urlencoded%22%2C%22Accept%22%3A%22application%2Fjson%2C%20text%2Fplain%2C%20*%2F*%22%7D%2C%22data%22%3A%7B%22com.bank.token.session%22%3A%22XXXXXXXXXX%22%2C%22model%22%3A%22%7B%5C%22relatieRol%5C%22%3A%5C%22AANVRAGER%5C%22%7D%22%7D%7D%2C%22statusText%22%3A%22OK%22%2C%22bkrBekendCd%22%3A%22GOED_BEKEND%22%7D</p>
  </blockquote>
  
  <p>This really surprises me; how can the handler on the $http service influence the way the request is handled? I would like to use 'then' for handling my $http POST; but it seems not to work. Anybody knows why? Many thanks in advance!</p>
  
  <p>my transformRequest function looks like this:</p>
  
  <pre><code>        _transformRequest: function (obj) {
              var str = [];
              for (var p in obj) {
                  if (obj.hasOwnProperty(p)) {
                      str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                  }
              }
  
              console.log('transform: ', str.join("&amp;"));
              return str.join("&amp;");
          }
  </code></pre>