Question

我正在使用ESRI Web App Builder中的dojo，遇到过我需要运行AJAX调用并仍然从基类访问变量的情况。下面是我的代码，其中包含注释，以准确说明它的成功位置以及它失败的确切位置：

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
            });
        }
    });
});

我的问题是 - ＆gt;如何访问＆＃34;地图＆＃34;来自＆＃34; request＆＃34;的回调函数的变量？

我希望能够在调用WMS服务的GetCapabilities时运行this.map.addLayers。请求通常会调用它，我会一直到代码结束，直到我无法访问＆＃34; map＆＃34;我已经知道它了。

Dojo类型的答案是首选，但普通的旧javaScript也很好。请避免使用JQuery答案。

资源是：
ESRI JavaScript library
Dojo
ESRI Web App Builder

Answer 1

在您的请求回叫中，this不再引用您的课程。在回调中访问地图的一种简单方法是在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
    }
}

您还可以使用Dojo hitch函数，您可以在其中传递函数以及应该应用的上下文。我建议您查看此链接http://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#hitch。

Answer 2

您遇到的问题是在调用异步回调时执行上下文丢失的经典问题（因此this不再意味着您想要的）。通常有两种方法可以解决这个问题。

一种方法是在外部作用域中创建一个引用this的变量，以便内部函数可以访问它：

var self = this;
request('request.html').then(function (data) {
    // ...

    self.map.addLayer(wmsLayer);
});

另一种方法是通过Function#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'));

还有tutorial on lang.hitch。

Dojo - 承诺无法访问变量

2 个答案: