我的目标:
构建一个 AngularJS 服务 (MapService)，它初始化 (MapService.initMap()) 第 3 方控件 (Esri ArcGIS Map) 并返回对我的 map 的引用 ( MapService.getMap())，这样我就可以在我的所有 Controller 中使用它。
代码
<!DOCTYPE html>
<html ng-app="app">
<body ng-controller="MapController">
<script data-require="angular.js@1.5.0" 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>
脚本.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() 返回的 Promise 永远不会被解析，因此 MapService.getMap().then() 中的代码永远不会到达。
当我在 initMap() 方法中使用一些测试字符串 (self.deferred.resolve('test');) 解析 promise 时，它起作用了。
所以我认为这是“esriLoader.require()”方法的问题，这是在 require map 组件的某些依赖项之后解决的另一个 promise 。
所以我基本上是在 promise 中解决 promise 。我将 esriLoader 的代码添加到了 plunkr。
我做错了什么？
最佳答案
问题是 Map 实现了某种 Promise 接口(interface)。我建议检查文档。您可以通过将 map 包装到对象中来解决您的问题:
var map = {
map: new Map({
basemap: 'satellite'
})
};
console.log("resolve map"); // this code is reached
self.deferred.resolve(map);
正如其他人已经建议的那样，最好调用 MapService.initMap().then 而不是调用这两个方法并创建自己的 promise 。您不是用 map 来解决这个问题，而是返回(包装的) map :
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};
});
关于javascript - AngularJS 中的链式 promise /需求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35571826/