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

最新推荐文章于 2023-08-01 14:41:40 发布

原创最新推荐文章于 2023-08-01 14:41:40 发布 · 1.3w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#promise 循环异步操作

ES6 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在JavaScript中如何使用Promise处理循环内部的异步请求，通过一个公共类实现将所有请求完成后统一返回数据，提高爬虫性能。文章讨论了原始实现的问题，并提供了一种优化解决方案，通过示例代码展示如何在所有异步操作结束后一次性写入数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景介绍：

使用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');
        })
    }

结果：