探究一道价值25k的蚂蚁金服异步串行面试题
前言
朋友去面试蚂蚁金服，遇到了一道面试题，乍一看感觉挺简单的，但是实现起来发现内部值得一提的点还是挺多的。
先看题目：
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：
- flow 是指一系列 effects 组成的逻辑片段。
- flow 支持嵌套。
- effects 的执行只需要支持串行。
分析
先以入参分析，createFlow 接受一个数组作为参数（按照题意里面的每一项应该叫做 effect)，排除掉一些重复的项，我们把参数数组中的每一项整理归类一下，总共有如下几种类型：
普通函数：
() => log("a");
延迟函数（Promise）：
() => 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，便于随时中断。
对于函数类型的 effect，直接执行它：
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（生产环境请选择更加严谨的方法）。
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 的熟练运用，一定会让面试官对你刮目相看的~
到此这篇关于探究一道价值25k的蚂蚁金服异步串行面试题的文章就介绍到这了,更多相关异步串行面试题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文章来给各位同学介绍一款不错的Js点击弹出下拉菜单效果代码，这种效果有点像支付宝的下拉菜单，有需要了解的朋友可参考。2013-08-08
下面小编就为大家带来一篇NodeJS的Promise的用法解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。 JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展2009-07-07
这篇文章主要为大家详细介绍了JavaScript实现鼠标经过显示下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要为大家详细介绍了前端实现PDF文件预览的7种方案与性能对比,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-03-03
最近在uni-app搭建的微信小程序项目中使用了ECharts,下面这篇文章主要给大家介绍了关于uniapp引用echarts的详细步骤,文中还附有柱状图实例,需要的朋友可以参考下2022-07-07
网页中都有.js文件和.css文件，但这并不意味着CSS和js是独立不能交互的，下面与大家分享js与css交互的5种方法2014-04-04
这篇文章主要介绍了JavaScript Date 知识，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-01-01
这篇文章主要介绍了JavaScript判断数据类型有几种方法及区别介绍,本文给大家分享多种方法通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
最新评论