2015-09-25 68 views
2

我想寫一個服務,它做多個異步請求,我使用$ q返回一個承諾,問題是我正在寫一些重複的代碼,我想刪除重複。我如何寫在AngularJS的承諾

app.factory('MyService',function($q){ 
    var ser = { 
      getA:function(){     
       var d= $q.defer; //repetitive code 
       asyn1().then(function(){ 
        aync2().then(function(res){ 
         //Process data 
         doSomething(res) 
         d.resolve(); 
        }) 
       }); 
       return d.promise 
      } , 
      getB:function(){ 
       var d= $q.defer; 
       asyn3().then(function(){ 
        aync4().then(function(res){ 
         //Process data 
         doSomething(res) 
         d.resolve(); 
        }) 
       }); 
       return d.promise 
      }        
    } 

    return ser; 
}); 

在每一個功能,我重複$q的事情,我怎麼能避免重複。

回答

3

使用承諾鏈接:

getA: function() {     
    return asyn1().then(function(responseFromAsyn1) { 
     return aync2(responseFromAsyn1); 
    }).then(function(responseFromAsync2) { 
     return postProcess(responseFromAsync2); 
    }); 
} 

getA()現在比你原來的代碼短得多,也更正確的:主叫方會真正得到一個拒絕承諾如果asyn1()async2()失敗。

+0

我想要做一些數據預處理,aync2後,返回之前。所以我認爲我不能忽視$ q –

+0

是的,你可以通過鏈接承諾。我會修改我的答案。 –

0

承諾的想法是編寫的代碼不會增加右邊的縮進,並且還會處理一個叫做「回撥地獄」的東西。

此代碼

  getA:function(){     
      var d= $q.defer; //repetitive code 
      asyn1().then(function(){ 
       aync2().then(function(){ 
        d.resolve(); 
       }) 
      }); 
      return d.promise 
     } 

可以寫成這樣

  getA:function(){ 
      return async1() 
       .then(async2) 
       .then(processTheResultOfAsync2); 
      } 

,或者如果你需要結果的一些同步處理從async1

  getA:function(){ 
      return async1() 
       .then(function(result) { 
       ..... soome synchronous processing 
       return async2(processed); 
       }); 
      } 

,或者如果你需要異步processinc

 getA:function(){ 
      return async1() 
       .then(function(result) { 
       return processAsync(result) 
        .then(async2); 
       }); 
      } 

承諾應該讓你的生活更簡單,如果沒有發生這種情況,你就沒有正確使用它們!

https://github.com/kriskowal/q

+0

我想在返回之前對aync2之後的數據進行一些預處理。所以我想我不能忽略$ q –

+0

返回async1()。然後(async2).then(procesAsync2Result); – vbuhlev

0

演示我的jsfiddle頁: https://jsfiddle.net/MikaViko/kprbneha/

``var module = angular.module('app', []); 
    module.controller('appController', ['$scope', '$q', function($scope, $q) { 

     var fibonacci = [1, 1, 2, 3, 5, 8, 13, 20]; 

     $scope.getItem = function(index) { 
     var promise = getItemPromise(index); 
     promise.then(
      function(item) { 
      $scope.item = item; 
      $scope.error = ""; 
      }, 
      function(error) { 
      $scope.error = error; 
      $scope.item = null; 
      } 
     ); 
     }; 

     function getItemPromise(index) { 
     var item = fibonacci[index]; 
     var deferred = $q.defer(); 

     if (item) 
      deferred.resolve(item); 
     else 
      deferred.reject("L'item n'existe pas ou l'index n'est pas valide."); 

     return deferred.promise; 
     } 

    }]); 
+1

請提供您的代碼的解釋。查看[回答]瞭解如何提供良好答案的詳細信息。 –