以前在使用js方法比如
axios({
method:"get",
url:"url",
params
})
.then(res=>{
console.log("努力减肥")
})
.catch(err=>{
console.log("吃饭要紧")
})
使用时就很疑惑,为什么后面 . 一下就能用?
还可以选择性的只调用.catch() 或者 .then()方法
后来花了些时间自己写了个可以不停.下去的调用方式,回头百度才知道,这是链式调用。
链式调用的核心就是搞清楚后面的 . 的是什么?
那我们就用一个加减乘除案例来学习链式调用吧
function Demo(num) { //定义demo方法体 传递参数num(初始化的参数)
this.num = num || 0; //初始化时如果没传递参数默认为0
this.sum = function (num) { //加法
this.num += +num;
return this; //链式调用核心,每个方法都必须返回本身
};
this.minus = function (num) { //减法
this.num -= +num;
return this;
};
this.ride = function (num) { //乘法
this.num *= +num;
return this;
};
this.divide = function (num) { //除法
this.num /= +num;
return this;
};
this.then = function (fn) { //then方法,通过回调函数输出当前计算结果
fn(this.num);
return this; //就算是then也要返回本身,以达到后面可以继续挂载方法
};
}
function cLog(res){ //辅助打印方法
console.log(res)
}
let demo = new Demo(0); //新建一个计算实体
demo.sum(4) //0 + 4
.then((res)=>cLog(res)) // 打印 4
.minus(2) //4 - 2
.then((res)=>cLog(res)) // 打印 2
.divide(2) //2 / 2
.then((res)=>cLog(res)) // 打印 1
.ride(4) //1 * 4
.then((res)=>cLog(res)) // 打印 4
修改为class版本即
class Demo {
constructor(num) {
this.num = num || 0;
}
sum(num) {
this.num += +num;
return this;
}
minus(num) {
this.num -= +num;
return this;
}
ride(num) {
this.num *= +num;
return this;
}
divide(num) {
this.num /= +num;
return this;
}
then(fn) {
fn(this.num);
return this;
}
}
let demo = new Demo(0); //新建一个计算实体
demo.sum(4) //0 + 4
.then((res)=>cLog(res)) // 打印 4
.minus(2) //4 - 2
.then((res)=>cLog(res)) // 打印 2
.divide(2) //2 / 2
.then((res)=>cLog(res)) // 打印 1
.ride(4) //1 * 4
.then((res)=>cLog(res)) // 打印 4
如果有更漂亮的写法欢迎来讨论,让我们一起有条不紊的持续进步。
喜欢的话不妨点个小小的赞与关注,您的赞与关注将是我源源不断的前进动力。