javascript - D3 - 等待 $.ajax 请求完成

Question

我正在开发一个 d3 项目，该项目使用 d3.json() 提取 json 文件，然后将响应传递给另一个名为 update() 的函数，该函数循环遍历数组并对每个项目运行 ajax 调用并返回结果。然后，我尝试过滤掉为 htrans 属性定义为 false 的所有项目，该属性添加到成功和失败的回调函数中。我遇到的问题是，当我执行过滤器时，worldMap 变量似乎没有 htrans 属性，但是如果我 console.log 该元素，我可以看到它。我创建了一个codepen演示功能并包含以下代码。

我知道这与返回 promise 有关，并相信当我运行过滤器时，worldMap 可能不完全完整。关于如何解决这个问题有什么想法吗？

var url = "https://gist.githubusercontent.com/jkeohan/d77d5ab47e018defe48d54f59acefb65/raw/ff61673eff2e7bf610c5a426c5bd9ca46da2a9da/worldmap_geojson.json";

d3.json(url,function(err, world)  {
  var worldMap = update(world);
  worldMap.features.filter(function(d){
   if (d) { console.log(d.htrans); return d }; // this doesn't have the   htrans property
  });
  console.log(worldMap); // this displays the the htrans property
});

function update(obj){
  obj.features.filter(function(d,i) {
   var code = d.properties.iso_a2.toLowerCase();
   var url = "https://www.googleapis.com/language/translate/v2?key=AIzaSyAADudga5Cdk2QlHDWF8UAHQEy-Z_ikHw8&target=" + code + "&q=Hello";  
   return $.when(ajaxCall(url)).then(doneCB, failCB);

   function doneCB(data){
    d.hello = data.data.translations[0].translatedText;
    d.htrans = true;
    //console.log(d)
    return d;
   }

   function failCB(data){
    d.hello = "";
    d.htrans = false;
    //console.log(d)
    return d;
  };

  function ajaxCall(url) {
   return $.ajax(url);
  };

 });//filter
 return obj;
};

Answer 1

为你的世界地图创建一个新的 promise 。

d3.json(url,function(err, world)  {
  var worldMap = new Promise( function(resolve, reject){
         update(world, resolve,reject);
  })

  worldMap.then(//do something if worldMap promise resolves something good
      function(val){          
        val.features.filter(function(d){
            if (d) { 
              console.log(d.htrans);
            };
        });
      }
  )
  .catch(// if error happened inside promise
    function(reason) {
        console.log('reason');
  });

});

并像这样解决这个 promise :

function update(obj, resolve, reject){
  obj.features.filter(function(d,i) {
   var code = d.properties.iso_a2.toLowerCase();
   var url = "https://www.googleapis.com/language/translate/v2?key=AIzaSyAADudga5Cdk2QlHDWF8UAHQEy-Z_ikHw8&target=" + code + "&q=Hello";  
   return $.when(ajaxCall(url)).then(doneCB, failCB);

   function doneCB(data){
    d.hello = data.data.translations[0].translatedText;
    d.htrans = true;
    //console.log(d)
    resolve(d); //resolve on success
   }

   function failCB(data){
    d.hello = "";
    d.htrans = false;
    //console.log(d)
    reject(d); //reject on error
  };

  function ajaxCall(url) {
   return $.ajax(url);
  };

 });//filter
 return obj;
};

看看:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise