Promise.all过早分解

Question

我想要fetch多个JSON文件。这是我的密码：

var timestamps = [];
var urls = ['assets/layouts/default.json','assets/layouts/simple.json'];
var jsons = [];
Promise.all(urls.map(url => {
  fetch(url)
  .then(data => data.json())
  .then(json => {
    jsons.push(json);
    timestamps.push(performance.now());
  });
}))
.then(() => {
  console.log(`All assets loaded. Assets were loaded at: ${timestamps}, this log was made at ${performance.now()}. Loaded data: ${jsons}`);
}
);

问题是，Promise.all似乎解决得太早了。正如您所看到的，我包括了一些调试，它记录如下：

All assets loaded. Assets were loaded at: , this log was made at 37.73. Loaded data: 

如果我将该console.log包装在一个setTimeout中，并节省解析Promise.all的时间，如下所示：

.then(() => {
  let promiseResolvedAt = performance.now();
  setTimeout(() => {
    console.log(`All assets loaded. Assets were loaded at: ${timestamps}, Promise.all was resolved at ${promiseResolvedAt}. Loaded data: ${jsons}`);
  })
}

我明白了：

All assets loaded. Assets were loaded at: 63.44000000000001,63.555, Promise.all was resolved at 55.96500000000001. Loaded data: [object Object],[object Object]

通过使用setTimeout，我可以让它像我所希望的那样工作，但我确信还有更好的方法，我只是做了一些错误的事情。

为什么Promise.all在组件承诺解决之前就进行了解析？

我在Chrome 55上运行这个。

Answer 1

你需要回报这个承诺：

Promise.all(urls.map(url => {
  return fetch(url)
    .then(data => data.json())
    .then(json => {
      jsons.push(json);
      timestamps.push(performance.now());
    });
}))

来自body

箭头函数可以有“简明体”或通常的“块体”。 在简洁的正文中，只需要一个表达式，并附加一个隐式返回。在块体中，必须使用显式return 语句。

Answer 2

在映射URL数组时，您需要返回对fetch的调用，否则您的Promise.all(...)正在等待[undefined, undefined]，正如您所观察到的那样，[undefined, undefined]将立即解决。

Promise.all(urls.map(url => {
   return fetch(url)
// ^^^^^^
    .then(data => data.json())
    .then(json => {
      jsons.push(json);
      timestamps.push(performance.now());
    });
}))