Calling second http call after the first http call finish

Question

This is the service where im saving the data and returning the result

nurseService.js

(function () {
    'use strict';

    angular.module('app.services')
        .factory('NurseService', NurseService);

    NurseService.$inject = ['$http', '$q','Constants'];
    function NurseService($http, $q, Constants){
        var service = {
            saveSample:saveSample
        };

        return service;



     function saveSample(data) {
         var deferred = $q.defer();
         $http({method:"POST", data:data, url:Constants.API_URL_SAVE_SAMPLE_COLLECATION}).then(function(result){
            return  deferred.resolve(result.data);
        });
    };
    return deferred.promise;
    }


})();

This is the controller where im using the return value and based on the value returned im calling another http get method and printing it.

 vm.saveSamples = function() {
   var data = {
    visitId: visitId,
    orders: vm.gridTestApi.selection.getSelectedRows()
   };
   var url = Constants.API_URL_SAVE_SAMPLE_COLLECATION;
   var barCodeResponse = null;
   var sampleId = "";


   var myDataPromise = NurseService.saveSample(data);
   myDataPromise.then(function(result) {  
        console.log("data.name"+ JSON.stringify(result));
        vm.printBarCode(result.sampleId);
       // if(sampleId != ""){
           printElement("printThisElement");
       // }
   });

   //Barcode method this should call after saving the data and returned the sampleId
   vm.printBarCode = function(sampleId) {
         $http.get("master/barcode/"+sampleId).then(function (response) {
             vm.barCodeImage = angular.copy(response.data.result);
       });
   }

But here before the saving print is calling. How can I hadle so that the first call should finish before the second http call to barcode and print it

//Print code

function printElement(elem) {

     var printSection = document.getElementById('printSection');

       // if there is no printing section, create one
       if (!printSection) {
           printSection = document.createElement('div');
           printSection.id = 'printSection';
           document.body.appendChild(printSection);
       }

       var elemToPrint = document.getElementById(elem);
       // clones the element you want to print
       var domClone = elemToPrint.cloneNode(true);
       printSection.innerHTML = '';
       printSection.appendChild(domClone);
       window.print();

       window.onafterprint = function () {
           printSection.innerHTML = '';
       }
   };

Answer 1

First of all, $http internally implements promises you you dont have to explicitly create them.

Secondly, you should put all your http requests in the service/factory

The modified code looks like

angular.module('app.services')
  .factory('NurseService', function($http){
    var service = {
    saveSample : function(data){
    //first http implementation here
    return $http.post(....);
    }
    getBarcode : function(sampleId){
    //http implementation here for barcode
    return $http.get(....);
    }
  }
  return service;
});

and your controller can use the service like

angular.module('app.services')
  .controller('saveSampleCtrl',function($scope,NurseService){
    var postData = {
    //your post data here
    }
    NurseService.saveSample(postData)
    .then(function(data){
    //read sampleId here from data
    var sampleId = data.sampleId;
    NurseService.getBarcode(sampleId)
    .then(function(){
    //your print statement here
  });
});
}

there might be typos in the code but this is just a basic idea on how you could do that. Hope it helps

Answer 2

You have to return the $http call in printBarCode and use a .then like so:

//Barcode method this should call after saving the data and returned the sampleId
vm.printBarCode = function(sampleId) {
    return $http.get("master/barcode/"+sampleId).then(function (response) {
        vm.barCodeImage = response.data.result;
    });
}

myDataPromise.then(function(result) {  
    console.log("data.name"+ JSON.stringify(result));
    return vm.printBarCode(result.sampleId)     
}).then(
    function() {
        printElement("printThisElement");
    },
    function(error) {
        // error handler
    }
);

printElement will now wait for the printBarCode promise and .then to fulfil before executing.

---

You also don't have to use a $q.defer when doing a $http call, $http is already a promise so you can just return that like so:

function saveSample(data) {
    return $http({method:"POST", data:data, url:Constants.API_URL_SAVE_SAMPLE_COLLECATION})
        .then(
            function(result) {
                return result.data;
            },
            function(error) {
                // don't forget to handle errors
            }
        );
}