Promise面試題2實(shí)現(xiàn)異步串行執(zhí)行

cikenerd 發(fā)布于2019-08-23 15:31 / 2875人閱讀

摘要：按照要求實(shí)現(xiàn)函數(shù)，把傳進(jìn)去的函數(shù)數(shù)組按順序先后執(zhí)行，并且把返回的數(shù)據(jù)先后放到數(shù)組中。例子中我們是按順序執(zhí)行的，但是輸出的結(jié)果卻是，對于這些異步函數(shù)來說，并不會按順序執(zhí)行完一個(gè)，再執(zhí)行后一個(gè)。

按照要求：
實(shí)現(xiàn) mergePromise 函數(shù)，把傳進(jìn)去的函數(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;

});

const mergePromise = ajaxArray => {

// 在這里實(shí)現(xiàn)你的代碼

};

mergePromise([ajax1, ajax2, ajax3]).then(data => {

console.log("done");
console.log(data); // data 為 [1, 2, 3]

});

// 要求分別輸出
// 1
// 2
// 3
// done
// [1, 2, 3]

分析：

timeout是一個(gè)函數(shù)，這個(gè)函數(shù)執(zhí)行后返回一個(gè)promise實(shí)例。

ajax1 、ajax2、ajax3 都是函數(shù)，不過這些函數(shù)有一些特點(diǎn)，執(zhí)行后都會會返回一個(gè) 新的promise實(shí)例。

按題目的要求我們只要順序執(zhí)行這三個(gè)函數(shù)就好了，然后把結(jié)果放到 data 中，但是這些函數(shù)里都是異步操作，想要按順序執(zhí)行，然后輸出 1，2，3并沒有那么簡單，看個(gè)例子。

function A() {
setTimeout(function () {

  console.log("a");

}, 3000);
}

function B() {
setTimeout(function () {

  console.log("b");

}, 1000);
}

A();
B();

// b
// a

例子中我們是按順序執(zhí)行的 A，B 但是輸出的結(jié)果卻是 b，a 對于這些異步函數(shù)來說，并不會按順序執(zhí)行完一個(gè)，再執(zhí)行后一個(gè)。

這道題主要考察的是Promise 控制異步流程，我們要想辦法，讓這些函數(shù)，一個(gè)執(zhí)行完之后，再執(zhí)行下一個(gè)，代碼如何實(shí)現(xiàn)呢？

// 保存數(shù)組中的函數(shù)執(zhí)行后的結(jié)果
var data = [];

// Promise.resolve方法調(diào)用時(shí)不帶參數(shù)，直接返回一個(gè)resolved狀態(tài)的 Promise 對象。
var sequence = Promise.resolve();

ajaxArray.forEach(function (item) {

// 第一次的 then 方法用來執(zhí)行數(shù)組中的每個(gè)函數(shù)，
// 第二次的 then 方法接受數(shù)組中的函數(shù)執(zhí)行后返回的結(jié)果，
// 并把結(jié)果添加到 data 中，然后把 data 返回。
sequence = sequence.then(item).then(function (res) {
    data.push(res);
    return data;
});

})

// 遍歷結(jié)束后，返回一個(gè) Promise，也就是 sequence，他的 [[PromiseValue]] 值就是 data，
// 而 data（保存數(shù)組中的函數(shù)執(zhí)行后的結(jié)果）也會作為參數(shù)，傳入下次調(diào)用的 then 方法中。
return sequence;

大概思路如下：全局定義一個(gè)promise實(shí)例sequence，循環(huán)遍歷函數(shù)數(shù)組，每次循環(huán)更新sequence，將要執(zhí)行的函數(shù)item通過sequence的then方法進(jìn)行串聯(lián)，并且將執(zhí)行結(jié)果推入data數(shù)組，最后將更新的data返回，這樣保證后面sequence調(diào)用then方法，如何后面的函數(shù)需要使用data只需要將函數(shù)改為帶參數(shù)的函數(shù)。

歡迎轉(zhuǎn)發(fā)、關(guān)注、點(diǎn)擊好看。