遍历一组对象，为每个对象调用一个承诺并在完成时进行记录

Question

在这个问题中，我试图循环遍历从承诺中检索到的对象数组，以及我想要的数组中的每个对象调用另一个承诺。一旦我调用了所有这些承诺，我想将 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; }

Answer 1

使用Array.prototype.map将value数组变成一个Promises数组，并在该数组的Promise.all上调用.then。您还应该避免 Promise-as-callback 反模式，只是 return 来自一个 .then 的 Promise 将它链接到下一个 .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();

请注意，您当前的代码似乎没有在第一个响应中使用任何内容，除了结果数组的长度，这很奇怪 - 如果您想使用您正在迭代的项目（创建new URL 来获取，例如），使用上面映射函数中的 item 变量。

Answer 2

您需要将承诺收集到数组中并使用 Promise.all() in order to provide a callback when all are completed. The easiest way to do that is to change your for loop into a call to 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; }

Answer 3

您可以使用 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

遍历一组对象，为每个对象调用一个承诺并在完成时进行记录

Looping through an array of objects, calling a promise for every object and logging when it's complete

javascript

object

promise

ecmascript-6

es6-promise