循环里面嵌套一个异步请求，所有循环执行完毕后再返回请求的数据

来源：互联网发布：vs2013能做php开发吗编辑：程序博客网时间：2024/05/30 04:44

场景介绍：

使用es6实现爬虫，先遍历完列表，然后循环列表的根据url去查询每篇文章的详细内容，最后将所有爬取完的数据写入数据库（只写一次，避免数据库频繁的打开的关闭，影响性能）。

原始实现方式和痛点分析：

var list =["url1","url2","url3",.....];

for(let i = 0;i< list.length;i++){

$.ajax(list[i],function(data){

console.log("success");

//data是执行成功后获取到的url1对应的文章详细内容

//第一次查询完成后就必须把该数据写到数据库中，这样太影响性能

dataBase.writeDB(data);

},"json")

}

思考：

能否在for循环完成后将所有文章的详细内容返回，然后统一写进数据库？

实现一个公共类：

iteratorArr: function(arr, promiseCallback) {
        var it = arr[Symbol.iterator]();
        var list = [];

        return x(it.next());

        function x(item) {
            if (item.done) {
                return Promise.resolve(list);
            }
            return promiseCallback(item.value).then(function(value) {
                return list.push(value);
            }).then(function() {
                return x(it.next());
            }).catch(Promise.reject)
        }
    }

测试：

$("#test").click(function(){
var arr = [1,2,3,4,5];

       //调用上面的公共类
        helper.iteratorArr(arr,promiseCallBack).then(function(list){
            console.log("_----------------------------------0");
            console.log(list);
        });
    })
    function promiseCallBack(){
        return new Promise((resolve,reject)=>{
            setTimeout(resolve,2000,'done');
        })
    }

结果：

0 0