javascript - 如何在for循环内同步then()

Question

我在 for 循环内调用 then() 函数时遇到问题，这是我的下面的代码

代码块

StretchData.getById(item).then(function (data) 

在 j==3 之后调用，但我的要求应该调用每次迭代任何想法如何实现这一点。我尝试了很多方法仍然没有结果。

for (var j = 0; j < 3; j++) {

                StretchData.getById(item)
                .then(function (data) {
                    alert(startWorkOutModel.sortValue);
                    startWorkOutModel.inStretchedData = {
                        sort: startWorkOutModel.sortValue,
                        sData: data.result
                    }
                    startWorkOutModel.stretchedData.push(startWorkOutModel.inStretchedData);
                    fl = true;
                    console.log(JSON.stringify(startWorkOutModel.stretchedData));
                    // break;

                },
                function (error) {
                    alert(JSON.stringify(error));
                });                            

      }

Answer 1

当您有一个需要并行异步处理的循环或数组时，您可以构建一个由 then 返回的 Promise 数组，然后使用 Promise.all 等待它们全部。您通常还会处理来自 Promise.all 的 Promise 错误，而不是单独处理错误，除非您能够进行错误更正并返回一些可使用的内容而不是错误。

一些大致如下:

var promises = [];
for (var j = 0; j < 3; j++) {
    promises.push(
        StretchData.getById(item)
            .then(function(data) {
                // *** Gets called for each individual item
                alert(startWorkOutModel.sortValue);
                startWorkOutModel.inStretchedData = {
                    sort: startWorkOutModel.sortValue,
                    sData: data.result
                }
                startWorkOutModel.stretchedData.push(startWorkOutModel.inStretchedData);
                fl = true;
                console.log(JSON.stringify(startWorkOutModel.stretchedData));

                // *** Normally you'd want to return something here
            })
    );
}
Promise.all(promises)
    .then(
        function(results) {
            // *** Use results (an array of the promise results) here
        },
        function(error) {
            // *** At least one promise failed
        }
    );

正如我在对该问题的评论中提到的，您没有在循环中使用 j ，因此会连续三次执行相同的操作。如果您需要在 Promise 回调代码中使用 j，您有两种选择:

ES5 及更早版本

使用函数将 j 的值捕获到回调可以使用的不变变量中(因为 j 到时将是 3任何这些回调都会运行):

function doRequestFor(value) {
    return StretchData.getById(item)
            .then(function(data) {
                // *** Gets called for each individual item
                // *** Use `value` here (in place of `j`)
                alert(startWorkOutModel.sortValue);
                startWorkOutModel.inStretchedData = {
                    sort: startWorkOutModel.sortValue,
                    sData: data.result
                }
                startWorkOutModel.stretchedData.push(startWorkOutModel.inStretchedData);
                fl = true;
                console.log(JSON.stringify(startWorkOutModel.stretchedData));

                // *** Normally you'd want to return something here
            });
}
var promises = [];
for (var j = 0; j < 3; j++) {
    promises.push(getRequestFor(j));
}
Promise.all(promises)
    .then(
        function(results) {
            // *** Use results here
        },
        function(error) {
            // *** At least one promise failed
        }
    );

ES2015(又名“ES6”)及更高版本

您可以在 for 循环中使用 let 的处理，这意味着每次循环迭代都会获得其自己的 j 副本:

let promises = [];
for (let j = 0; j < 3; j++) {
//   ^^^---------------------------- *** Note
    promises.push(
        StretchData.getById(item)
            .then(function(data) {
                // *** Gets called for each individual item
                // *** Use `j` here, it'll be 0, 1, or 2
                alert(startWorkOutModel.sortValue);
                startWorkOutModel.inStretchedData = {
                    sort: startWorkOutModel.sortValue,
                    sData: data.result
                }
                startWorkOutModel.stretchedData.push(startWorkOutModel.inStretchedData);
                fl = true;
                console.log(JSON.stringify(startWorkOutModel.stretchedData));

                // *** Normally you'd want to return something here
            })
    );
}
Promise.all(promises)
    .then(
        function(results) {
            // *** Use results (an array of the promise results) here
        },
        function(error) {
            // *** At least one promise failed
        }
    );