首页 > 解决方案 > jQuery 嵌套 ajax forEach 等待异步

问题描述

我有一个数组,我想遍历它并对服务器进行 ajax 调用。等待另一个数组的响应,而不是结果,我必须遍历结果并进行 ajax 调用。比而且只有比我可以移动到外在的承诺。

注意我使用首字母缩写词promise 只是因为我尝试了promise 并且没有任何运气。

所以基本上我想实现这个序列:

输出1->输入1->输入2->输入3->输出2

...依此类推 基本上所有请求都是 1 接 1 的,当外部完成时,内部开始 1 接 1,而不是准备就绪时处理下一个外部,依此类推。

这是代码:

var OuterPromises = range(1, 10);
var InnerPromises = [];

$('.--btn-start-promising').click(function() {
    asyncForEach(OuterPromises, async (OuterPromise) => {
        await $.ajax({
            url: '/index.php/merger/outerpromise',
            complete: async function (_r)
            {
                try{
                    _r = JSON.parse(_r.responseText);
                    SysOut(_r);
                    asyncForEach(_r, async  (InnerPromise) => {

                        await $.ajax({
                            url: '/index.php/merger/innerpromise/'+InnerPromise,
                            complete: await function(_r)
                            {
                                SysOut(_r.responseText);
                            }
                        })
                    }).catch(e => {})
                } catch (e) {
                    SysOut(e);
                }
            }
        })
    }).catch(e => {})
})

function range(min, max){
    const arr = Array(max - min + 1)
        .fill(0)
        .map((_, i) => i + min);
    return arr;
}

function SysOut(...args)
{
    $.each(args, function(i, a) {
        console.log(a);
    })
}

async function asyncForEach(array, callback) {
    for (let index = 0; index < array.length; index++) {
        await callback(array[index], index, array);
    }
}

所有呼叫都在完成,但它们没有按照我想要的顺序完成,基本上它们被打乱了,有时我也看到并行呼叫。

我究竟做错了什么?

标签: jqueryajaxforeachasync-await

解决方案


推荐阅读