DOM 不在我期望使用 Promise.all(...) 时的状态。然后

Question

下面的代码有错误，但我想不通。我相信当我做 Promise.all(...).then 时，所有的承诺都应该在那个时候完成，但它看起来不像。 . 该代码只是从 api 中获取一些 json，然后向 DOM 添加一些 html 元素。但是，不知何故，这些新元素没有在 Promise.all.

的 .then 部分注册

let urls = [];

urls.push(someurl);
urls.push(someurl2);

Promise.all(urls.map(url => {
    fetch(url)
        .then(response => {
            return response.json();
        })
        .then(data => {

            ... // do something with the current json and add some <option> elements to the DOM

            let options = document.querySelectorAll('option');
            console.log(options); //is filled with the correct options!


        })
})).then(data => {

    let options = document.querySelectorAll('option');
    console.log(options); // IS EMPTY!!! I expected to see the two sets of the <option> elements

});

结果 HTML 看起来应该在前端，但是 .then 中的 DOM 不是我期望的状态。因此，我在使用 materializecss 库时遇到问题，因为我无法用元素填充 select 下拉列表。就像我在 .then 中初始化 select 下拉菜单时尚未创建它们一样。感谢您的帮助！

解决方案：只需在 fetch 前面放置一个 return！感谢所有为我指出正确方向的人。我不知道为什么 Promise.all(...).then 即使没有正确的 return 也会执行，但这修复了它。

Answer 1

您可以尝试将 map() 方法更新为 return 获取响应，例如：

Promise.all(urls.map(url => fetch(url).then(resp => resp.json())))
   .then(data => {
      console.log(data);

      let options = document.querySelectorAll('option');
      console.log(options);
   })

请注意，在 ES5 中我们会这样做：

var multiply = function(x, y) {
  return x * y;
};

在 ES6 中，我们可以使用箭头函数：

const multiply = (x, y) => { return x * y };

这里需要return语句否则会returnundefined，但是{...}里面的语句还是会执行，只是计算出来的值不会被 returned。因此，在您的代码中 fetch 有效，但最后一个 .then 无效。

此外，如果只有一个表达式，则不需要大括号。所以，前面的例子也可以写成：

const multiply = (x, y) => x * y;

Answer 2

解决方法：fetch 前面少了return。我不知道为什么 .then 即使没有这个 return 也是运行，但这修复了它。另一种解决方案是删除此示例中的大括号。现在一切都如我所愿。

Answer 3

I don't know exactly why the Promise.all(...).then executed even without the correct return, but this fixed it.

如果没有您遗漏的 return，您将传递 Promise.all() 一个 undefined 值的数组。由于该数组中没有承诺，Promise.all() 没有什么可等待的，所以它立即调用了它的 .then() 处理程序。这就是为什么它不等待完成就执行的原因。如果你想让它等待，你必须传递 Promise.all() 一组承诺。

DOM 不在我期望使用 Promise.all(...) 时的状态。然后

The DOM is not in the state I expect it to be when using Promise.all(...).then

javascript

asynchronous

es6-promise