DOM не в том состоянии, в котором я его ожидаю при использовании Promise.all (...). Затем

Question

В следующем коде есть ошибка, но я не могу понять это. Я считал, что когда я делаю Promise.all (...)., Тогда все обещания должны быть закончены в этот момент, но это не похоже на это. , Код просто берет несколько jsons из API, а затем добавляет несколько html элементов в DOM. Но каким-то образом эти новые элементы не регистрируются в .then части Promise.all.

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 выглядит так, как будто должен быть на внешнем интерфейсе, но DOM в .then не находится в состояние, которого я ожидаю Из-за этого у меня возникают проблемы с библиотекой материализации css, поскольку я не могу заполнить свой выпадающий список элементами. Как будто они еще не были созданы в момент, когда я инициализирую выпадающий список в .then. Спасибо за помощь!

РЕШЕНИЕ: только что поместили возврат перед покупкой !! Спасибо всем, кто указал мне правильное направление. Я не знаю точно, почему Promise.all (...). Затем выполнялся даже без правильного возврата, но это исправило его.

Answer 1

Вы можете попытаться обновить свой метод map(), чтобы он возвращал ответ о получении, например:

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, в противном случае он вернет undefined, но оператор внутри { ... } все равно будет выполнен , только рассчитанное значение не будет возвращено. Таким образом, в вашем коде fetch работал, но последний .then не работал.

Кроме того, фигурные скобки не требуются, если присутствует только одно выражение. Итак, предыдущий пример также можно записать так:

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

Answer 2

Я не знаю точно, почему Promise.all (...). Затем выполнялся даже без правильного возврата, но это исправило его.

Без return что вы пропустили, вы передавали Promise.all() массив undefined значений. Поскольку в этом массиве не было никаких обещаний, Promise.all() ждать было нечего, поэтому он немедленно вызвал свой обработчик .then(). Вот почему он выполняется без ожидания завершения. Вы должны передать Promise.all() массив обещаний, если хотите, чтобы он ждал.

Answer 3

Решение: отсутствует возврат перед выборкой. Я не знаю, почему .then работал даже без этого возвращения, но это исправило это. Другим решением было бы убрать фигурные скобки в этом примере. Теперь все работает именно так, как я ожидаю.