鏈式承諾/需要AngularJS

我的目標：鏈式承諾/需要AngularJS

構建其初始化一個AngularJS服務（MapService）（MapService.initMap()）第三方控制（ESRI的ArcGIS地圖），並返回到我的地圖（MapService.getMap()）的引用，因此我可以在我的所有控制器中使用它。

代碼

<!DOCTYPE html> 
<html ng-app="app"> 
    <body ng-controller="MapController"> 


     <script data-require="[email protected]" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> 
     <script defer type="text/javascript" src="//js.arcgis.com/4.0beta3/"></script> 

     <script src="angular-esri-loader.js"></script> 
     <script src="script.js"></script> 
    </body> 

</html>

的script.js：

(function(angular) { 
    'use strict'; 

var app = angular.module('app', ['esri.core']); 

angular.module('app') 
    .controller('MapController', function(esriLoader, $scope, MapService) { 

     MapService.getMap().then(function (mapObj) { 
      console.log("resolved!!!"); // this code is never reached 
      alert('show map'); 
      $scope.map = mapObj; 
     }); 

     MapService.initMap(); 

    }); 



angular.module('app') 
    .service('MapService', function($q, esriLoader) { 
     this.deferred = $q.defer(); 

     this.getMap = function(){ 
      return this.deferred.promise; 
     } 
     var self = this; 
     this.initMap = function() { 

     // self.deferred.resolve('test'); // When I uncomment this line, the promise will be successfully resolved and the 'then' runs 

      esriLoader.require([ 
        'esri/Map', 
        'esri/widgets/Search', 
        'esri/widgets/Search/SearchViewModel' 
       ]).then(function(esriModules){ 
        var Map = esriModules[0]; 
        var Search = esriModules[1]; 
        var SearchViewModel = esriModules[2]; 

        // Create the map 
        var map = new Map({ 
         basemap: 'satellite' 
        }); 

        console.log("resolve map"); // this code is reached, however, it still doesn't seem to correctly resolve the promise 

        self.deferred.resolve(map); 

       }); 

     } 

    }); 
})(angular);

Plunkr

https://plnkr.co/edit/LEhYqHVSpscTZ5kJCfyJ

問題：

getMap()返回的承諾永遠不會解析，因此MapService.getMap().then()範圍內的代碼永遠不會達到。

當我使用我的initMap()方法中的某個測試字符串（self.deferred.resolve('test');）解決承諾時，它可以工作。

所以我想這是一個'esriLoader.require（）'方法的問題，這是另一個承諾在require之後解決地圖組件的一些依賴關係。

所以我基本上是在一個承諾內解決承諾。我將esriLoader的代碼添加到了plunkr中。

我在做什麼錯？

來源

2016-02-23 user66875

使用一種方法'initMap'如果地圖初始化，然後它會返回地圖實例，將檢查，否則會初始化，然後返回實例。這不會解決問題。只是一個很好的代碼的建議。 – karaxuna

考慮到'esriLoader.require'已經返回一個promise，你應該[避免延遲反模式]（http://stackoverflow.com/q/23803743/1048572）！ – Bergi

的問題是，Map實現某種承諾的接口。我建議檢查文檔。您可以通過包裝地圖爲對象解決您的問題：

var map = { 
    map: new Map({ 
    basemap: 'satellite' 
    }) 
}; 

console.log("resolve map"); // this code is reached 

self.deferred.resolve(map);

正如其他人已經建議最好將調用MapService.initMap().then，而不是調用這兩種方法，並創建自己的諾言。相反的解決，與地圖，你返回（包裝）地圖：

 this.initMap = function() { 

     //self.deferred.resolve('test'); // When I uncomment this line, the promise will be successfully resolved and the 'then' runs 

     return esriLoader.require([ 
       'esri/Map', 
       'esri/widgets/Search', 
       'esri/widgets/Search/SearchViewModel' 
      ]).then(function(esriModules){ 
       var Map = esriModules[0]; 
       var Search = esriModules[1]; 
       var SearchViewModel = esriModules[2]; 

       // Create the map 
       var map = new Map({ 
        basemap: 'satellite' 
       }); 

       console.log("resolve map"); // this code is reached 

       return {map: map}; 


      });

來源

2016-02-23 08:56:08 zeroflagL

謝謝，這確實很好！還有一個問題：現在，每個'initMap'調用都會創建一個新的Map。我想創建它只有一次，每個額外的MapService.initMap（）。然後（）調用將返回對先前創建的地圖的引用。你會怎麼做？ – user66875

-2

試試這個方法：

angular.module('app') 
.service('MapService', function($q, esriLoader) { 
    var map; 
    this.initMap = function() { 
     // return map instance if it's already initialized 
     if (map) { 
      return $q.resolve(map); 
     } 

     var defered = $q.defer(); 

     esriLoader.require([ 
      'esri/Map', 
      'esri/widgets/Search', 
      'esri/widgets/Search/SearchViewModel' 
     ]).then(function(esriModules){ 
      var Map = esriModules[0]; 
      var Search = esriModules[1]; 
      var SearchViewModel = esriModules[2]; 

      // Create the map 
      var map_ = new Map({ 
       basemap: 'satellite' 
      }); 

      map = map_; 
      defered.resolve(map_); 
     }); 

     return defered.promise; 
    } 

});

只需使用initMap當你需要地圖實例:)

MapService.initMap().then(function (map) { 
    // use map here 
});

來源

2016-02-23 08:08:32 karaxuna

謝謝，但不幸的是它仍然無法正常工作。 – user66875

http：// stackoverflow。com/questions/23803743 /明確承諾 - 建構 - 反模式 - 如何做 - 我 - 避免 - 它 –

@BenjaminGruenbaum我不知道'esriLoader.require'返回什麼樣的承諾。如果它返回es6承諾呢？它會用'$ q'嗎？ – karaxuna

鏈式承諾/需要AngularJS

回答

相關問題