00:00
Hello,大家好,呃,这个小节我们来讲一下Excel当中拦截器的。运行原理。首先先把之前所做的拦截器那个示例呢,我把它拿了过来。啊,然后呢,这是请求人袭一号二号。响应感觉器,一号二号。在运行的时候呢,它是先运行的二号请求感应器。在运行一号请求等器。下边去运行响应感器一号,响应感器二号,最后是运行用户的自定义回调。是这么一个顺序。好,我们先开看看代码的一个执行结果,打开浏览器。啊,在这啊。稍新看着啊,请求二号一号响应一号二号。为什么是这样的一个结果呢?先别急,待会我们看了原码之后就明白了。首先呢,呃,为了更加未来看得更加清楚一些呢,我们在。
01:01
拦截器这块就打一个断点。在哪呢,在这。啊,从这个代码开始呢,我们就开始为它打一个断点。好,然后下边我们刷新页面瞅一眼。然后大家可以看一下access intercepts.request.use。咱们一点一点来分析啊,首先intercepts是什么东西?大家可能会有点陌生,诶,怎么Excel身上有这个属性呢?这个属性是怎么来的呢?你先别急啊,我首先呢,先来先看一看。此时Excel它的样子是什么样的?刷新页面。点开看L点开它。你会发现这个Excel身上有很多东西啊,有default默认的属性,还有一些方法发送请求啊,当然还包括咱们刚才那个谁啊,Intercepts。那么这个属相是哪来的?啊,大家回想一下啊,在Excel它的构造函数那一块儿。
02:00
啊,里边有一条代码,就是this.intercepts加了一个属性,好了,我们可以点开它先看一眼。看这啊。Excel构造函数。然后呢,里边有这么一行代码,点intercepts。所以说最后造出来那个对象身上是有intercepts属性的。所以说在这里我们可以直接去使用它。那下边request是怎么回事呢?注意看这intercepts这个属性呢,它的值是一个对象。这个对象里边也有一个属性叫request。啊,所以说咱们可以呢,用点request来得到它。后边点又是怎么回事呢?别急,所以你先看request它对应值是谁。是他。而他又是一个intercept manager的实例对象。所以这个use其实是这个实例对象上面的一个方法,我们再试着去调用这个方法。
03:06
好,这是当前咱们对整个的每一个属性先做了一个介绍,然后接下来咱们让代码继续往前推进。好,往前推进。此时我们进到了intercept manager当中去调方法。然后呢,接下来再运行往前,那么在这个右字方法当中。大家注意啊,做了这么一个事情,就是this.handles.push this.handles是个什么东西呢?我们有点陌生,不急,咱们先把这个文件打开去看一看。看这啊,它的文件名叫intercept manager,好把它复制一份。打开编辑器,然后CTRL加P。CTRLV,把它这个名字粘过来,把文件打开。好了,这就是intercept。构造函数的那个文件。这就是那个构造函数。
04:00
好,你想一想,你这又一个intercept manager。这里边儿代码就一定会执行。它会往实例对象身上去加一个handle属性,并且这个值是一个空的数组。这个时候你可以想象到就是我们在调谁的时候,调柚子方法的时候。This,它其实已经是一个数组了,而且最开始是一个空数组。啊,最开始是一个空手,然后呢,他push了一下。Push的值是什么呢?Push值是一个对象。啊,就像里边呢,包括的是啊ED和rejected,那fulfilled和rejected又是什么东西呢。注意这分别指的是啊,咱的那个谁呢。拦截器函数。啊,拦截器函数,你看在调用类柚子的时候,点开这个代码啊,调用柚子的时候,我们是传的两个回调进来。这是一个回调。这是另外一个回调。
05:00
两个回调,然后你再看一看这个函数,这就是第一个回调。这就是第二个回调。好,现在。在运行的时候呢,This their hand push了一下,Push其实就是压住压住啊,做保存。所以说这个压完之后,它的结果是什么?This handles数组上边已经有内容了。啊,已经有内容了啊,而且内容它就是一个对象。啊,对象里边包括了fulfilled和rejected这两个属性。好,我们可以来看一看这个它啊点一下,然后点开,你看它看到没有,Thiss已经是有值的,点开fulfilled和rejected。是一个对象。好完成,然后接下来咱们接着往下继续。OK,到这儿的话,Access intercept request这个对象身上。已经有什么了?已经是有了。
06:01
一个数据的。也就是他的hands身上啊,看这看到没有request,他的hand身上已经是有内容了。等一下。好,点开看这。没有问题,然后呢,接下来又掉了一次柚子,所以说等这个代码在执行完毕之后,Request身上可就不是一一个对象啊,这个数字里边不是一个对象,它包括两个对象。看这。啊,有两个。为了更加看的清楚一些呢,我们这样来做一下,哎,我这写一个谁呢,写一个这个。One。啊,这块的话,咱也写一个Y。然后这块我写一个t wo。啊,然后点开它这儿呢,写一个TW。加个名字,注意区分一下。好,然后呢,咱们刷新。然后往前推进,再往前推进,此时你来看一看request长什么样子啊,点开它。
07:02
然后看这。啊,大家看这啊,然后Y。然后下边的话是to。也就是说现在request身上有一个属性叫hands啊,然后呢,这个对象。这是第一个。请求拦截器成功和失败的回调。第二个是第二个请求连拦截器成功和失败的回调。已经存起来了。然后接下来咱们接再继续往下执行走,响应拦截器的操作方式与请求拦截器是一样的,所以这个对象身上也开始去添加它对应的回调点开。这是第一个啊,响应拦截器成功和失败的毁掉。再往下执行,你看。这个时候response身上就已经有两个啊,Hazard里边又有两个对象的啊,好,这是第一个响应连接器。这是第二个响应拦截器对应的回调。
08:03
那么这一步在做完之后。接下来exce它开始呢,发送请求,我们知道sales发送请求,它的位置在哪呢?Request那个位置好,咱们进。往前推一下。好,大家看这。我们此时已经进到request当中了。Request里边,然后这些地方巴拉巴拉巴拉一大堆啊,然后往下推进推进,这些都是一些基础的关于参数的检测的一些操作啊,这些检测方法呢,咱们都已经介都已经介绍过了。好,重点来了,看这。啊,Chain dispatch,其实这个咱们也介绍过了啊,Dispatch request是用来发送请求的那个函数。然后第二个是unDeFined,然后接下来往下一步。往下一步,这是promise创建那个成功的对象。OK,接下来看好了往下走。
09:02
哎呀,坏事啊,问题倒不是不是特别大啊,就在这儿呢,做了一个像什么样的事情呢。就是类似点,Intercepts request for each。想一下啊,this.intercepts.request它是什么?它其实是那个拦截器的实例对象。那么拦截器的实例对象这个for each怎么能执行呢?别急,在intercept manager这个文件当中,它封装了一个方法叫for each。专门用来便利啊,这个谁呢?便利这个hands的。所以说他这么写其实是在便利request对象身上handles那个数组。那么request身上到底有没有那个东西呢?你看,有。而且呢,有两个元素,每个元素都是一个对象。
10:00
然后他做完之后,在便利的过程当中,他要做什么事情呢。看这行代码,一个比较精髓的代码。他是在将。我们intercepts那个成功的回调,也就是请求拦截器成功的回调。往这个chance数组的前面再追加。所以说当这个代码在执行完毕之后,Chance这个值就发生了变化,你看啊,最开始它只有两个,就是这两个。Dispatch request和unDeFined,而到这块之后,它就变了,点开。看这。Two two one one,为什么是two two,万万呢?咱们不是说应该是万万two two的吗?来,我来画个图演示一下。首先这是dispatch。这个是unDeFined。最开始啊,最开始长这样子,然后呢,它的这块是从数组当中。先便利。
11:01
便利时候,咱们肯定是先拿到了数组当中的第一个元素,也就是请求蓝旗一号。然后他在放的时候怎么放呢?他往这儿放,Y放这儿。啊。这是万啊成功的回调,这个呢是万失败的回调放这儿,然后呢,再便利第二个元素,它还是什么呀,往前边放。On shift,所以说to。就放这儿。所以最后的结果形成这么一个局面。啊,此时chin就不再是原来两个元素了,现在变成了六个元素。再往下看,Response这块也是如此。啊,然后咱们接着继续往下走。你看他跳,然后开始变利。啊,然后开始便利这边代码的话,就又跳到了for each这个封装的工具函数这一块,这个函数它既可以便离数组,又可以便利对象。咱们呢,快点往前推进一下。
12:00
啊,不行,咱跳出来吧。啊,不用看这了。我已经跟大家说过了,这块就是在干嘛,遍历那个handles数组。便利完成之后呢,他做的是push。啊,他变的是push啊,你可以想象在response had身上,Response had身上,也就是在他身上。有这个有两个元素。啊,两个都是对象,然后便利他们开始用push的方式往chance里边去讲。用push的方式往chances里边加,所以说这个push的时候,原来chances有六个元素,现在把响应拦截器一号放到这儿。啊,放到这里边儿,响应拦截器二号往这儿放,所以说响应拦截器它们的顺序是一个正常顺序。而请求拦截器,它们的顺序并不是一个正常,而是一个逆序。这个时候。整个的数组就全都构建完成了,此时chances值已经变成多少十个元素?
13:06
啊,已经变成了十个元素,那好,接下来核心点就来了,While Cha Les。怎么这什么意思呢?就是如果说你change lengths是大于零的。不等于零。啊,你不等于零的话,我就开始执行。啊,我就开始执行,怎么个执行法呢?首先最开始promise这个对象是一个成功的promise,所以说他一定会去执行,哎,第一个成功的回调,那么这个成功的回调它怎么来的,它是从chance当中把这个值取了出来。然后呢,把这个值又接着取出来,因为shift是会改变原数组的结构的。好,所以说其这个请求拦截其二号他们先执行。执行完之后呢,他没有返回,结果返回一个新的。
14:02
啊,返回一个新的promise,好,那么这个时候chain length还不等于零,它等于几啊,等于八。这个时候它等于八好再接着进来,再把一号往这儿放。一号再执行。回到执行完毕之后,又返回一个promise对象,接下来再接着继续往前接着推,这个时候就该谁了,该他了。Dispatch request过来,然后DeFined放过来。然后开始执行。执行完毕之后呢,他们也有返回结果,而且返回结果也是一个pro,那么这个时候数组长度它还是不为零为几啊,为四。因为还有两个好,再把它响应燃气往这儿放。往这儿放,再返回一个promise,再去执行最后的这个响应,兰西二号最终把结果返回。
15:00
啊,这是最后的整个的这一条链条上面的回调都执行完,当然咱们目前是以只看成功啊,因为咱们这个请求是成功的,所以他们执行是这样子的,这个先执行啊,这个在执行,这个在执行。啊,然后下边是这个直行。这个执行都是成功的回调在执行。好,最后执行完毕之后,返回一个promise,返回了之后呢,然后最终由用户。啊,在这个位置再对结果去做一个处理。这就是拦截器它实现的一个原理。其实柚子在设置的时候,咱们再聊一聊啊,就是柚子在做的时候,他并没有做一些特殊事情,只是把回调保存了起来。保存在哪呢?保存在request这个对象身上的handle属性里边。
16:00
再说一遍啊,Use在执行的时候只是把这两个回调保存在了request handles属性里边。当然,Response也是如此。而在request的时候,就是Excel函数在调的时候,他开始对这个数组进行完善,把请求拦截器回调往前面放。然后呢,把响应燃气回调往后边放。最终再通过循环的方式。以跳板这种形式去进行执行,为什么说是跳板呢?因为你想一下。他一组一组的兄弟们想一想。它是一组一组的。啊,再画没有别的颜色,咱们再来一个这个。这是请求拦截器二号,请求拦截器一号。这个是dispatch,这个是unDeFined,这个是响应拦截器一号,响应拦截器二号,那么这块它执行如果成功就走这。
17:05
如果他成功走这儿,他如果成功走这儿,他如果成功走这儿。那么假如说啊,第一个要是失败了怎么办呢?比如说举个例子啊,失败了啊,第一次他肯定是先走这儿啊,如果他失败怎么办呢?他失败就走这。去执行失败的回调,如果他也失败呢?他失败就走,这,这是谁?这是onde find onde find没人管,那么这时候异常会穿透。这是promise的一个特性,所以说接着去执行失败的响应拦截器。后边也是一样子,再接,如果他失败的话,也再接着去执行失败的一个回调。所以说他们是对。函数进行了分组,放到promise里边,用跳板的方式去执行里边的回调。这就是Excel,它。
18:00
这个拦截器的实现的原理。当然还是那句话,如果你单纯的听我去写讲的话,你还是很难去理解的,因为只是还是那句话的话,纸上得来终觉浅。你不去实践还是无法深入去掌握,所以说这个小节我们先到这儿,下一个小节我们就开始模拟实现。啊,模拟实现整个染应器它的这个功能。OK,这小节我们就先到这儿。
我来说两句