18-模拟实现axios拦截器功能

哈喽，大家好。这个小节我们来模拟实现一下Excel拦截器的功能。首先，老套路。先去把构造函数造出来。Excel。Config。然后this config等于一个configig。啊，然后哎，咱们这就这样做吧，然后this.intercepts。等于一个对象。注意啊，this.intercepts等于一个对象，然后里边有request。然后还有谁啊，Response。它等于谁呢？它等于的是new的intercept。Manager。下边这个跟它是一模一样的。啊，一模一样。好了，那接下来我们intercept还没有。啊，还没有，所以说这样子。

先把它先造出来。就是拦截器管理器的一个构造函数。Function。Interceptor。我这不写了，直接复制一份它。然后他的身上呢，就是他在实体化的时候呢。需要往实力对象上面加一个属性。叫S。而且等于一个空数组。啊，等于空数组啊，然后当然的话，它呢，还有一个方法。就是原型上面呢，有一个方法叫use。它呢就有两个参数。啊，有两个参数，你可以看一下柚子这块可以设置两个参数。第一个参数。第二个参数，两个参数都是函数。好，我们再写一个负。Field。还有一个呢，是REJECTED2个，当然型材名字你可以随便写啊，你可以写A和写B都行，如果这样写的话呢，更容易清晰的看到，呃里应该传什么，应该里边应该传什么内容啊，这个应该是传成功的回调，这个应该传失败的回调。

然后呢，接下来我们只要做一个事情就行了啊，直接this.s.push。把它往里边一放，把它往里边一放，搞定。也就是说，你只要调use。我就把这两个函数。做成一个对象。压到实例对象handles属性当中。这个数组里边。加到数组里边。OK，那到这儿的话。啊，关于它呢，咱们就已经完成了，把它折起来。但是呢，咱们Excel还没做完。所以说咱们这还在干嘛呢？excel.pro.request等于一个。

然后呢，Config。啊，在里边的话，我们就。不去细做了啊，这块就不能再细做了，为什么？因为这块如果细做的话，又跟原之前代码重复了。所所以说怎么办呢，我这样来做。它必须要返回一个promise。为什么返回promise呢？你想想，Request如果不返回promise的话，那你Excel调完之后，你就不能使用Z。想一下这块如果不返回promise你的Z，你就没法调。所以说这块必须要返回一个promise。啊，然后呢，里边咱们设置为成功。里边写一个对象啊。比如说。这个status等于一个这个200。啊，Status text就模拟一下啊，然后等于个OK。行了，我就写这两个。啊，这是request发送请求的。

然后接下来的话，我们开始呢，去创建Excel这个对象啊，这个函数啊。来一个let sales就应该等于。ce.pro.request然后点。好，我把它造出来。那此时Excel的话就有东西了。但是呢，咱们还缺点东西啊，缺什么东西啊，就是。没有这些东西。啊，没有这些东西啊，没有这个config，也没有interceptors，这还有点尴尬，那怎么办呢？没办，没有没有关系啊，没有关系，我们可以把这个值往上身上加。一加不就有了吗？对不对啊，一家又有了，所以说我们这样来做Excels.intercepts等于。等于谁呢？哎，咱们得造一个实例出来，这块如果说想要想要使用下边这种方式去发送请求的话。

我们还得把之前那些步骤还得再做一下。得创建一个实例出来。创建实例。这其实就跟之前create instance那个代码就一模一样了啊，咱们再写一遍吧，Let context等于一个new的Excel。然后往里边可以传一个参数，传完之后呢，我们需要把它的方法往他身上去加，我们方法的话就先不加了，咱们只是把谁呀，把这个属性加到他身上去。将。Context的这个属性。包括什么呀？Config，还有intercepts。啊添加。至Excel这个函数对象身上。啊，所以说Excel。呃，我们直接点吧，object.case。

然后context for each。然后里边来K。然后Excel下标K，就等于context的下标K。好，这个时候的话，你可以先看一看，此时咱们自个儿的Excel，它长什么样子。啊，然后打开浏览器一起来看一看。好，然后点开它，看这config和intercepts就有了。啊，Config和intercepts就有了，没有问题。好，到这儿的话，Excel构建就已经完成了。注意啊，到这儿啊，Excel这个创建的过程就已经完成了。那么下边。就到这了，又是添加，又是添加又是添加，巴拉巴拉巴拉一大堆。啊一大堆啊，然后呢，你先别着急啊，咱们到这个位置先来看一看。Excel，此时他长什么样子？

