How to manage AngularJS http requests calls

Question

I have a piece of code that sends a double HTTP request.I want to first make a request for authentication and if true execute the next statement (that just returns a $http promise). How can I do this in angularJS . As of now it is returning undefined.

dmdb._login_request = function(credentials, conf) {
    var p = {
        '_method': 'POST',
        'data[User][username]': credentials.login,
        'data[User][password]': credentials.password
    };
    conf.headers = {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    };
    var userData = {
        'username': 'mbah',
        'password': 'abc@123',
        'applicationid': '1'
    };
    $http.post('myapp.com/authenticate/', userData, con).success(function(data) {
        if (data.success) {
            return $http.post(this.url + 'users/login', $.param(p), conf);
        }
        return $q.when('failed');
    })
};

Answer 1

use promise chains to call the request after another.

function firstReq(userData, conf) {
    return $http({
        method: 'POST',
        url: 'myapp.com/authenticate/',
        headers: conf.headers,
        data: userData
    })
}

function secondReq(p, conf) {
    return $http({
        method: 'POST',
        url: this.url + 'users/login',
        headers: conf.headers,
        data: $.param(p)
    })
}
$scope.processform = function() {
    var userData = {
        'username': 'mbah',
        'password': 'abc@123',
        'applicationid': '1'
    };
    var p = {
        '_method': 'POST',
        'data[User][username]': credentials.login,
        'data[User][password]': credentials.password
    };
    conf.headers = {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    };
    firstReq(userData, conf)
        .then(function(response) {
            console.log(response.data);
            return secondReq(p, conf);
        })
        .then(function(response) {
            console.log(response.data);
        })
}

Answer 2

I didn't really understand what your problem is, but, as it seems you are trying to return something from a promised function.

i would recommend you to write the following code :

   var userData={
        'username':'mbah',
        'password':'abc@123',
        'applicationid':'1'
    };

    var deferred = $q.defer();

    $http.post('myapp.com/authenticate/',userData,con).success(function(data){
            if(data.success){
                   $http.post(this.url+'users/login',$.param(p),conf).success(function(data2){
                        deferred.resolve(data2);
                   })
            }
            // I dont understand what this is for
            //turn $q.when('failed');
    })

  return deferred.promise;
};

this way your function will return a promise that you could use for your purposes.

or please elaborate more if it didn't help you

Answer 3

my_obj._login_request = function (credentials,conf) {


  var url_=this.url;

        var p = {
        '_method': 'POST',
        'data[User][username]': credentials.login,
        'data[User][password]': credentials.password
    };
    conf.headers = {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'};


    var userData={
    'username':'mbah',
    'password':'abc@123',
    'applicationid':'1'
};

var deferred = $q.defer();

$http.post('auth/path/UserLogin/Login',userData).success(function(data){
       console.log(data);
        if(!angular.isDefined(data.status)){

                    deferred.resolve($http.post(url_+'/users/login',$.param(p),conf));
        }
        else{
             deferred.reject();
        }
})

 return deferred.promise;

};

Thats my final code and its working as expected.Thanks for help guys