Jquery Defer & 每个循环

Question

我对 JSON 和 Deferrers 有点陌生，所以很抱歉答案很明显。

我正在与 pokeapi.co 合作，我正在尝试使用 getJSON 提取各种 pokemon 的详细信息。我创建了一个函数，它接受一个 URL 数组，运行一个 getJSON 函数从 URL 中提取数据，迭代数据并将其推送到一个数组中。我正在尝试使用 defer 对象并承诺确定所有操作何时完成，以便我可以在另一个函数中使用数据。不幸的是，我似乎做错了什么。

var url = [
  "http://pokeapi.co/api/v2/pokemon/1/",
  "http://pokeapi.co/api/v2/pokemon/2/"
];

function getPokemonDetails(url){
  var def = $.Deferred();
  var promises = [];
  var pokemon;
  $.each(url, function(i, index){
    var deferred = $.Deferred();
    $.getJSON(index, function(data){
      pokemon = [data.name, data.stats];
      var abilityURLs = [];
      $.each(data.abilities, function(a, abilities){
        abilityURLs.push(abilities.ability.url)
      });

      pokemon.push(abilityURLs);
      deferred.resolve(pokemon);
    }); //End getJSON

    deferred.done(function(data){
      promises.push(data);
      console.log(promises);
    })// End Deferred
  }); //End Each

  $.when(...promises).done(function(){
    console.log(arguments.length);
  });
}

getPokemonDetails(url);

目前，当 console.log 运行时，我预计 promises 数组的长度为 2，但此时它返回 0。我不确定我到底哪里出错了。

Answer 1

首先，不要使用$.each 和推送，因为你有一个从源数组到目标数组的1:1 映射，你应该使用Array.prototype.map。

其次，由于$.getJSON 已经返回了$.Deferred()，因此完全没有必要自己创建一个。

因此，如果我正确地遵循了您当前的代码，则可以将其完全替换为：

function getPokemonDetails(url_list) {
    return $.when(... url_list.map(url =>
        $.getJSON(url).then(
            data => [ data.name, data.stats, [
                data.abilities.map(ability => ability.ability.url)
            ]]
        )
    ));
}

内部.then 调用获取从每个 AJAX 调用返回的数据，并返回一个解析为名称数组、统计信息和嵌套能力数组的承诺。

对于它的价值，我可能会将其拆分为两个函数 - 一个处理单个 URL，另一个处理多个 URL：

const getPokemonDetails = url => $.getJSON(url).then(
    data => [ data.name, data.stats, [
                data.abilities.map(ability => ability.ability.url)
            ]]);

const getMultiPokemonDetails = list => $.when(...list.map(getPokemonDetails));