javascript - 如何更改嵌套 for 循环中的 promise ？

Question

这是我的一个乱七八糟的函数。这将从 csv 文件中获取模型变体(作为字符串在数组中)(此文件的路径取决于我们从其他 csv 文件中获取的文本，因此循环)。

您看到的 csvService.getCsvAsArray 调用获取一个对象，其中包含 csv 文件的内容，其中每一列都存储在一个数组中，该数组位于具有顶列名称的属性下。这工作正常，所以只要知道当您看到类似 result["NavigationSectionShortNames"] 的东西时，它只是一个字符串数组。

    var INDEX_OF_PRODUCTS_SECTION = 1;
    var getAllModelVariants = function () {
        return csvService.getCsvAsArray("Contents/Sections/" + navFileNames[INDEX_OF_PRODUCTS_SECTION] + "/order.csv").then(function (result) {
            var products = [];
            for (var i = 0; i < result["NavigationSectionShortNames"].length; i++) {
                csvService.getCsvAsArray("Contents/Sections/" + navFileNames[INDEX_OF_PRODUCTS_SECTION] + "/" + result["NavigationSectionShortNames"][i]
                + "/order.csv").then(function (productModelInfo) {
                    var productFamilies = []; //array of all different families for a certain product
                    for (var j = 0; j < productModelInfo["NavigationSectionShortNames"].length; j++) {
                        csvService.getCsvAsArray("Contents/Sections/" + navFileNames[INDEX_OF_PRODUCTS_SECTION].length + "/" + result["NavigationSectionShortNames"][i] + "/" + productModelInfo["NavigationSectionShortNames"][j] + "/order.csv").then(function (modelVariants) {
                            var productModels = []; //array of all different model types for a certain family
                            for (var k = 0; k < modelVariants.length; k++) {
                                productModels.push(modelVariants["NavigationSections"][k]);
                            };
                            productFamilies.push(productModels);
                        });
                    };
                    products.push(productFamilies);
                });

            };
        })
        return products;
    };

显然，这是行不通的，因为在解决 promise 时，递增变量(i、j 或 k)已经更改。是否可以成功地在嵌套的 for 循环中使用 promises？我遇到过 $q.all 但我正在努力弄清楚如何将它应用到我的函数中。我目前正在查看 this example它在单个 for 循环中使用 promises，我将尝试对其进行扩展。

我的愿望是返回一个 3D 数组(例如，请参阅问题底部的 plunker)。

如果有帮助，这里是这个函数的一个简化版本，带有静态数据并且没有 promise :

    var getAllModelVariantsTest = function () {
        var result = ["productFamily1", "productFamily2", "productFamily3"];
        var testArray = ["productFamilyModel1", "productFamilyModelt2", "productFamilyModel3", "productFamilyModel4"];
        var testArray3 = ["productFamilyModelVariant1", "productFamilyModelVariant2", "productFamilyModelVariant3", "productFamilyModelVariant4"];
            var products = [];
            for (var i = 0; i < result.length; i++) {
                    var productFamilies = []; //array of all different families for a certain product
                    for (var j = 0; j < testArray.length; j++) {
                            var productModels = []; //array of all different model types for a certain family
                            for (var k = 0; k < testArray3.length; k++) {
                                productModels.push(testArray3[k]);
                            };
                            productFamilies.push(productModels);
                    };
                products.push(productFamilies);
            };
            return products;
    };
    var testOutput = getAllModelVariantsTest();

Here it is in plunker form

如果您运行它，您可以看到一个示例，说明我希望使用上面的函数获得什么样的输出。

我想知道如何让嵌套 for 循环中带有 promise 的第一个函数像 plunker 中的版本一样工作。有没有办法通过增加计数器变量和 promise 来做到这一点？

$q.all 是要走的路吗？

非常感谢您的宝贵时间。如果您还需要什么或者我不清楚，请告诉我。

Answer 1

回调 hell 或厄运金字塔解决方案:

function fatchAllDataForProduct(product) {

  var getProductFamilies = (product) => Promise.resolve(["productFamily1", "productFamily2", "productFamily3"]);
  var getFamilyModels    = (productFamily) => Promise.resolve(["productFamilyModel1", "productFamilyModelt2", "productFamilyModel3", "productFamilyModel4"]);
  var getModelVariants   = (familyModel) => Promise.resolve(["productFamilyModelVariant1", "productFamilyModelVariant2", "productFamilyModelVariant3", "productFamilyModelVariant4"]);
  var processVariant     = (modelVariant) => modelVariant;
  var mapFunArray = ( fun ) => (array) => array.map( fun ); // mapFunArray( e => e )( [1,2,3,4] )

  return getProductFamilies(product)
    .then( pfs => pfs
      .map( pf => getFamilyModels(pf)
        .then( fms => fms
          .map( fm => getModelVariants(fm)
            .then( mvs => mvs
              .map( processVariant )
            )
          )
        )
      )
    );
}

fatchAllDataForProduct('foobarProduct').then(
  results => {
    console.log(results);
  }
);

getFoos 返回 Promise。
我们调用 then 返回另一个 Promise。
在 then 中，我们调用 foos.map(..getBars().then..) 返回 promise 数组。
在 then 中，我们调用 bars.map(..getGoos.then..)。
Goos promise 反过来解决结果。

得到的是(*表示数组):

productPromise:
  *familyPromise:
    *modelsPromise:
      *processedVariant

要摆脱回调 hell 问题，您可以使用 EcmaScript7 的 async/await 功能，今天可用于 Babel 等转译器。

async function fatchAllDataForProduct(product) {

  var getProductFamilies = (product) => Promise.resolve(["productFamily1", "productFamily2", "productFamily3"]);
  var getFamilyModels    = (productFamily) => Promise.resolve(["productFamilyModel1", "productFamilyModelt2", "productFamilyModel3", "productFamilyModel4"]);
  var getModelVariants   = (familyModel) => Promise.resolve(["productFamilyModelVariant1", "productFamilyModelVariant2", "productFamilyModelVariant3", "productFamilyModelVariant4"]);
  var processVariant     = (modelVariant) => modelVariant;

  var pfs = await getProductFamilies(product);
  var promises = pfs.map( async(pf) => {
    var fms = await getFamilyModels(pf)
    return fms.map( async(fm) => {
      var mvs = await getModelVariants(fm);
      return mvs.map( processVariant )
    })
  });
  return Promise.all(promises);
}

fatchAllDataForProduct('foobar').then(
  results => {
    for(var promise of results) {
      promise.then(...)
    }
  }
);