啊，此时长什么样子啊，然后下边代码咱们就先。把它注掉，不让它执行。点开刷新页面，然后点开它。你猛地一看，你发现没有啥变化啊，咱们其实重点观察的也不是最外层的一个变化，咱们看的是这边变化，点开它。点开它。然后点开它。大家可以看一下。此时request身上。里边已经是有内容了。有两个回调啊，有两个对象啊，对象里边有两个回调。这是请求拦截器，下边你再看这个response也是一样子，有两个元素。这里面放的是响应拦截器的回调。好。那么到这儿之后呢，Excel函数开始执行。咱们说过Excel函数执行其实就是在执行谁呀？就是在执行request。

就是它啊，点开它刷新页面瞅一眼。你看这status。还有呢，这个text就来了。那么来是来了啊？但是呢，这个结果跟咱们预想的还是不太一样。为什么呢？因为这些拦截器啊，压根儿都没执行。啊，请求拦截器，响应拦截器啊，都没有执行。以下。为这个功能。测试代码。上边咱们自个儿写的封装代码，下边是测试代码。那好，既然是没有没有去发送，就是既然这块拦截器没有执行，咱们得想让它执行。怎么让他执行呢？我们就需要对request这一个函数。要做一些事情。啊，做什么事情。跟原来是一样的，首先先要去创建一个promise对象。

来一个cost，哎，不能写can也得写let啊，Promise等于一个promise their resolve。这个地方是核心点啊，大家注意，这是也比较难理解一个地方，这是难点。其实对于上面这个intercept manager，它是相对来说比较简单的。难点在于这个request。这个方法的实现。那么有了这个之后呢，咱们还需要再去创建一个数组。啊，然后呢，Cost chance等于一个数组，数组里面放什么。大家应该还记得啊，这块放的是dispatch request，还有一个unDeFined。那么dispatch request，咱们这没有，没有怎么办呢？别急，我把这一部分代码放到下边去。

啊，发送请求的。代码我把它放到这边来啊，Config拿过来，然后往这儿放。啊，他的返回结果是一个promise。这样一来的话呢，我们就成功的把结果又模拟了一遍。OK，此时数组已经构建完成了。好，数组在构建完成之后，接下来我们就要处理谁啊？拦截器。先来处理谁请求拦截器？怎么处理呢？我们要将请求拦截器的回调。压入到chains。的前面。就是我要把请求燃气往前面放，往这儿往这儿去放。怎么往这儿去放呢？我们就要便利。便利是谁呀？对不对，我们要便利谁呢？我们这个时候便利的就是request.handles。

因为request这个属性上面有handles这个属性，而它里边存的就是那个数组。所以说我们要怎么办呢，这样来做。This点。这个intercept。Interceptors啊来看看这个地方啊叫它，然后下边呢点request。我们可以先看一看他此时长什么样子啊，Log打印一下他。保存。然后点开刷新页面。他说了这个request on啊，第27行。诶，我们再看看this。保存，然后刷新页面哦，天哪。坏事了，类似指向发生了一些问题，所以说呢，在这个地方咱们还要去变更一下在创建的位置啊，我们要变更一下，把它放下边。啊，把它放下边，然后this这一块咱们要换一下。

指向指向这个，要不然咱们获取不到那个属性。这样一来，你再看一下，走有了。有了之后，下边咱们回过头来。再把它拿过来，点intercepts.request打印一下它。刷新一遍。看这。啊，我们就成功的拿到了谁呀。Request这个拦截器的对象。拿到对象之后，我们要便利一下他。所以在这个对象身上有谁啊，有S。它里边放的就是请求拦截器的回调。看这。哎，在这儿呢啊，One two还有编号，我还专门做了标识。好，然后接下来我们对它做便利。走。Forage。然后item。Item，每个元素都是一个对象。然后接下来chance.on shift。

