鍍金池/ 問答/HTML/ 這個mergePromise方法是怎么解決這個問題的?

這個mergePromise方法是怎么解決這個問題的?

//實現(xiàn)mergePromise函數(shù),把傳進去的數(shù)組順序先后執(zhí)行,
//并且把返回的數(shù)據(jù)先后放到數(shù)組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?

回答
編輯回答
柒喵

promise的then鏈中的return,并且返回的結(jié)果是一個新的Promise可以被下一個then處理,他利用了這一點,將每一個ajax請求都添加到了一個一個P的then鏈中,這個P是直接通過resolve拿到then鏈的起始。

然后在forEach里面 p = p.then()是為了下一次forEach能夠繼續(xù)跟在then鏈的下一個。

由于then鏈中的處理是對上一個結(jié)果加到數(shù)組里,然后返回本次的新的Promise,所以最后return的時候還要加一句p.then來把最后一次的調(diào)用結(jié)果存進去。

這是一個對Promise的結(jié)構(gòu)的巧妙運用。

2017年6月22日 04:38