如何在循环的每次迭代中执行 promise.then？ Javascript

Question

我在循环中遇到了 promise 的问题。 我在数据库中有 10000 行，我想打印前 1000 行，然后获取 9 个请求来打印 rest。 从技术上讲，我想在循环的每次迭代中打印 1000 个结果，为此，我使用 promise 来获取数据，然后创建 1000 行并打印它。

但问题是，首先 JavaScript 的循环获取 10 个请求，然后一起执行 10.THEN。

我是说：

1000 results  (First loop)
2000 results (Second loop) - Append 1000 new rows to last 1000.
3000 results (Third loop) - Append 1000 new rows to last 2000.
....

我得到的：

在最后一张图片中，“第一个 for 循环”收到 10 个请求，当循环完成时，.THEN 打印每个 promise 回调 (.THEN)

那是我的代码：

fetchData('ArticulosSearch', inputValues).then(function (data) {
        console.log(data);
        var source = getGridSource(url, datafields, "array", data);
        // Creamos el grid con las primeras 1000 rows obtenidas
        $("#GridAseguradora").createGrid(source, dataColumns, params);

        //Obtenemos el nº de registros que tiene la bbdd para calcular cuantas peticiones debe hacer
        setTimeout(() => {
            fetchData('ArticulosSearchCount', inputValues).then(function (total_rows) {
                console.log("count");
                console.log(total_rows);
                var filt = (total_rows[0].Column1 / 1000) //pagines - peticiones
                console.log(filt);

                // Creamos promesa para añadir posteriormente las filas al grid una vez hayan terminado todas las peticiones
                for (var i = 1; i < filt; i++) {
                    (function (i) {
                        console.log("first for loop");
                        inputValues.offset = (1000 * i)
                        fetchData('ArticulosSearch', inputValues).then(function (data) {  //Obtenemos las 1000 siguientes filas y las añadimos a un array
                            console.log("obtain 1000 results");
                            console.log(data);
                            var rows = new Array();

                            data.forEach(el => {
                                rows.push(generaterow(el))
                            });

                            $("#GridAseguradora").jqxGrid('addrow', null, rows); // Agregamos las filas generadas anteriormente al grid
                            $("#GridAseguradora_contRegTotal").text("Reg. Visibles: " + $("#GridAseguradora").jqxGrid('getrows').length)
                        })
                    })(i);
                }
            })
        }, 100);
    })

我想获得的 Console.logs：

1-first for loop
obtain 1000 results
(append results)

2-first for loop
obtain 1000 results
(append results)

.....

我希望的是客户看到产品是一点一点加载的，而不是剩下的9000个一起加载

Answer 1

当您运行循环时，您会立即附加.then()子句，因此它们会立即得到解决。 您基本上想要阻止每个循环迭代，直到 promise 解决，然后继续下一个并重复。

你也可以使用 async / await 来做到这一点，但这里是你如何使用 Promise 实现同步循环迭代：

let promise = Promise.resolve()

for (let i = 0; i < 10; i++) {
  promise = promise.then(() => {
    fetchData('ArticulosSearch', inputValues).then(res => {
       // your logic here
    })
  })
}

您使用Promise.resolve()初始化一个新的 promise 并在每个循环迭代中继续将then()附加到它。 这些.then()仅在前一个解决后才会执行。

这将确保事情一个接一个地安排妥当。

看看这个片段，我试图模拟一些需要可变时间来解决的异步操作：

 const outputEl = document.getElementById('output') const fetchSomethingFromDBAsyncFake = (idx) => new Promise((resolve, reject) => { const timeout = setTimeout(() => { outputEl.innerHTML += ` <br /> Loaded chunk ${idx} ` resolve() clearTimeout(timeout) }, 500 + Math.random() * 1750) }) let promise = Promise.resolve() for (let i = 0; i < 10; i++) { promise = promise.then(() => fetchSomethingFromDBAsyncFake(i)) }

 <div id="output"></div>