承诺循环！如何？

Question

我一直试图让这段代码工作一段时间，但我似乎无法得到它。它用于实时更新图，它为每个点接收一个 [x, y] 数组，因此是一个数组数组。

输入是来自服务器的JSON 列表，它更新相同的JSON 对象（因此它更改了一个JSON 并仅更新值）：

[
  {
    "Value": 10,
    "Name": "Name of variable"
  }
]

我只需要提取值。

我试过这样：

var getValueData = async function() {
    var valueJSON = await Promise.resolve($.getJSON( "{% url 'get_value' %}" ));
    return valueJSON[0]['Value'];
};

var data = [];
var totalPoints = 100;
var updateInterval = 1000;
var now = new Date().getTime();

function getData() {
    data.shift();

    while (data.length < totalPoints) {
        var value = [now += updateInterval,
                    getValueData().then(function(result) {
                        result;
                    })
                   ];

        data.push(value);
    };
};

基本上，getData() 正在尝试从JSON 构建X = timestamp.now() 和Y = "Value" 的数组，然后将该数组推送到我的"overall" 数据数组中。

这样做会使value 成为[<timestamp>, Unresolved] 的数组。

这样做：

while (data.length < totalPoints) {
    getZScoreData().then(function (result) {
        var valueArray = [now += updateInterval, result];
        data.push(valueArray);
    });
};

使valueArray 成为实际的[<timestamp>, <JSON "value"]，如果我console.log(value)，除了这种方式似乎永远挂起服务器并为选项卡消耗大量RAM，就好像我在做一个无限循环（数百对 Web 服务器的获取请求，即使最大长度应为 100）。不过，我不确定 Promise 内部发生了什么来获得这种行为。

这是示例中的代码：

while (data.length < totalPoints) {     
    var y = Math.random() * 100;
    var value = [now += updateInterval, y];

    data.push(value);
};

看起来很简单。它说 y（在var value = [now += updateInterval, y]; 中）使“y”从我的 API 中获取值。

我不知道如何实际实现这一点。

我正在关注this Flot example 中的示例，但我无法使其与来自 AJAX 或 Promise 的实际实时值一起工作（我什至尝试过 fetch）。

“实时更新表”的所有示例最终都只使用math.random()，这很容易引起误解，因为它只是在移动，但并不是真正的实时。

我相信我没有正确解决循环中的承诺，但由于缺乏经验，在这一点上我什至不确定出了什么问题。

我不确定我将在我的代码中的哪个位置Y = "live value"，或者我是否必须在某个地方返回结果？我对 Promises 或 AJAX 不太熟悉。

Answer 1

你应该记住的一些事情

• 您的 getValueData 没有到达 return 语句，因为它 到达Promise.resolve 后立即解决。 （在我的例子中， 现在getData 返回一个承诺）
• 使用Promise.all 这样您就不用等待了 在执行下一个之前完成上一个......它 一旦团队中的每个承诺解决，或者其中一个解决，就会解决 失败（你必须.catch 那）。
• 了解更多关于Promises的信息，一开始他们很害怕，但you'll end up loving em

试试这个代码，它可能不起作用，因为我没有完整的工作示例，但你可以绕过错误并让它工作。

var results = [],
    totalPoints = 100,
    pointsLeft = totalPoints, // since we are using Promise.all, now we have to track this instead of results.length
    updateInterval = 1000,
    promises = [],
    getValueData = async function(timestamp) {
        await $.getJSON('yourURL').done(function (data) {
           pointsLeft-- // promise fulfilled 
           Promise.resolve({ data, timestamp })
        }).fail(Promise.reject)
    };

function getData() {
    // results.shift(); why?

    while (pointsLeft) {
        // push the promise to the stack, collect them later
        promises.push(getValueData(Date.now()))
    };


    Promise.all(promises).then(function (responses) {
        responses.forEach(function (data, timestamp) {
            results.push([timestamp, data])
        })
    }).catch(console.warn)
};

Answer 2

您可以生成 Promise 数组，然后使用 Promise.all 等待解析。

// Let's imitate some async operation
// It is instead of your getValueData
function twiceAsync(a) {
  // returns a promise resolving to twice argument
  return new Promise(function(ok) {
    setTimeout(function(){ok(2*a)}, 100);
  });
}

var pList = [];
for (var i = 0; i < 100; ++i) {
  // collect promises returned by twiceAsync to an array
  pList.push(twiceAsync(i));
}

Promise.all(pList) // provide array of promises to Promise.all
  .then(function(results) { // receive resolved results, they should be even numbers from 0*2 to 99*2
    console.log(results);
  })

Answer 3

循环中的 Promise 很少是一个好主意，您通常希望使用 Promise.all() 一次执行多个 Promise，并将它们的结果收集到一个数组中：

function getData() {
    // Note: Why is this here?
    data.shift();

    var promises = [];
    while (data.length < totalPoints) {
        promises.push(getValueData());
    }

    Promise.all(promises).then(results => {
        for (let result of results) {
            var value = [
                now += updateInterval,
                result
            ];
            data.push(value);
        }
    });
};

MDN 有一些关于 Promises 的好资料：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

附带说明一下，同时执行 100 个 AJAX 请求听起来相当费劲，即使使用 Promise.all() 也是如此。如果您对后端有任何影响，您应该尝试优化后端，或者查看Workers 以​​批量执行请求。