js中async await声明方法中,关于嵌套循环的复杂情景问题求教?

Leon
  • 1.9k

1、问题情景:

今天在写代码的时候遇到一个比较复杂的问题,我简化后总结如下:
例子:现在我们已经封装了两个函数接口,timeout延时函数与output函数,需求就是在第三个函数eachTest中根据需求调用上述两个已封装好的接口,代码如下:

已封装的代码:

function timeout (millisec) {
    const timeo = new Promise(function(resolve, reject){
        if (typeof millisec != 'number') {
            reject('输入必须是数字类型');
        }
        setTimeout(function () {
            resolve(`延时了${millisec}毫秒后输出`)
        }, millisec)
    });
    return timeo;
}

function output (millisec, callback) {
     timeout(millisec).then(function (result) {
        callback(result);
    })
}

我进行编写的代码(需要循环):

async function eachTest () {
    let arr = []; // 这里定义一个需要的数组
    for (let i = 0; i < 5; i++) {
        await output(1000, function (res) {
            arr.push(res); // 我想在这里循环调用output的方法,
            //把返回回调的值存到数组中,同时把数组返回供外部调用
        });
    }
    return arr;
}

eachTest().then(function(res){
    // 我需要在这里获取上述的eachTest返回的数组,应该怎么拿到?
    console.log(res);
})

我的问题?

大部分的问题都写在上面的注释中了,这里再简单说一下:
我需要在eachTest().then的函数后输入我这需要的数组,但是我每次都发现,先输出的是arr=[]也就是空数组,也就是说先执行了then,(我这里猜测是promise嵌套的问题吗?)并不是我需要的填满数组的数据,也许我是对async还不够熟悉的原因,自己找不到解决方案。
PS:我个人理解的解决方案是在function ouput前加入async关键字,但是我们秉承着不改变原函数接口的理念,就放弃了这个方案。
求教各位大神,有没有好一点的方案解决我的需求,谢谢了!

回复
阅读 1.8k
1 个回答
✓ 已被采纳

首先你使用了 promise 的情况下不要再使用回调了. output 这个函数完全没必要存在.

async function eachTest () {
    let arr = []; // 这里定义一个需要的数组
    for (let i = 0; i < 5; i++) {
        arr.push(await timeout(1000));
    }
    return arr;
}

eachTest().then(function(res){
    // 我需要在这里获取上述的eachTest返回的数组,应该怎么拿到?
    console.log(res);
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