How to make a synchronous workflow work using Promises in AngularJS?

Question

I am making a project in MEAN Stack. In Frontend I have to do two things. First get data from backend using a promise. and use that data again in another promise. basically something like this.

var deviceId="";
            deviceId = $http.get(Config.apiurl+'/mobile/devices')
            .then(function(response){
                deviceId = response.data.devices[0].deviceId;
                console.log(deviceId);
                return response.data;
            }, function(response){
                console.log("Error");
                return $q.reject(response.data);
            });
            console.log(deviceId);
            var postString = "AT+CGPSINF=0 0," + lat + "," + lng + ",847.413452,20150520205855.000,100,11," + velocity + ",0.000000 OK ,CRASH=0,"+deviceId;
 $http.post(Config.apiurl + '/device/locations', postString, { headers: { 'Content-Type': undefined}})
            .then(function (response) {
                console.log("Sent the data");
                return response.data;
            }, function (response) {
                console.log("got error response");
                return $q.reject(response.data);
            });

Now there is a conceptual problem that I need deviceId for my second API call and I won't get it synchronously, because promises are inherently asynchronous in nature. If I have to implement such a behavior. How do I go about it?
Second Ques. Whatever data I get inside my promises I am not able to get the same value outside the promise. That being said. I know that this must be caused because deviceId = response.data is a reference. So when response's scope ends.Value from deviceId is vanished. How do I get the data from the promises? or should I call the other promise inside the first one to make it synchronous and ensure that I always have the data?

you could put the code from `var postString` in the then – Jaromanda X Oct 03 '15 at 23:34 — Jaromanda X, Oct 03 '15 at 23:34

score 1 · Answer 1 · answered Oct 03 '15 at 23:28

Look this:

function getMobileDevices(callback){
    $http.get(Config.apiurl+'/mobile/devices').then(function(response){
        callback(response);
    }, function(response){
        console.log("Error");
        return $q.reject(response.data);
    });
}

function getLocationDevices(callback, deviceId){
    var postString = "AT+CGPSINF=0 0," + lat + "," + lng + ",847.413452,20150520205855.000,100,11," + velocity + ",0.000000 OK ,CRASH=0,"+deviceId;
    $http.post(Config.apiurl + '/device/locations', postString, { headers: { 'Content-Type': undefined}}).then(function (response) {
        callback(response.data)
    }, function (response) {
        console.log("got error response");
        return $q.reject(response.data);
    });    
};


function go(){
    getMobileDevices(function(response){
        var deviceId = response.data.devices[0].deviceId;
        getLocationDevices(function(response){
            console.log("Response: " +  response)
        }, deviceId);
    });
}

Uses callback function when called search http. When finishing callback return the value of response

Looks correct. But then it increases the lines of code. I think the answer by @Jaromanda is better as it exploits the property of promises. Thanks again. Much appreciated. — Saras Arya, Oct 04 '15 at 12:40
Sure, my answer use good programming practices . For example, you may need to make isolated queries. In this case how? You will need to create a new function ? Remember, not always menas lines of code represent more quality. Not to mention that you can not decide on a name for the function of this routine. She consults a given and returns other, stranger means in my view — Emir Marques, Oct 04 '15 at 12:47

score 1 · Accepted Answer · edited Oct 04 '15 at 13:11

1

Something like this should work

$http.get(Config.apiurl+'/mobile/devices')
.then(function(response) {
    deviceId = response.data.devices[0].deviceId;
    var postString = "AT+CGPSINF=0 0," + lat + "," + lng + ",847.413452,20150520205855.000,100,11," + velocity + ",0.000000 OK ,CRASH=0,"+deviceId;
    return $http.post(Config.apiurl + '/device/locations', postString, { headers: { 'Content-Type': undefined}});
}).then(function (response) {
    console.log("Sent the data");
    return response.data;
}).catch(function(err) {
    console.log('got an error');
    console.log(err);
});

edited Oct 04 '15 at 13:11

Saras Arya

3,022
8
41
71

answered Oct 03 '15 at 23:48

Jaromanda X

53,868
5
73
87

okay one doubt what bracket does the last function close? `catch(err) { console.log('got an error'); console.log(err); });` The `{}` is for catch. `);`is to close what? All parenthesis are balanced – Saras Arya Oct 04 '15 at 11:49
Corrected it. Thanks very much... It was a clean approach using promises. I think this is the reason they made promises... – Saras Arya Oct 04 '15 at 12:36

How to make a synchronous workflow work using Promises in AngularJS?

2 Answers2