Array запоминает случайный порядок каждый раз через цикл

Question

Я пытаюсь хранить несколько объектов в массиве, а затем отображать на заказ.

Мой процесс выглядит следующим образом:

app.js

var allOdds = []; 
var count = 0; 
// ===================================== 
/* Database Config and Error Handling */ 
// ===================================== 
tools.databaseConnect(); 
// Get option number from database 
connection.query("SELECT * FROM OptionNumbers ORDER BY id", function(err, rows, fields) { 
    console.log("CALL FROM DATABASE"); 
    var totalRows = rows.length; 

    rows.forEach(function(key, value) { 

     request('http://url/for/data' + key.number, function(error, response, body) { 

      if (!error && response.statusCode == 200) { 

       // Parse XML response 
       if (body.includes('selection')) { 
        var odds1 = $(body).find('selection').eq(0).attr('odds'); 
        var odds2 = $(body).find('selection').eq(1).attr('odds'); 

        var obj = { 
         team1odds: odds1, 
         team2odds: odds2 
        }; 
        allOdds.push(obj); 

       } else { 
        var obj = { 
         team1odds: 0.00, 
         team2odds: 0.00 
        }; 
        allOdds.push(obj); 
       } 



       if ((count + 1) === totalRows) { 
        // Render index with results 
        res.render('index', { 
         title: 'Best Bets', 
         time: tools.DisplayCityTime('+12'), 
         completeOdds: allOdds 
        }); 
       } 
       count++; 

      } //end if || Nothing Odds Found 

     }); 
    }); 

}); 

порядка «key.number» из базы данных являются последовательными, но порядок процесса хранения объектов кажется случайным?

<% completeOdds.forEach(function(sortedOdds) { %> 
     <div class="rowContainer" style="width:500px; padding:20px; margin-bottom:20px; border:2px solid grey;"> 
      <p style="width:50%; float:left;"> 
       <%= sortedOdds.team1odds %> 
      </p> 
      <p style="width:50%; float:left;"> 
       <%= sortedOdds.team2odds %> 
      </p> 
      <div style="clear:both; width:100%;"></div> 
     </div> 
<% }); %> 

визуализации заказа результат является случайным, например, как показано ниже, например 1 - 3 - 2, 3 - 1 - 2, и т.д. ...

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

Answer 1

Проблема в том, что вы не можете быть уверены, какой запрос будет выполнен в каком порядке. Представьте себе загрузку трех отдельных веб-страниц один за другим в отдельных вкладках. Нет гарантии, что они закончат загрузку в том порядке, в котором вы их открыли.

Использование javascript-обещаний - один из способов решения этой проблемы. Я создаю пустой массив с именем promises. Для каждого сделанного запроса вы создаете новое обещание. Это обещание будет «разрешено» или «отклонено» на основании результата request(...). Это обещание теперь подталкивается к массиву promises в том порядке, в котором вы хотите.

После того, как все обещания в массиве будут решены, будет разрешен Promise.all(promises). Его разрешенным значением будет массив, содержащий разрешенные значения из предыдущих запросов.

var promises = []; 

rows.forEach(function (key, value) { 
    var p = new Promise(function (resolve, reject) { 
     request("...", function (error, response, body) { 
      if (error) { 
       //handle error 
      } else { 
       resolve(body); 
      } 
     }); 
    }); 
    promises.push(p); 
}); 

//this function will not be called until all requests have returned 
Promise.all(promises).then(function (resp) { 
    //these will be in order 
    console.log(resp[0]); 
    console.log(resp[1]); 
    console.log(resp[2]); 
});