обещайте все со списками и добавьте внутри

#javascript #asynchronous #promise

Вопрос:

У меня есть две функции, которые содержат асинхронную операцию, возвращающую список. Я использую все обещания, чтобы выполнить их в одно и то же время. Первый список работает, но второй показывает мне неопределенный.

 let content = "<div class='clsLines'>";

return Promise.all([
    firstList()
]).then((messages) => {
    content = messages
    secondList()
}).then((messages) => {
    content = messages
   
    content ="</div>"; // close clsLinesDiv
    $('#id').find('.cls').append(content); // append the lists in a div
});
 

Как я могу отобразить второй список вместо неопределенного?
Должно ли закрытие div и добавления быть внутри или снаружи обещания

Спасибо!

Комментарии:

1. Вы не выполняете их одновременно. Вы начинаете secondList() после firstList() . Но, несмотря на это, вы видите то, что видите, потому что вам не хватает return утверждения: secondList() -> > return secondList(); .

2. Ваши then обратные вызовы должны возвращать обещанное значение, которое должен получить следующий.

3. Ваше Promise.all довольно бесполезно, так как вы передаете только одно обещание. Так и должно быть Promise.all([firstList(), secondList()]) .

Ответ №1:

Вы не выполняете их одновременно. Вы начинаете secondList() после firstList() . Но, несмотря на это, вы видите то, что видите, потому что вам не хватает return утверждения. Это должно быть

 .then((messages) => {
    content = messages
    return secondList()
})
 

Однако вы действительно могли бы выполнить эти обещания «параллельно» и избежать общих переменных:

 Promise.all([firstList(), secondList()])
  .then(([firstResult, secondResult]) => {
    $('#id').find('.cls')
      .append(`<div class='clsLines'>${firstResult}${secondResult}</div>`);
  })