Angularjs 在第一个http调用完成后调用第二个http调用

这是我保存数据并返回结果的服务

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;
    }


})();

这是im使用返回值并基于返回值调用另一个http get方法并打印它的控制器

 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);
       });
   }

但是在保存打印调用之前。我怎样才能使第一次调用在对条形码的第二次http调用之前完成并打印它

//打印代码

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 = '';
       }
   };

---

您必须在

printBarCode

中返回

$http

调用并使用

。然后像这样使用
：

//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
现在将等待
printBarCode
承诺，然后在执行之前完成


您也不必使用
$q.defer
当执行
$http
调用时，
$http
已经是一个承诺，因此您可以像这样返回：

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
            }
        );
}

您必须在
printBarCode
中返回
$http
调用并使用
。然后像这样使用
：

//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
现在将等待
printBarCode
承诺，然后在执行之前完成


您也不必使用
$q.defer
当执行
$http
调用时，
$http
已经是一个承诺，因此您可以像这样返回：

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
            }
        );
}

首先，$http在内部实现您不必显式创建它们的承诺

其次，您应该将所有http请求放在服务/工厂中

修改后的代码看起来像

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;
});

您的控制器可以使用如下服务

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
  });
});
}

代码中可能有拼写错误，但这只是一个关于如何做到这一点的基本想法。希望它能有所帮助
首先，$http在内部实现了您不必显式创建它们的承诺

其次，您应该将所有http请求放在服务/工厂中

修改后的代码看起来像

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;
});

您的控制器可以使用如下服务

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
  });
});
}

代码中可能有拼写错误，但这只是一个关于如何做到这一点的基本想法。希望对您有所帮助
原则思想是正确的。您解析第一个承诺，然后执行第二个调用。我真的不知道wjy你在服务中用承诺来包装承诺$http重新运行已经是一个承诺。看看这个，这个原则思想是正确的。您解析第一个承诺，然后执行第二个调用。我真的不知道wjy你在服务中用承诺来包装承诺$http重新运行已经是一个承诺。看看这个vm.printBarCode必须在printElement（“printThisElement”）之前完成；但这并没有发生。条形码仍然没有出现在打印中。它出现在第二次单击时。我们如何处理这个问题？您可以尝试将
printElement（“printThisElement”）
在
$timeout
中，但这只是一个黑客行为，由于我无法识别代码中的问题，因此也只是一个疯狂的猜测，$timeout（函数（）{printElement（“printThisElement”）；}，1）；您不必为
$timeout
指定实际时间，0秒后将延迟函数调用1 digest cyclevm。printBarCode必须在printElement（“printThisElement”）之前完成；但这并没有发生。条形码仍然没有出现在打印中。它出现在第二次单击时。我们如何处理这个问题？您可以尝试将
printElement（“printThisElement”）
在
$timeout
中，但这只是一个黑客行为，由于我无法识别代码中的问题，因此也只是一个疯狂的猜测，$timeout（函数（）{printElement（“printThisElement”）；}，1）；您不必为
$timeout
指定实际时间，0秒将延迟函数调用1个摘要周期