Javascript 传单等待承诺解决

我正在扩展传单getTileUrl以获得某种缓存磁贴。我使用Vue，但它不会影响任何东西。目前看起来是这样的：

   //step 1 
   L.TileLayer.MyLayer = L.TileLayer.extend({
        getTileUrl: function(coords) {
            
            var url = this.getLayerUrl(coords.z, coords.x, coords.y);

            return url;

        }.bind(this)
    });

    //step 2
    L.tileLayer.myLayer =  function() {
        return new L.TileLayer.MyLayer();
    }

    //step 3
    L.tileLayer.myLayer().addTo(this.getParent('main-map').map);

async function getUrl() {
    const url = await getAsyncUrl();
    return transformUrl(url);
}

问题在于getLayerUrl函数返回一个承诺。即使当我尝试使getTileUrl异步，然后等待this.getLayerUrl（也使异步等待步骤2和3）或put.then（函数（结果）{return result；}在this.getLayerUrl之后，传单在浏览器控制台中显示错误，它试图从url获取平铺：gethttp://localhost/project/public/[对象%20承诺]

---

我还应该提到，this.getLayerUrl为每个磁贴返回不同的url，它实际上是一个blob url，如：blob:http://localhost/f7c4298f-9e9d-423f-9d0b-3f7a301e433f 但是，如果url返回正确，则传单不会有问题，并且磁贴显示正确。

不幸的是，您试图实现的目标是不可能的。T

getTileUrl（）

方法应直接返回url，即不包含在承诺中。但是，您可以从

getLayerUrl

获取url，该url将返回承诺。您不能在

getTileUrl（）

中同步等待承诺的结果

await

关键字表明这是可能的，但事实并非如此。

await

只是语法糖，是链接承诺的简写。我给你一个简单的例子

function getUrl() {
    return getAsyncUrl().then(url => {
         return transformUrl(url);
    });
}

async

/

wait

允许您这样编写：

   //step 1 
   L.TileLayer.MyLayer = L.TileLayer.extend({
        getTileUrl: function(coords) {
            
            var url = this.getLayerUrl(coords.z, coords.x, coords.y);

            return url;

        }.bind(this)
    });

    //step 2
    L.tileLayer.myLayer =  function() {
        return new L.TileLayer.MyLayer();
    }

    //step 3
    L.tileLayer.myLayer().addTo(this.getParent('main-map').map);

async function getUrl() {
    const url = await getAsyncUrl();
    return transformUrl(url);
}

---

但是在幕后它仍然使用承诺。

async

函数总是返回承诺。

这里的方法不是提供

getLayerUrl

方法，而是替换

createTile

元素的实现

将

createTile

实现替换为的替换项如下所示：

L.TileLayer.MyLayer = L.TileLayer.extend({
  getTileUrl: function (coords) {
    var tile = document.createElement("img");

    DomEvent.on(tile, "load", Util.bind(this._tileOnLoad, this, done, tile));
    DomEvent.on(tile, "error", Util.bind(this._tileOnError, this, done, tile));

    if (this.options.crossOrigin || this.options.crossOrigin === "") {
      tile.crossOrigin =
        this.options.crossOrigin === true ? "" : this.options.crossOrigin;
    }

    tile.alt = "";
    tile.setAttribute("role", "presentation");

    tile.src = this.getTileUrl(coords);

    return tile;
  }
});

考虑到该实现，可以以异步方式设置

HTMLImageElement

的

src

属性，将synchronous

tile.src=this.getTileUrl（coords）；

替换为如下内容：

asyncGetLayerUrl(coords)
  .then(function (url) {
    tile.src = url;
  })

并且，为了更好地处理拒绝承诺的情况，请调用

this.\u tileOnError

，例如：

asyncGetLayerUrl(coords)
  .then(function (url) {
    tile.src = url;
  })
  .catch(
    function (err) {
      this._tileOnError(done, tile, err);
    }.bind(this)
  );

---

看起来传单需要同步计算平铺url。为什么它是异步的？只有从该url加载图像才应该是异步的。听起来更像传单网格层的用例