循环内部异步函数处理相关问题解析

Posted 2021-10-23 xuxiaoqiangandhm

　　需求分析：根据一级标题ID筛选出所有对应的二级标题，返回一级标题ID，标题名和二级标题ID，标题名组成的数组

　　问题：通过forEach遍历所有一级标题取对应的ID，根据ID条件查找所有的二级标题，遍历符合条件的二级，取出二级标题的ID和标题名，此时，循环内部嵌套条件查找是个异步函数，resolve返回的结果为空。注：此处getSecondTitle为封装的读取数据库的异步函数

const allTitleId =function(firstTitleArray){
    return new Promise(function(resolve,reject){
        let secondArr=[],
            secondObj={},
            itemObj={},
            dataArray=[];
            //console.log(1)
        firstTitleArray.forEach(function(item){
            console.log(1)
                getSecondTitle(item).then(function(ret){
                // console.log(ret)
                secondArr=[];
                ret.forEach((item2)=>{
                    secondObj={};
                    secondObj[‘_id‘] = String(item2._id);
                    secondObj[‘title‘] = item2.title;
                    secondArr.push(secondObj)
                    //console.log(secondArr)
                })
                console.log(2)
                itemObj = JSON.parse(JSON.stringify(item));
                itemObj[‘secondTitle‘]= secondArr;
                dataArray.push(itemObj)
            }).catch(function(err){
                reject(err)
            })
        })
        console.log(3)
        resolve(dataArray)
    })
}

　　解决：javascript代码都是同步执行的，代码都在在一个代码“队列”里面。与此同时javascript还有一个“Event Queue”，事件队列里都是处理一些异步的callback/handler，处理ajax response，点击啊，文件，数据库操作结果。关键是，只有代码队列所有代码都执行完毕了，javascript才会从事件队列里取出一个callback/handler来执行。依赖于事件循环处理异步函数获取数据，会导致脚本事件执行顺序不正确，无法按需求获取数据。应采用递归方法处理异步函数获取数据。

const allTitleId =function(firstTitleArray){
    return new Promise(function(resolve,reject){
        let secondArr=[],
        secondObj={},
        itemObj={},
        dataArray=[];
        (function secondTitleloop(index){
            getSecondTitle(firstTitleArray[index]).then(function(ret){
                secondArr=[];
                ret.forEach((item2)=>{
                    secondObj={};
                    secondObj[‘_id‘] = String(item2._id);
                    secondObj[‘title‘] = item2.title;
                    secondArr.push(secondObj)
                })
                itemObj = JSON.parse(JSON.stringify(firstTitleArray[index]));
                itemObj[‘secondTitle‘]= secondArr;
                dataArray.push(itemObj)
                if (++index<firstTitleArray.length) {
                    secondTitleloop(index);
                } else {
                    resolve(dataArray)
                }
            }).catch(function(err){
                reject(err)
            })
        }
        )(0)
    })
}