阿里异步串行编程题：按照以下要求，实现 createFlow 函数

[sisterAn]

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

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

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

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

按照上面的测试用例，实现 createFlow：

• flow 是指一系列 effects 组成的逻辑片段。
• flow 支持嵌套。
• effects 的执行只需要支持串行。

[sisterAn]

在本题中， createFlow 以一个数组作为参数，数组参数可有以下几种类型：

• 普通函数

() => console.log("a")

• 异步函数

() => delay(1000).then(() => console.log("c"))

• 嵌套 createFlow

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

• 数组

[() => delay(1000).then(() => console.log("d")), () => console.log("e")]

步骤一：扁平化

因为 effects 的执行只需要支持串行，所以我们可以把数组扁平化一下

function createFlow(effects = []) {
 // 浅拷贝一下，今年不影响传入的参数
 const queue = [...effects.flat()]
}

步骤二：run执行

createFlow 并不是直接执行，而是 .run() 之后才会开始执行

function createFlow(effects = []) {
 const queue = [...effects.flat()]
 const run = async function(cb) {
 for(let task of queue) {
 }
 if(cb) cb()
 }
}

步骤三：异步函数

因为参数中有异步函数，这里使用 await 执行

function createFlow(effects = []) {
 const queue = [...effects.flat()]
 const run = async function(cb) {
 for(let task of queue) {
 await task()
 }
 if(cb) cb()
 }
}

步骤四：支持嵌套

使用 isFlow 来判断当前是否是嵌套执行

function createFlow(effects = []) {
 const queue = [...effects.flat()]
 const run = async function(cb) {
 for(let task of queue) {
 if(task.isFlow) { // 如果是嵌套，执行嵌套函数
 await task.run()
 } else {
 await task()
 }
 }
 if(cb) cb()
 }
 return {
 run,
 isFlow: true
 }
}

其实是可以使用 class 来实现，用 instanceof 来判断是否是嵌套，代码实现如下：

class Flow {
 constructor(props) {
 this.queue = props
 }
 async run(cb) {
 for(let task of this.queue) {
 if(task instanceof Flow) {
 await task.run()
 } else {
 await task()
 }
 }
 if(cb) cb()
 }
}

function createFlow(effects = []) {
 return new Flow(effects)
}

完整代码：两种

• function

function createFlow(effects = []) {
 const queue = [...effects.flat()]
 const run = async function(cb) {
 for(let task of queue) {
 if(task.isFlow) {
 await task.run()
 } else {
 await task()
 }
 }
 if(cb) cb()
 }
 return {
 run,
 isFlow: true
 }
}

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

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

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

// a,b,延迟1秒,c,延迟1秒,d,e, done 的顺序打印

• class

class Flow {
 constructor(effects) {
 this.queue = [...effects.flat()]
 }
 async run(cb) {
 for(let task of this.queue) {
 if(task instanceof Flow) {
 await task.run()
 } else {
 await task()
 }
 }
 if(cb) cb()
 }
};

function createFlow(effects = []) {
 return new Flow(effects)
};

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

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

createFlow([
 () => console.log("a"),
 () => console.log("b"),
 subFlow,
 [() => delay(1000).then(() => console.log("d")), () => console.log("e")],
]).run(() => {
 console.log("done");
});
// a,b,延迟1秒,c,延迟1秒,d,e, done 的顺序打印

参考：https://juejin.im/post/6860646761392930830

[m7yue]

 const createFlow = (lists) => {
 return new Promise((re, rj) => {
 let i=0
 let len = lists.length
 
 const next = (i)=>{
 if(i == lists.length) return re()

 let item = lists[i]
 if(Array.isArray(item)) {
 createFlow(item).then(() => next(i+1))
 }else if(item instanceof Promise) {
 Promise.resolve(item).then(() => next(i+1))
 }else if(typeof item == 'function') {
 let res = item()
 if(res instanceof Promise){
 Promise.resolve(res).then(() =>next(i+1))
 }else{
 next(i+1)
 }
 }else {
 next(i+1)
 }
 }

 next(i)
 })
 }
 Promise.prototype.run = function(cb) {
 this.then(cb)
 }

 const delay = ms => new Promise(re => setTimeout(re, ms))
 const subFlow = createFlow([() => delay(1000).then(() => console.log('c'))])
 createFlow([
 () => console.log('a'),
 () => console.log('b'),
 subFlow,
 [() => delay(1000).then(() => console.log('d')), () => console.log('e')],
 ]).run(() => console.log('done'))

