For-Schleife nicht abgeschlossen innen Versprechen

Question

Ich versuche, eine Funktion zu schreiben, die eine for-Schleife in einem Versprechen enthält, jedoch führt die Schleife nur bei Iteration und das Versprechen wird nie gelöst.

Mein Code sieht wie folgt aus:

function appendPosts() { 
    return functionThatReturnsAPromise() 
     .then(result => { 
      return new Promise((resolve, reject) => { 
       var list = []; 
       result.forEach(item => { 
       //do stuff to item 
       list.push(item); 
       }); 
      resolve(list); 
      }); 
     }) 
     .then(list => { 
      return new Promise((resolve, reject) => { 
      //This loop only runs once, even when list has contains many items 
      for (var i = 0; i < list.length; i++) { 
      document.querySelector("someSelector").appendChild(list[i]); 
      } 
      resolve(); 
     }); 
    }); 
} 

Klar ich etwas falsch mache. Irgendwelche Ideen?

Danke für Ihre Zeit. - Daniel

Answer 1

@MaazSyedAdeeb hat Recht. In der Schleife wurde eine Ausnahme ausgelöst, und ich hatte keinen Catch-Block. Vielen Dank.

Answer 2

Der Selektor gab wahrscheinlich keine Übereinstimmung zurück, und so wurde appendChild unter undefined aufgerufen, wodurch eine Ausnahme ausgelöst wurde, die in ein abgelehntes Versprechen übersetzt wurde.

Sie könnten diesen Fehler behandeln, wenn in Ihrem Anruf fügen Sie ein .catch:

appendPosts().then(function() { 
    console.log('all done'); 
}).catch(function (err) { 
    console.log('error occurred: ', err); 
}); 

Aber es sollte auch erwähnt werden, dass Sie die promise constructor anti-pattern verwenden. Nämlich, in einem then Callback können Sie einfach einen Wert zurückgeben, und dieser Wert wird der versprochene Wert des Versprechens, das then zurückgeben wird. Es ist also nicht notwendig, new Promise() zu tun. Stattdessen tun Sie dies:

function appendPosts() { 
    return functionThatReturnsAPromise().then(result => { 
     // Just return the mapped array: 
     return result.map(item => { 
      //do stuff to item 
      return item; 
     }).then(list => { 
      for (var i = 0; i < list.length; i++) { 
       // Make sure the selector will result in a match: 
       document.querySelector("someSelector").appendChild(list[i]); 
      } 
     }); 
    }); 
}