以前在使用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如果有更漂亮的写法欢迎来讨论，让我们一起有条不紊的持续进步。 喜欢的话不妨点个小小的赞与关注，您的赞与关注将是我源源不断的前进动力。
