仅150行的js流程控制框架

最近的项目涉及前端流程控制，流程分成很多步骤，每一步都可能出现多种情况的异常，每一种异常在各个步骤的都有不同的异常处理流程。其实这种情况很常见，不论在前端还是后台。那么能不能做一个框架来整合流程，做到如下的功能：

功能点

• 1、流程和流程里面的操作步骤分离（逻辑不依赖框架）
• 2、步骤的顺序可变，每一个步骤都可以命名。
• 3、上一个步骤的结果可以传递到下一个步骤
• 4、每一个步骤也可以为一个流程
• 5、在每一个步骤执行前，可判断要不要执行
• 6、在每一个步骤执行成功之后，可判断要不要执行下一个步骤
• 7、每一个步骤都可以针对某一种异常情况定义异常处理步骤或流程。
• 8、流程完成以后，可以收到通知。有任何异常，在任何一个步骤未处理的，也可以收到通知。

实现思路

这里优先考虑责任链模式, 引入aop。

框架命名为flow,框架应该有如下的表现形式：

流程

1、预先单独定义各个操作函数。这里定义一个标准，函数都必须返回Promise对象，函数本身不含流程控制的任何内容。

 function step1(arg){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log('step1 execute',arg);
            resolve({step1:'step1 complete'})
        },100);
    });
}
var flowCtrl = 0;
function step2(arg){
    console.log('stop2 arg',arg);
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(flowCtrl==0){
                ++flowCtrl;
                console.log('step2 execute');
                try{
                    //这里模拟一个http异常
                    throw {code:'http'}
                }catch(e){
                    reject(e)
                }
                
            }else{
                resolve({step2:'step2 data'});
            }
            
        },100);
    });
}
function step3(arg){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            
            console.log('step3 arg',arg);
            resolve({step3:'step3 complete'})
        },100);
    });
}
            

为了演示方便，step2在第一次的时候出错，在第二次执行的时候正确。

//如果发生了http错误，则重启流程
function step2HttpError(error){
    console.log('step2Error',error);
    console.log('restart progress');
    flow1.restart();
}

function step2Check(arg){
    console.log('step2Check',arg);
}

function step2ResultHandler(arg){
    console.log('step2ResultHandler',arg);
//  throw new Error();
}

2、使用流程工具整合这些操作

var flow2 = new Flow().add("step3",step3);
var flow1 = new Flow().add("step1",step1)
    .add("step2",step2,{catch:{http:step2HttpError},before:step2Check,after:step2ResultHandler})
    .add("step3",flow2);

这里add的第三个参数为步骤配置，catch为异常处理函数，可以指定code=某个指定值的异常的处理。before为本步骤执行前的判断函数，如果返回false,表示中止流程。after为本步骤执行成功之后的判断函数，如果返回false，表示中止流程。

4、流程工具的执行，应该也是一个Promise,这个promise成功之后返回最后一个成功执行的流程步骤(可能被before和after打断)的结果

flow1.promise({step1:'step1 data'}).then(function(result){
    console.log('complete',result)
}).catch(function(error){
    console.warn(error);
})

5、执行结果

image.png

github

https://github.com/jzoom/flow