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

        });
    });

});

＆＃34; key.number＆＃34;的顺序从数据库是一致的，但存储对象的进程的顺序似乎是随机的？

<% 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。根据{{1}}的结果，此承诺将被“解决”或“拒绝”。此承诺现在按您想要的顺序推送到数组request(...)。

一旦解决了阵列中的所有承诺，我们将解决promises。其解析的值将是一个包含先前请求的已解析值的数组。

Promise.all(promises)

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

1 个答案: