湖北平台网站建设哪家好,找团队做网站,出色的网站设计,私域流量运营一个前端经常会遇到的问题 例如#xff0c;我想要在一个项目里#xff0c;监听所有的fetch请求#xff0c;应该怎么办#xff1f;又或者说#xff0c;我想用别人封装好的方法#xff0c;但是在它之前#xff0c;需要经过一层处理、判断#xff0c;然后再看情况是否调用…一个前端经常会遇到的问题 例如我想要在一个项目里监听所有的fetch请求应该怎么办又或者说我想用别人封装好的方法但是在它之前需要经过一层处理、判断然后再看情况是否调用别人封装好的方法 这种需求大都是相似的记得我之前讲解过koa洋葱圈、redux中间件等源码是我们前端的一种核心解决问题的思维方式
从如何监听fetch请求说起 例如fetch的使用一般是:
fetch(url).then((res){...})那么对于一个已经使用过很多次的项目我需要监听这个fetch请求。应该怎么办呢很简单我们“重写”fetch const myFetch window.fetch;window.fetch function (...arg) {console.log(此时调用了fetch,参数是:, arg);return myFetch(arguments);};fetch(www.baidu.com).then((res) {console.log(res, res);});简单的几行代码就实现了监听所有的fetch请求。而且不会对原有的功能有入侵不过问题来了 这样做其实相当于去修改原型链上的方法,导致纯净的原有方法被污染。真正操作时候建议新写一个方法然后全局替换即可这样能保证底层的fetch方法是正常的不会影响那些不需要log的地方那么我们今天顺便讲讲类似的源码实现
到redux最精髓的中间件源码compose函数 比如说我们有这样几个函数:
function add1(str) {return str 1
}function add2(str) {return str 2
}function add3(str) {return str 3
}我们想依次执行函数并把执行结果传到下一层就要像下面一样一层套一层的去写:
let newstr add3(add2(add1(abc))) //abc123]这只是3个如果数量多了或者数量不固定处理起来就很麻烦但是我们用compose写起来就很优雅
let newaddfun compose(add3, add2, add1);
let newstr newaddfun(abc) //abc123那compose内部是如何实现的呢
function compose(...funcs) {return funcs.reduce((a, b) (...args) a(b(...args)));
}其实核心代码就一句这句代码使用了reduce方法巧妙地将一系列函数转为了add3(add2(add1(...args)))这种形式我们使用上面的例子一步一步地拆分看一下 当调用compose(add3, add2, add1)funcs是add3, add2, add1第一次进入时a是add3b是add2展开就是这样子add3, add2(...args)add3(add2(...args)),传入了add3, add2返回一个这样的函数(...args)add3(add2(...args))然后reduce继续进行第二次进入时a是上一步返回的函数(...args)add3(add2(...args))b是add1于是执行到a(b(...args)))时b(...args)作为a函数的参数传入变成了这种形式(...args)add3(add2(add1(...args)))是不是很巧妙。 如果你这里理解不了你今天不睡觉也要搞明白拿纸去写下来实现调用过程这就是前端里面最硬的干货了。 再到promise链式调用实现 Promise链式调用跟JQ的区别在于promise.then每次返回的都是一个新的promise实例对象,这样实现了链式调用。 JQ链式,相当于一个函数内部永远都返回当前这个相同的this
//这里我也忘了是不是这样用了
$(#root).style(...).style(...)Promise链式,最后打印结果是Peter老师666,每次.then返回的是一个新的Promise
Promise.resolve(Peter老师666).then((res) {return res;}).then((res) {console.log(res,res)return res;});
再到express的next 当我们在路由处理中调用next()时候就会进入下一个匹配例如当我们用get请求接口test时候就会走到console.log(此时被触发)这行代码
app.get(/test,(req,res,next){next()})
app.get(*,(req,res,next){console.log(此时被触发)
})原因是什么实现express的next很简单 handle(req, res, matchedList) {const next () {const midlleware matchedList.shift();if (midlleware) {midlleware(req, res, next);}};next();}我们先找到所有匹配的请求方式和路由然后首先处理第一个匹配中的路由使用闭包方式传入next方法。当调用next方法时候,会执行下一个匹配中的路由回调函数。这样就实现了next
再到koa的中间件 怎么使用koa的中间件?
app.use(middlewaer1).use(middlewaer2).use(middlewaer3)是不是感觉跟JQ的链式调用很像其实一样都是统一返回this即可。如下所示
const obj {print(arg) {console.log(arg);return this;},hello(arg) {console.log(arg);return this;},world(arg) {console.log(arg);return this;},
};
obj.print(Peter).print(hello).print(world);此时控制台就输出了Peter,hello,world。我们实现了最简单的链式调用
