javascript - 这个 Promise.all 解决方案有什么问题

Question

我需要循环遍历项目数组并检查每个项目的类型是否与所需类型匹配。完成所有检查后，将符合要求的添加到下拉选择框中。在有 2 项满足要求的数组中，此代码检查始终仅将第一项添加到下拉列表中，这有什么问题吗？

var promises = [];
var html = "";

for (var i = 0; i < items.length; i++) {
  var promise = new Promise(function(resolve, reject){
    $.ajax({
      url: "url" + items[i], 
      dataType: "json",
      success: function (data) {
        console.log(data); 
        console.log(data.type); // "mytype"
        console.log(typeof data.type); // string
        if(data.type == "mytype") {
          html += "<option value='" + data.id + "'>" + items[i] + "</option>";
          resolve();
        }
      }
    });
  promises.push(promise); 
  });
}

console.log(promises) // (2) [undefined, Promise]

Promise.all(promises).then(() => {
  $("#dropdownBox").html(html);
});

编辑:有人指出我需要使用 each 而不是 forloop 来进行闭包，我尝试了但仍然不起作用。我尝试做

$.each(items, function(index){...}

和

items.forEach(function(index){...}

并相应地修改了循环内的内容，但没有运气。这篇文章(JavaScript closure inside loops – simple practical example)对我没有帮助。

Answer 1

您遇到的问题之一是，如果类型不满足条件，则无法解决 promise 。

您的 for() 循环也不会创建闭包，因此请求完成时 i 不会是您期望的结果

由于 $.ajax 返回一个 Promise，这里有一种较少反模式的方法，使用 map() 创建闭包和 Promise 数组

// map array of promises
var promises = items.map((item) => {
  // return $.ajax promise
  return $.ajax({
    url: "url" + item,
    dataType: "json"
  }).then((data) => {
    let html = '';
    if (data.type == "mytype") {
      html += "<option value='" + data.id + "'>" + item + "</option>";
    }
    return html;
  });
});

Promise.all(promises).then((res) => {
  // res is array of  html (or empty) strings returned in each then() above
  $("#dropdownBox").html(res.join(''));
}).catch(err => console.log('At least one request failed'));

<强> Demo