这个mergePromise方法是怎么解决这个问题的?

发布于 2022-09-07 21:07:39 字数 1060 浏览 10 评论 0

//实现mergePromise函数,把传进去的数组顺序先后执行,
//并且把返回的数据先后放到数组data中

const timeout = ms => new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve();
    }, ms);
});

const ajax1 = () => timeout(2000).then(() => {
    console.log('1');
    return 1;
});

const ajax2 = () => timeout(1000).then(() => {
    console.log('2');
    return 2;
});

const ajax3 = () => timeout(2000).then(() => {
    console.log('3');
    return 3;
});


function mergePromise(ajaxArray){
    let arr = [];
    let p = Promise.resolve();
    ajaxArray.forEach(item=>{
        p = p.then(data=>{
            if(data){
                arr.push(data);
            }
            return item();
        });
    })
    return p.then(data=>{
        arr.push(data);
        return arr;
    })
}

mergePromise([ajax1, ajax2, ajax3]).then(data => {
    console.log('done');
    console.log(data); // data 为 [1, 2, 3]
});

// 分别输出
// 1
// 2
// 3
// done
// [1, 2, 3]

这个mergePromise的原理是什么?
每次重写了p?Promise.resolve?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

最佳男配角 2022-09-14 21:07:39

promise的then链中的return,并且返回的结果是一个新的Promise可以被下一个then处理,他利用了这一点,将每一个ajax请求都添加到了一个一个P的then链中,这个P是直接通过resolve拿到then链的起始。

然后在forEach里面 p = p.then()是为了下一次forEach能够继续跟在then链的下一个。

由于then链中的处理是对上一个结果加到数组里,然后返回本次的新的Promise,所以最后return的时候还要加一句p.then来把最后一次的调用结果存进去。

这是一个对Promise的结构的巧妙运用。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文