快捷導(dǎo)航

探究一道價值25k的螞蟻金服異步串行面試題

更新時間：2020年08月21日 16:50:35 作者：晨曦時夢見兮

這篇文章主要介紹了探究一道價值25k的螞蟻金服異步串行面試題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

朋友去面試螞蟻金服，遇到了一道面試題，乍一看感覺挺簡單的，但是實現(xiàn)起來發(fā)現(xiàn)內(nèi)部值得一提的點還是挺多的。

先看題目：

const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);

createFlow([
 () => log("a"),
 () => log("b"),
 subFlow,
 [() => delay(1000).then(() => log("d")), () => log("e")],
]).run(() => {
 console.log("done");
});

// 需要按照 a,b,延遲1秒,c,延遲1秒,d,e, done 的順序打印

按照上面的測試用例，實現(xiàn) createFlow：

flow 是指一系列 effects 組成的邏輯片段。
flow 支持嵌套。
effects 的執(zhí)行只需要支持串行。

分析

先以入?yún)⒎治?，createFlow 接受一個數(shù)組作為參數(shù)（按照題意里面的每一項應(yīng)該叫做 effect)，排除掉一些重復(fù)的項，我們把參數(shù)數(shù)組中的每一項整理歸類一下，總共有如下幾種類型：

普通函數(shù)：

() => log("a");

延遲函數(shù)（Promise）：

() => delay(1000).then(() => log("d"));

另一個 flow：

const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);

用數(shù)組包裹的上述三項。

實現(xiàn)

先把參數(shù)淺拷貝一份（編寫庫函數(shù)，盡量不要影響用戶傳入的參數(shù)是個原則），再簡單的扁平化 flat 一下。（處理情況 4）

function createFlow(effects = []) {
 let sources = effects.slice().flat();
}

觀察題意，createFlow 并不會讓方法開始執(zhí)行，需要 .run() 之后才會開始執(zhí)行，所以先定義好這個函數(shù)：

function createFlow(effects = []) {
 let sources = effects.slice().flat();
 function run(callback) {
  while (sources.length) {
   const task = sources.shift();
  }
  callback?.();
 }
}

這里我選擇用 while 循環(huán)依次處理數(shù)組中的每個 effect，便于隨時中斷。

對于函數(shù)類型的 effect，直接執(zhí)行它：

function createFlow(effects = []) {
 let sources = effects.slice().flat();
 function run(callback) {
  while (sources.length) {
   const task = sources.shift();
   if (typeof task === "function") {
    const res = task();
   }
  }
  // 在所有任務(wù)執(zhí)行完畢后 執(zhí)行傳入的回調(diào)函數(shù)
  callback?.();
 }

 return {
  run,
  isFlow: true,
 };
}

這里拿到了函數(shù)的返回值 res，有一個情況別忘了，就是 effect 返回的是一個 Promise，比如這種情況：

() => delay(1000).then(() => log("d"));

那么拿到返回值后，這里直接簡化判斷，看返回值是否有 then 屬性來判斷它是否是一個 Promise（生產(chǎn)環(huán)境請選擇更加嚴(yán)謹(jǐn)?shù)姆椒ǎ?br />

if (res?.then) {
 res.then(createFlow(sources).run);
 return;
}

這里我選擇中斷本次的 flow 執(zhí)行，并且用剩下的 sources 去建立一個新的 flow，并且在上一個 Promise 的 then 方法里再去異步的開啟新的 flow 的 run。

這樣，上面延遲 1s 后的 Promise 被 resolve 之后，剩下的 sources 任務(wù)數(shù)組會被新的 flow.run() 驅(qū)動，繼續(xù)執(zhí)行。
接下來再處理 effect 是另一個 flow 的情況，注意上面編寫的大致函數(shù)體，我們已經(jīng)讓 createFlow 這個函數(shù)返回值帶上 isFlow

這個標(biāo)記，用來判斷它是否是一個 flow。

// 把callback放到下一個flow的callback時機里執(zhí)行
const next = () => createFlow(sources).run(callback)
if (typeof task === "function") {
 const res = task();
 if (res?.then) {
  res.then(next);
  return;
 }
} else if (task?.isFlow) {
 task.run(next);
 return;
}

看 else if 的部分，直接調(diào)用傳入的 flow 的 run，把剩下的 sources 創(chuàng)建的新的 flow，并且把這一輪的 callback 放入到新的 flow 的 callback 位置。在所有的任務(wù)都結(jié)束后再執(zhí)行。

定義一個 next 方法，用來在遇到異步任務(wù)或者另一個 flow 的時候

這樣，參數(shù)中傳入的 flow 執(zhí)行完畢后，才會繼續(xù)執(zhí)行剩下的任務(wù)，并且在最后執(zhí)行 callback。

完整代碼

function createFlow(effects = []) {
 let sources = effects.slice().flat();
 function run(callback) {
  while (sources.length) {
   const task = sources.shift();
   // 把callback放到下一個flow的callback時機里執(zhí)行
   const next = () => createFlow(sources).run(callback)
   if (typeof task === "function") {
    const res = task();
    if (res?.then) {
     res.then(next);
     return;
    }
   } else if (task?.isFlow) {
    task.run(next);
    return;
   }
  }
  callback?.();
 }
 return {
  run,
  isFlow: true,
 };
}
const delay = () => new Promise((resolve) => setTimeout(resolve, 1000));
createFlow([
 () => console.log("a"),
 () => console.log("b"),
 createFlow([() => console.log("c")]),
 [() => delay().then(() => console.log("d")), () => console.log("e")],
]).run();

總結(jié)

這道面試題主要的目的是考察對于異步串行流的控制，巧妙的利用自身的遞歸設(shè)計來處理傳入的參數(shù)也是一個 flow的情況，在編寫題目的過程中展示你對 Promise 的熟練運用，一定會讓面試官對你刮目相看的~

到此這篇關(guān)于探究一道價值25k的螞蟻金服異步串行面試題的文章就介紹到這了,更多相關(guān)異步串行面試題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: