手写场景 | 实现mergePromise函数

题目描述

实现mergePromise函数，把传进去的数组按顺序先后执行，并且把返回的数据先后放到数据data里面

const time = (timer) => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve();
        }, timer);
    })
};

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

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


const ajax3 = () => time(1000).then(() => {
    console.log(3);
    return 3;
})

function mergePromise(promises) {
    // code in here

}


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

思路分析

这里要按照顺序执行，也就是执行1-2-3这样的顺序，但是1-2-3都用了setTimeout并且时间是不一致的，如果按照普通的思路，那么2-3会在1之前去执行，这样显然是不对的

• 可以在执行ajax函数之前包装一个promise实例，让ajax在then里面执行

• 定义一个数组data用于保存所有的结果

• mergePromise一定返回一个promise实例

代码实现

function mergePromise(ajaxArray) {
    // promises = [ajax1, ajax2, ajax3];
    // 存放结果
    let data = [];
    let promise = Promise.resolve();
    ajaxArray.forEach(ajax => {
        // 第一次then是为了调用ajax函数
        // 第二次then是为了获取结果
        promise = promise.then(ajax).then(res => {
            data.push(res);
            return data;
        })
    });
    return promise;
}

/*
	promise执行结果如下
	初始化：
	Promise {<fulfilled>: undefined}
	第一次：
	Promise {<fulfilled>: [1]}
	第二次：
	Promise {<fulfilled>: [1，2]}
	第三次：
	Promise {<fulfilled>: [1，2，3]}
*/

// 执行结果为：
/*
	1
    2
    3
    done
    data: [ 1, 2, 3 ]
*/