Javascript Dojo-Promise Can';t访问变量
我在ESRI Web App Builder中使用dojo,遇到了这样一种情况:我需要运行AJAX调用,并且仍然需要从基类访问变量。下面是我的代码,其中包含注释,以准确解释成功的地方和失败的地方:Javascript Dojo-Promise Can';t访问变量,javascript,dojo,esri,wms,arcgis-js-api,Javascript,Dojo,Esri,Wms,Arcgis Js Api,我在ESRI Web App Builder中使用dojo,遇到了这样一种情况:我需要运行AJAX调用,并且仍然需要从基类访问变量。下面是我的代码,其中包含注释,以准确解释成功的地方和失败的地方: define(['dojo/_base/declare', 'jimu/BaseWidget', 'dojo/request', "esri/layers/WMSLayer", "esri/config", "dojo/domReady!"], function (declare, BaseWidge
define(['dojo/_base/declare', 'jimu/BaseWidget', 'dojo/request', "esri/layers/WMSLayer", "esri/config", "dojo/domReady!"], function (declare, BaseWidget, request, WMSLayer, esriConfig) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-mywidget',
// This function is called by a button press (Normally the WMSLayer variable would be set by user input)
addWms: function () {
var wmsLayer = new WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer", {
format: "png",
visibleLayers: [2]
});
this.map.addLayer(wmsLayer); // this.map is inherited from BaseWidget as far as I can see. This adds a wms to my map without error
request("request.html").then(function(data){
var wmsLayer = new WMSLayer("http://sampleserver1.arcgisonline.com/ArcGIS/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/WMSServer", {
format: "png",
visibleLayers: [2]
});
this.map.addLayer(wmsLayer); // This is now in another context....I get the error HERE.
// At this point map is not defined because this anonymous function is running
// in a different context. ( at least I think that's what is happening )
}, function(err){
// Hopefully there are no typos in my example XD
});
}
});
});
我的问题是-->如何使用“request”回调函数访问“map”变量
我希望能够在调用WMS服务的GetCapabilities时运行this.map.addLayers。请求通常会调用它,直到我的代码结束,直到我不能再访问“map”变量为止
Dojo类型的答案是首选,但普通的旧javaScript也不错。请避免使用JQuery答案
资源包括:
在您的请求回调中,
此
不再引用您的类。在回调中访问映射的一种简单方法是在addWms函数作用域上的变量中分配映射的引用,然后在回调中使用它:
addWms: function() {
var map = this.map;
// Your code here
request('request.html').then(function (data) {
// Your code here
map.addLayer(wmsLayer); // Note that you're using map instead of this.map
}
}
您还可以使用dojohitch函数,在这里您可以传递一个函数以及应该应用它的上下文。我建议您看看这个链接。您遇到的问题是调用异步回调时执行上下文丢失的典型问题(因此
这个
不再意味着您想要的内容)。解决这个问题通常有两种方法
一种方法是在外部作用域中创建一个变量,该变量引用this
是什么,以便内部函数可以访问它:
var self = this;
request('request.html').then(function (data) {
// ...
self.map.addLayer(wmsLayer);
});
另一种方法是使用上下文绑定,通过函数#bind
(ES5)或dojo/_base/lang.hitch
:
// Function#bind:
request('request.html').then(function (data) {
// ...
this.map.addLayer(wmsLayer);
}.bind(this));
// lang.hitch:
request('request.html').then(lang.hitch(this, function (data) {
// ...
this.map.addLayer(wmsLayer);
}));
绑定方法将异步处理程序函数分解为另一个内部实例方法也是很常见的:
_addRequestedLayer: function () {
// ...
this.map.addLayer(wmsLayer);
},
addWms: function () {
// ...
// ES5:
request('request.html').then(this._addRequestedLayer.bind(this));
// ...or lang.hitch, with late binding:
request('request.html').then(lang.hitch(this, '_addRequestedLayer'));
还有一个。将此标记为答案,因为它是我使用的答案。不过这两种方法都有效。