$http returning error response NULL on first call after launch (ionic) everytime, but after subsequent http post its ok

Question

Whenever I launch my app, and click on login on the first few tries, the login will attempt a POST http to the server. However $http always (everytime) returns NULL on first try. sometimes after several few tries still NULL if done fast. But subsequently, its all ok.

I dont get it, why is $http returning error response NULL initially ??

Here is my login controller doing the http post

Login Controller (LoginCtrl) https://gist.github.com/anonymous/771194bc5815e4ccdf38b57d6158853f

var req = {
  method: 'POST',
  url: baseURL,
  data: postObject,
  //timeout: 5000
};

err is NULL here:

}).error(function(err) {

I dont know if it is CORS but I'ved got this set in config.xml

 <access origin="*" />

my config.xml https://gist.github.com/anonymous/b2df3a857338d14ec3fcd6dda776e212

Any ideas ? Im using ionic 1.7.14 on device iOS 9.3.1

UPDATE

I'ved put the problem code here. can logout first to goto login screen. enter in anything in username/password field, click login once failed, second or third try will be success.

https://github.com/axilaris/ionic_null_http_problem

some troubleshooting so far: i noticed the http post request is called twice. not sure why.

UPDATED the code using $http.post.then but still has the same effect

 $http.post(baseURL, postObject).then(function successCallback(response)

 response has NULL data --> Object {data: null, status: 0, config: Object, statusText: ""}

Answer 1

It is hard to diagnose having the above details only. However the problem could be that your handler (login function) is triggered before digest cycle finished updating $scope.data.username and $scope.data.password and for the first tries it sends empty values for those to the server and works fine later. You can run Safari web inspector to see what is sent to the server to prove this. The fix may depend on how your view/template is coded. Can you please share it? Or, ideally, create a working sample at http://play.ionic.io/

Another option to fix could be to try to wrap your code related to http request into

$timeout(function() { 
    // your code goes here
});

or, consider using .$applyAsync() (see the docs for details) This might help to fix the problem

Answer 2

You are probably getting this inconsistent behavior as you are using the 'success' promise method instead of 'then' (note that use of the success method has now been deprecated).

The key differences between these two methods are:

• then() - full power of the promise API but slightly more verbose
• success() - doesn't return a promise but offeres slightly more convienient syntax

as highlighted in this answer.

Hence in your scenario, instead of using 'success':

var req = {
  method: 'POST',
  url: baseURL + 'session/login',
  data: postObject,
  //timeout: 5000
};

$http(req).success(function(resp) {...

use 'then' along with angular's post shortcut method (you don't have to use this shortcut method, but I think it makes the code more succinct) e.g.:

$http.post(baseURL + 'session/login', postObject).then(function successCallback(response) {
  // this callback will be called asynchronously
  // when the response is available
}, function errorCallback(response) {
  // called asynchronously if an error occurs
  // or server returns response with an error status.
});

Using 'then' returns a promise resolved with a value returned from a callback, so it should give you a consistently valid result.

Answer 3

it was a timeout in app.js that caused it. was set to 1 second which gives it it arbitrary success rate.

config.timeout = 1000;