鍍金池/ 問答/HTML/ js中async await聲明方法中,關(guān)于嵌套循環(huán)的復(fù)雜情景問題求教?

js中async await聲明方法中,關(guān)于嵌套循環(huán)的復(fù)雜情景問題求教?

1、問題情景:

今天在寫代碼的時(shí)候遇到一個(gè)比較復(fù)雜的問題,我簡(jiǎn)化后總結(jié)如下:
例子:現(xiàn)在我們已經(jīng)封裝了兩個(gè)函數(shù)接口,timeout延時(shí)函數(shù)與output函數(shù),需求就是在第三個(gè)函數(shù)eachTest中根據(jù)需求調(diào)用上述兩個(gè)已封裝好的接口,代碼如下:

已封裝的代碼:

function timeout (millisec) {
    const timeo = new Promise(function(resolve, reject){
        if (typeof millisec != 'number') {
            reject('輸入必須是數(shù)字類型');
        }
        setTimeout(function () {
            resolve(`延時(shí)了${millisec}毫秒后輸出`)
        }, millisec)
    });
    return timeo;
}

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

我進(jìn)行編寫的代碼(需要循環(huán)):

async function eachTest () {
    let arr = []; // 這里定義一個(gè)需要的數(shù)組
    for (let i = 0; i < 5; i++) {
        await output(1000, function (res) {
            arr.push(res); // 我想在這里循環(huán)調(diào)用output的方法,
            //把返回回調(diào)的值存到數(shù)組中,同時(shí)把數(shù)組返回供外部調(diào)用
        });
    }
    return arr;
}

eachTest().then(function(res){
    // 我需要在這里獲取上述的eachTest返回的數(shù)組,應(yīng)該怎么拿到?
    console.log(res);
})

我的問題?

大部分的問題都寫在上面的注釋中了,這里再簡(jiǎn)單說一下:
我需要在eachTest().then的函數(shù)后輸入我這需要的數(shù)組,但是我每次都發(fā)現(xiàn),先輸出的是arr=[]也就是空數(shù)組,也就是說先執(zhí)行了then,(我這里猜測(cè)是promise嵌套的問題嗎?)并不是我需要的填滿數(shù)組的數(shù)據(jù),也許我是對(duì)async還不夠熟悉的原因,自己找不到解決方案。
PS:我個(gè)人理解的解決方案是在function ouput前加入async關(guān)鍵字,但是我們秉承著不改變?cè)瘮?shù)接口的理念,就放棄了這個(gè)方案。
求教各位大神,有沒有好一點(diǎn)的方案解決我的需求,謝謝了!

回答
編輯回答
夢(mèng)若殤

首先你使用了 promise 的情況下不要再使用回調(diào)了. output 這個(gè)函數(shù)完全沒必要存在.

async function eachTest () {
    let arr = []; // 這里定義一個(gè)需要的數(shù)組
    for (let i = 0; i < 5; i++) {
        arr.push(await timeout(1000));
    }
    return arr;
}

eachTest().then(function(res){
    // 我需要在這里獲取上述的eachTest返回的數(shù)組,應(yīng)該怎么拿到?
    console.log(res);
})
2018年3月9日 00:07