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

Question

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

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


})();

这是我使用返回值并基于返回值调用另一个 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 = '';
       }
   };

Answer 1

您必须在printBarCode 中返回$http 调用并使用.then，如下所示：

//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 承诺和 .then 在执行前完成。

---

在进行$http 调用时，您也不必使用$q.defer，$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
            }
        );
}

Answer 2

首先，$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
  });
});
}

代码中可能存在拼写错误，但这只是关于如何做到这一点的基本想法。希望对你有帮助