Need synchronous behavior in angular js 1.x

Question

Background: I have one Web API with GET method and returning the boolean value. Once I receive this value then I need to perform some action.

Issue: My code is reaching to the condition where I am checking this boolean value before the API return the value. I am unable to wait until the API returns the value. In below code Javascript execution is reaching to "setTimeout" statement.

My R&D: I have applied this setTimeout to delay the execution but still the value is coming late from api and javascript is processing.

Code: using AngularJS 1.6 version I have tried both way using $http.get() and $http({//setting the confiuration here});

actual code: 1. code where I am calling the service

paymentFormRoleValidationBeforeSubmit: function (contractId, payFormId) {
        return $http({
            url: 'some api url',
            method: "GET",
            headers: serviceheader,
            config: serviceconfig
        }).success(function (data, status, headers, serviceheader) {
            return data.value;
        }).error(function (data, status, header, serviceheader) {
                console.log("** Fail -- before submitting role checked is failed.")
                return false;
        });
    }

2. javascript code where I am calling this one

    if (workflowStatus == "Start") { var returnHttp = $paymentFormsService.paymentFormRoleValidationBeforeSubmit(parseInt($rootScope.contractId), parseInt($rootScope.payFormId)); flagValue = returnHttp; } 

3. Inside this fire method I am checking whether flagValue is true or false and then executing some other task, but this value is coming undefine and the else part is executing

   setTimeout(fire(workflowStatus, flagValue), 5000);

   function fire(workflowStatus, flagValue){ if (flagValue === true) { // if value is true then save in database. } else{ // Here I am displaying an error popup on UI screen } }

But in my case I am getting error popup everytime, because the API has not yet return the value and flagValue is undefined. and this popup get dispalyed. After that in then API return the value it is working in async way.

Or is there any other way to do it please update me.. This is my production issue.

Answer 1

I think you should do your http request in your service and get your promise where you call the service. This way you can set your flag when your http call returns a promise.

service

paymentFormRoleValidationBeforeSubmit = function (contractId, payFormId) {
    var request = $http({
        url: 'some api url',
        method: "GET",
        headers: serviceheader,
        config: serviceconfig
    });
    return request;
}

code where you call the service

var promiseGet = $paymentFormsService.paymentFormRoleValidationBeforeSubmit(parseInt($rootScope.contractId), parseInt($rootScope.payFormId));;
promiseGet.then(function (returnHttp) {
    flagValue = returnHttp;
},
function (errorPl) {

});