循环中的多个异步函数调用[重复]

Question

我有一堆文件要迭代。对于每个文件，根据某些字段值，我可能需要也可能不需要进行异步 AJAX 请求以获取其他数据。在所有这些请求都解决之后，我想将该文件的相关数据附加到网页，然后再继续下一个文件。我的实际代码包含无关信息，但逻辑类似于以下伪代码：

var chain = $.when();
for(x = 0; x < files.length; x++) {
    console.log('FOO');
    chain = chain.then(function() {
        var fieldNamePromises = [];
        var fieldName2Promises = [];

        if ('fieldName' in files[x]) {
            //getFieldNameData returns an AJAX request
            fieldNamePromises.push(getFieldNameData())
        }

        if ('fieldName2' in files[x]) {
            //getField2NameData returns an AJAX request
            fieldName2Promises.push(getFieldName2Data())
        }

        Promise.all(fieldNamePromises.concat(fieldName2Promises)).then(function() {
            console.log('BAR');
        })
    });
}

对我来说，这会记录：

'FOO'
'FOO'
'FOO'
'BAR'
'BAR'
'BAR'

而我想要：

'FOO'
'BAR'
'FOO'
'BAR'
'FOO'
'BAR'

如何强制它等待我的所有异步请求完成后再继续我的循环？

以下还产生三个 FOO，后跟三个 BAR，而不是交替产生 FOO BAR。

getFileHistory(fileNumber, function (files) {
    var chain = $.when();
    for (let x = 0; x < files.length; x++) {
        chain = chain.then(function () {
            console.log('FOO');
            var fieldNamePromises = [];

            fieldNamePromises.push(getData('Data', function () { }))


            fieldNamePromises.push(getData('Data', function () { }))


            return Promise.all(fieldNamePromises).then(function () {
                console.log('BAR');
            })
        });
    }
});

function getFileHistory(fileNumber, callback) {
    var url = window.baseUrl + "api/get-file-history/filter?fileNumber=" + fileNumber;
    return $.ajax({
        type: 'GET',
        url: url,
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (result) {
            callback(result);
        }
    });
}

function getData(id, callback) {
    var url = "api/" + id;
    return $.ajax({
        type: 'GET',
        url: url,
        contentType: 'application/json; charset=utf-8',
        dataType: "json",
        success: function (result) {
            callback(result);
        },
        error: function (error) {
            console.log(error);
        }
    });
}

更新：当我从 getFileHistory（另一个 AJAX 调用）中删除循环时，它会按预期返回 FOO/BAR。不完全确定为什么会有所作为。

Answer 1

尝试为它创建一个不同的异步函数，如下所示

    async function(){
         var chain = $.when();
        for(x = 0; x < files.length; x++) {
            console.log('FOO');
            chain = await chain.then(async() => {
                var fieldNamePromises = [];
                var fieldName2Promises = [];

                if ('fieldName' in files[x]) {
                    //getFieldNameData returns an AJAX request
                    fieldNamePromises.push(getFieldNameData())
                }

                if ('fieldName2' in files[x]) {
                    //getField2NameData returns an AJAX request
                    fieldName2Promises.push(getFieldName2Data())
                }

               await Promise.all(fieldNamePromises.concat(fieldName2Promises)).then(function() {
                    console.log('BAR');
                })
            });
        }
  }