如何在循環的每次迭代中執行 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>