javascript - 每次循环存储随机顺序的数组

Question

我正在尝试将多个对象存储到一个数组中，然后按顺序呈现。

我的流程如下:

应用程序.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 是解决这个问题的一种方法。我创建了一个名为 promises 的空数组。对于发出的每个请求，您都会创建一个新的 Promise。该 promise 将根据 request(...) 的结果“解决”或“拒绝”。这个 promise 现在被推送到数组 promises 中，按照你想要的顺序。

一旦数组中的所有 promise 都已解决，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]);
});