秉持低耦合的观念,拆分各个功能函数,做到清晰控制,数据单向流转
定义中间件对象
class Middleware {
constructor({ core, params }) {
// 传入的封装axios
this.core = core;
// 传入的axios参数
this.params = params;
// 存放链式调用的中间件函数
this.cache = [];
}
use(fn) {
if (typeof fn !== "function") {
throw "middleware must be a function";
}
this.cache.push(fn);
return this;
}
next(data) {
if (this.middlewares && this.middlewares.length > 0) {
var ware = this.middlewares.shift();
ware.call(this, this.next.bind(this), data);
}
return data;
}
async go() {
// 请求获取数据,以备后序程序使用
let result = await this.core(this.params);
//复制函数,待执行
this.middlewares = this.cache.map(function(fn) {
return fn;
});
// 向后传递参数,中间插件模型处理流程数据
this.next(result);
}
}
使用
// 导入参数
var onion = new Middleware({core: request, params});
onion.use(function (next, data) {
console.log(1);
console.log(data);
// 向后传递数据
next(data);
console.log("1结束");
});
onion.use(function (next, data) {
console.log(2);
console.log(data);
// 向后传递数据
next(data);
console.log("2结束");
});
onion.use(function (next, data) {
console.log(3);
console.log(data);
console.log("3结束");
});
// 上一步没有调用next,后面的函数都不执行
onion.use(function (next, data) {
console.log(4);
next(data);
console.log("4结束");
});
onion.go();
// 1
// {a: 1, b: 2}
// 2
// {a: 1, b: 2, c: 3}
// 3
// {a: 1, b: 2, c: 3, d: 4}
// 3结束
// 2结束
// 1结束
配合API接口数据返回后的操作函数
function handleStatus(next, res) {
console.log(res);
next(res);
}
function handleAuth(next, res) {
console.log(res);
next(res);
}
function handlePosition(next, res) {
console.log(res);
next(res);
}
function handleForbiddenList(next, res) {
console.log(res);
next(res);
}
function handleLoad(next, res) {
console.log(res);
next(res);
}
通过中间件以此注册
// 导入参数
var onion = new Middleware({core: request, params});
onion.use(handleStatus);
onion.use(handleAuth);
onion.use(handlePosition);
onion.use(handleForbiddenList);
onion.use(handleLoad);
onion.go();
// 函数里面可以用异步函数,获取到这个流程处理完的值
// let res = await onion.go();
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。