链式承诺/需要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

回答

相关问题