朋友去面试蚂蚁金服,遇到了一道面试题,乍一看感受挺简单的,可是实现起来发现内部值得一提的点仍是挺多的。面试
先看题目:数组
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 的顺序打印
复制代码
按照上面的测试用例,实现 createFlow
:markdown
flow
是指一系列 effects
组成的逻辑片断。flow
支持嵌套。effects
的执行只须要支持串行。先以入参分析,createFlow
接受一个数组做为参数(按照题意里面的每一项应该叫作 effect
),排除掉一些重复的项,咱们把参数数组中的每一项整理归类一下,总共有以下几种类型:异步
() => log("a");
复制代码
() => delay(1000).then(() => log("d"));
复制代码
flow
:const subFlow = createFlow([() => delay(1000).then(() => log("c"))]);
复制代码
先把参数浅拷贝一份(编写库函数,尽可能不要影响用户传入的参数是个原则),再简单的扁平化 flat
一下。(处理状况 4)函数
function createFlow(effects = []) {
let sources = effects.slice().flat();
}
复制代码
观察题意,createFlow
并不会让方法开始执行,须要 .run()
以后才会开始执行,因此先定义好这个函数:测试
function createFlow(effects = []) {
let sources = effects.slice().flat();
function run(callback) {
while (sources.length) {
const task = sources.shift();
}
callback?.();
}
}
复制代码
这里我选择用 while
循环依次处理数组中的每一个 effect
,便于随时中断。ui
对于函数类型的 effect
,直接执行它:spa
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();
}
}
// 在全部任务执行完毕后 执行传入的回调函数
callback?.();
}
return {
run,
isFlow: true,
};
}
复制代码
这里拿到了函数的返回值 res
,有一个状况别忘了,就是 effect
返回的是一个 Promise
,好比这种状况:设计
() => delay(1000).then(() => log("d"));
复制代码
那么拿到返回值后,这里直接简化判断,看返回值是否有 then 属性来判断它是不是一个 Promise(生产环境请选择更加严谨的方法)。code
if (res?.then) {
res.then(createFlow(sources).run);
return;
}
复制代码
这里我选择中断本次的 flow
执行,而且用剩下的 sources
去创建一个新的 flow
,而且在上一个 Promise 的 then 方法里再去异步的开启新的 flow
的 run
。
这样,上面延迟 1s 后的 Promise 被 resolve 以后,剩下的 sources
任务数组会被新的 flow.run()
驱动,继续执行。
接下来再处理 effect
是另外一个 flow
的状况,注意上面编写的大体函数体,咱们已经让 createFlow
这个函数返回值带上 isFlow
这个标记,用来判断它是不是一个 flow
。
// 把callback放到下一个flow的callback时机里执行
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
的部分,直接调用传入的 flow
的 run
,把剩下的 sources
建立的新的 flow
,而且把这一轮的 callback
放入到新的 flow
的 callback
位置。在全部的任务都结束后再执行。
定义一个 next
方法,用来在遇到异步任务或者另外一个 flow
的时候
这样,参数中传入的 flow
执行完毕后,才会继续执行剩下的任务,而且在最后执行 callback
。
function createFlow(effects = []) {
let sources = effects.slice().flat();
function run(callback) {
while (sources.length) {
const task = sources.shift();
// 把callback放到下一个flow的callback时机里执行
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();
复制代码
这道面试题主要的目的是考察对于异步串行流的控制,巧妙的利用自身的递归设计来处理传入的参数也是一个 flow
的状况,在编写题目的过程当中展现你对 Promise 的熟练运用,必定会让面试官对你另眼相看的~
祝你们在大环境很差的状况下,都能拿到本身满意的 offer,加油。