[m7yue]

之前会错意了，思路一样，利用 Promise 异步串行

 const createFlow = (lists) => {
 let tasks = [...lists].flat()
 
 const run = (cb) => {
 let [first, ...others] = [...tasks]
 return others.reduce((promise, task) => {
 task = task.run ? task.run : task 
 return Promise.resolve(promise).then(_ => task())
 }, first()).then(cb)
 }
 return { run }
 }

[kexiaofu]

其实我还有一个思路：

• 收集参数部分相同；

• 在 run 的时候，判断 task.then 是否是可执行的方法，请看代码

function isType(target, type) {
 return (Object.prototype.toString.call(target) || '').indexOf(type) > -1;
}

function log(msg) {
 return console.log(msg);
}

function createFlow(arr) {
 let task = [];
 arr.forEach(item => {
 if (isType(item, 'Function')) {
 if (item.name === 'createFlow') {
 task = task.concat(item.task);
 } else {
 task.push(item);
 }
 }
 if (isType(item, 'Array')) {
 task = task.concat(item);
 }
 })
 createFlow.task = task;
 createFlow.run = function (fn) {
 if (this.task.length > 0) {
 const func = task.shift();
 const result = func();
 // 这里判断
 if (result && typeof result.then === 'function') {
 result.then(() => this.run(fn));
 } else {
 this.run(fn);
 }
 } else {
 typeof fn === 'function' && fn();
 } 
 }
 return createFlow;
}

[xiaowuge007]

function createFlow(arr) {
	let curList = [];
	add(arr);
	return {
		run: function (cb) {
			if(cb){
				curList.push(cb);
			}
			go(curList);
		},
		_list: curList
	}
	async function go(list) {
		for(let i = 0;i<list.length;i++){
			await list[i]();
		}
	}
	function add(list) {
		for(let i = 0;i<list.length;i++){
			let item = list[i];
			if(typeof item === 'function'){
				curList.push(item)
			}
			if(Array.isArray(item)){
				add(item)
			}
			if(typeof item === 'object' && item._list){
				add(item._list)
			}
		}
	}
}

[NoBey]

function createFlow(arr){
 arr.run = async (cb) => {
 for(let fn of arr.flat(99)){
 await fn()
 }
 cb && cb()
 }
 return arr
}

[Athaoo]

不简洁但是把步骤拆分成了collect和run两个阶段，不进行flat

class Flow {
	constructor(task) {
		this.task = task
	}

 async run(cb) {
 await this.task()
 
 cb instanceof Function && cb()
 }
}
const runFlow = async (flow) => {
	if (flow instanceof Array) {
		for (const item of flow) {
			await runFlow(item)
		}
	} else if (flow instanceof Function) {
		await runFlow(flow())
	} else if (flow instanceof Flow) {
		await flow.run()
	} else if (flow instanceof Promise) {
		await flow
	} else {
		// static val, do nothing
		return
	}
}

const collectFlow = (flow, list = []) => {
	list.push(() => runFlow(flow))

	return list
}

export const createFlow = (flow) => {
	return new Flow(() => runFlow(collectFlow(flow, [])))
}

[front-end-captain]

type Effect = (() => Promise<void> | void) | Flow;

class Flow {
 private _queue: (() => void)[];
 private _endCallback: (() => void) | undefined;

 constructor(effects: Effect[]) {
 this._queue = effects.map((effect) => {
 const fn = () => {
 Promise.resolve(effect instanceof Flow ? effect.run() : effect()).finally(() => {
 this._next();
 });
 };
 return fn;
 });
 }

 private _next() {
 const fn = this._queue.shift();
 if (fn) {
 fn();
 } else if (this._endCallback) {
 this._endCallback();
 }
 }

 public run(callback?: () => void): void {
 this._endCallback = callback;
 this._next();
 }
}

function createFlow(effects: (Effect | Effect[])[]) {
 return new Flow(effects.flat());
}

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

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

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