getJSON('xxxx')
.then(function(response) {
  return Promise.all(response.results.map(getJSON));
})
.then(function(series) {
  series.forEach(addDom);
});

其中getJSON() 是fetch请求,response.results是url的数组,addDom()是对数据的操作;
这段代码实现了:1.url并发请求 2.不同请求的数据顺序操作
但问题是所有请求全部加载完成后再处理数据,如何实现当前顺序的数据加载完成后就立刻对其处理而不等待其他数据


先感谢下大家的回答!
我通过其他途径拿到这样一份答案,同样利用队列,@Xeira的方法很清晰,判断任务是否完成很好理解;但下面这种方法promise用的让我有点晕,不太理解
这里用Xeira的方法改了下:

(()=>{
    Promise.allInOrder = (promises, thenForEach)=>{
        let sequence = Promise.resolve();
        
        promises.forEach(function(request){
            sequence = sequence.then(function(){
              return request.then(thenForEach);
          });
        });

    };
})();

// test
(()=>{
    let timeConsumingFunc = param=>new Promise(
            (resolve)=>{
                let timeout = Math.random() * 5000;
                console.log(`task ${param} will be resolved in ${timeout}ms`);
                setTimeout(()=>{
                    console.log(`${param} resolved`);
                    resolve(param+10);
                }, timeout);
            }
        );
    Promise
        .allInOrder(
            [timeConsumingFunc(1), timeConsumingFunc(2), timeConsumingFunc(3)],
            d=>{
                return new Promise(function(resolve) {
                  console.log(d);
                resolve();
              });
            }
        )
})();

···回复:

写了个例子,可以在chrome的控制台里直接执行

(()=>{
    Promise.allInOrder = (promises, thenForEach)=>{
        let callBackQueue = new Array(promises.length);
        let thenCallbackQueue = new Array(promises.length);

        let queueExecutor = ()=>{
            for(let i=0,l=callBackQueue.length;i<l;i++){
                if(callBackQueue[i] == void(0)){
                    // undefined means this task is not done yet
                    return;
                }else{
                    // execute callback
                    callBackQueue[i]();

                    // set this callback to null since it has been executed
                    callBackQueue[i] = ()=>{};
                }
            }
            // when reach here, it means all callbacks been executed
            Promise.all(thenCallbackQueue).then(ds=>{
                allPromiseResolver(ds);
            });
        };

        let allPromiseResolver = null, 
            allPromiseRejector = null;

        for(let i=0,l=promises.length;i<l;i++){

            promises[i].then(d=>{
                callBackQueue[i] = function(){
                    thenCallbackQueue[i] = new Promise((resolve, reject)=>{
                        let result = thenForEach(d);
                        resolve(result);
                    });
                };

                queueExecutor();
            });
        }

        return {
            all: callback=>{
                return new Promise((resolve, reject)=>{
                    allPromiseResolver = resolve;
                    allPromiseRejector = reject;
                }).then(ds=>{
                    callback(ds);
                });
            }
        }
    };
})();

// test
(()=>{
    let timeConsumingFunc = param=>new Promise(
            (resolve)=>{
                let timeout = Math.random() * 5000;
                console.log(`task ${param} will be resolved in ${timeout}ms`);
                setTimeout(()=>{
                    console.log(`${param} resolved`);
                    resolve(param+10);
                }, timeout);
            }
        );
    Promise
        .allInOrder(
            [timeConsumingFunc(1), timeConsumingFunc(2), timeConsumingFunc(3)],
            d=>{
                console.log(d);
                return d+20;
            }
        )
        .all((ds)=>{console.log(`all method called`);console.log(ds);})
})();

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll Up