Цикл массива объектов, вызов обещания для каждого объекта и ведение журнала, когда он завершен - PullRequest
Новая
       15

Цикл массива объектов, вызов обещания для каждого объекта и ведение журнала, когда он завершен

0 голосов
/ 02 марта 2019

В этой задаче я пытаюсь перебрать массив объектов, извлеченных из обещания, и для каждого объекта в массиве я хочу вызвать другое обещание.После того, как я вызвал все эти обещания, я хочу записать сообщение DONE на консоли.

Как я могу узнать, когда все обещания выполнены? 

function myFunction() {
  fetch("https://jsonplaceholder.typicode.com/albums").then(first_response => {
    first_response.json().then(function(value) {
      for (var i = 0; i < value.length; i++) {
        fetch("https://jsonplaceholder.typicode.com/users")
          .then(second_response => second_response.json())
          .then(value => console.log(value))
      }
      console.log("DONE!!");
    });
  });
}

myFunction();
.as-console-wrapper { max-height: 100% !important; top: 0; }

Ответы [ 3 ]

0 голосов
/ 02 марта 2019

Вам нужно собрать обещания в массив и использовать Promise.all(), чтобы обеспечить обратный вызов, когда все будет выполнено.Самый простой способ сделать это - изменить цикл for на вызов Array.prototype.map(): 

function myFunction() {
  fetch("https://jsonplaceholder.typicode.com/albums").then(first_response => {
    return first_response.json();
  }).then(function(value) {
    const promises = value.map((_, i) => {
      return fetch("https://jsonplaceholder.typicode.com/users")
        .then(second_response => second_response.json())
        .then(value => console.log(value))
    });
    return Promise.all(promises);
  }).then(() => console.log("DONE!!"));
}

myFunction();
.as-console-wrapper { max-height: 100% !important; top: 0; }
0 голосов
/ 02 марта 2019

Вы можете использовать функцию обещаний функции es6, чтобы собрать все ваши запросы на выборку, и если все обещания выполнены, вы можете напечатать готово. 

    function myFunction () {
  var promises = [];
  var promise = undefined;
   fetch("https://jsonplaceholder.typicode.com/albums").then(first_response => {
       first_response.json().then(function(value) {
            for (var i = 0; i < value.length; i++){
              promise = fetch("https://jsonplaceholder.typicode.com/users/?id="+value[i].id)
                  .then(second_response => second_response.json())
                  .then(value => console.log(value))   
              promises.push(promise)
            }
        Promise.all(promises).then(function(){ console.log("Done!");});
       });
   });
}

https://codepen.io/Shajith/pen/vPGGPJ?editors=0010

0 голосов
/ 02 марта 2019

Используйте Array.prototype.map, чтобы превратить массив value в массив Promises, и вызовите .then для Promise.all этого массива.Вам также следует избегать антипаттерна Promise-as-callback, просто return Обещание от одного .then, чтобы связать его с следующим .then, не создавая ненужных вложений: 

function myFunction () {
  fetch("https://jsonplaceholder.typicode.com/albums")
    .then(first_response => first_response.json())
    .then(arr => Promise.all(arr.map(item => 
       fetch("https://jsonplaceholder.typicode.com/users")
       .then(second_response => second_response.json())
       .then(value => console.log(value))
      )))
    .then(() => {
      console.log("DONE!!");      
    });
}

myFunction();

Обратите внимание, что ваштекущий код, по-видимому, не использует ничего в первом ответе, кроме длины результирующего массива, что довольно странно - если вы хотите использовать элемент, который вы перебираете (например, для создания нового URL-адреса для извлечения), используйте переменную item в приведенной выше функции отображения.

...