Item DR fulfilled。再来item DR rejected。搞定之后，你再来看一看我们的chains，呃，这里边儿she on shift的意思是往数组前边去添加。好，然后切过来刷新。点开看一下。这是请求拦截器成功的二号。啊，失败二号。然后请求燃气一号。成功。然后一号失败。这个时候，速度就发生了变化。然后呢，此时咱们再往前推进一遍，把响应来器也处理一下啊，响应来器拿过来，把request变成response。然后呢，此时你再来看一看咱们这个chances。它的长度。又变了。不再是十个，而变成了不再是这个八，呃，不再是六个，变成十个。

因为响应燃器里边还有两组。OK，到这儿数组就准备完毕了，数组准备完毕之后，接下来。就开始怎么办呢？便利。我们做一个外循环啊，跟他那块是一样的啊Y循环。判断一下。这个chance的一个长度。啊，看它是不是大于零。其实它它的原版，它的原原码里边判断是啊，判断它这个值是不是为一个真值，如果为真就往里边走，如果说不为真，其实就是为零。啊，如果不为零的话，就跳出，所以咱们这儿也可以这样写，也可以这样去写都行。当你的这个。速度长度还大于零。你就得进来。进来干什么？进来做这个事情。

等于promise.z。开始从数组当中取出回调。Chance。点。Shift。再来chance.shift。一个一个去，你原来不知道这有十个吗？对不对，我先把前边那两个回调拿过来，这两个回调是谁呀。请求拦截器二号。请求拦截器二号，他俩先过来。然后呢，我把这个图呢，再给大家画，再画一下啊拿过来。然后。哦，等一下哦，我的天哪。重新来。看下这个结果啊，首先你报错你先不用管它啊，报错你先不用管它，哎，点开它一这块有一些小的问题。

啥问题呢？我们在进行压入的时候压歪了。在请求燃气压的时候，我们应该往前面去压。响应燃气咱们应该放后边。所以说在这呢，我们应该怎么办呢，把它变成一个。Push。啊，应该这么去加入。好，然后呢，你再来看这个结果。这个结果是咱们最先最最后想要看到的。贴个图拿过来。然而在这一块的话。我们在做什么事情呢？就是从数组当中挨个去取。把它取出来。把它取出来。然后执行。执行完之后呢，返回一个新的promise。下一次。这个时候循环还有几个，还有八个。啊，不是说循环就这个数组还有八个元素，然后再来把这个。取过来。

这个取过来，然后呢去执行，如果说成功了，如果成功的话，再返回一个promise，然后下边再来，如果成功就要执行它。他在干什么？他在发送请求。啊，所以说请求拦截器，如果说成功的话，请求就会发出去。然后呢，完了之后再继续。好，再来走谁呀，走这个响应拦截器。一号。再来响应拦截器二号。啊，最后我们再把它返回就搞定了。Return一下。这个return promise。这来整个的。拦截器就全都执行了，我们来看效果怎么样。刷新页面。嗯。瑕疵。就是这一块的话，它不能等于零。啊，必须要大于零。因为到最后咱们谈完之后。

就没有元素了。没有元素的话就空了，一直为空，一直为空就死循环了。所以在这咱们应该把它变成一个大于零，而不应该把它设置为一个这个等于零。好，把它关掉。然后我们重新点开，一起来看一下。打开刷新页面。瞅一眼，看这。请求燃气二号一号响应燃气啊一号二号这样一个顺序。到这儿的话。关于这个Excel，它拦截器的模拟实践我们就已经做完了。啊，这里啊，用到了谁呢？用到了一个。啊，这个燃气的管理器这样一个构造函数。通过它来去保存回调。然后呢，用的时候在哪用呢？用的时候是在request这块用的。啊，Request负责做整合。首先把请求的那个发送请求回调和onDeFi先放在一块儿。

这个时候就非常非常重要了。如果没有他。就不能够这样去正常跳转。顺序就不对了，就是整个这个就位置就不对了。所以他还是很重要的。然后将请求燃器往前面放。然后将响应来气往后边去放。最后整成一个大数组。开始便利。然后通过promise链条的方式去执行里边的回调。通过promise链条的方式来执行里边的回调。这就是。拦截器它的实现原理。好了，到这儿的话，关于这块内容我们就先到这儿啊，把它先保存一下。