day04/下午/077-尚硅谷-尚融宝-请求拦截器和响应拦截器

好，我们在学Java的时候呢，有一个概念叫拦截器的概念啊，实际上在前端也有这样的概念啊，我们有请求，有响应，那么相对应的呢，就有请求拦截器和响应拦截器，那顾名思义，请求拦截器呢，就是在请求之前，然后它拦截，然后对请求对象做一些处理，然后再放行啊，然后响应拦截器呢，就是在响应到达我们的前端之前啊，先拦截，对响应对象做一个处理，然后再放行啊，是这样的一个过程，所以我们来看一下，通过请求拦截器和响应拦截器我们都能做什么，那么我们嗯，如何在我们应用程序当中去使用这个请求拦截器，以及响应拦截器，以及如何进行定义，那么首先呢，我们来看啊，在刚才我们创建的这个对象里面啊。这个对象是吧，是我们通过ex create方法创建出来的一个X对象，那这个X对象呢，实际上它还有一个啊这样的一个属性叫interceptors，这叫拦截器集合，拦截器集合里面呢，有叫request的这样的一个拦截器，那这个呢就是请求拦截器，那另外呢，还有一个叫做嗯，Response的这这样的一个拦截器，这个呢就是响应拦截器，好通过这个请求拦截器和显要拦截器的use方法，我们可以配置它的具体的拦截程序，那么这个地方就是如果这个程序执行成功的情况下，我们已经组装好了请求对象，什么叫请求对象，就比如说我URL地址是什么呀，然后请求头是什么呀吧，请求参数什么呀，都可以封装到这个con里面啊，然后我在这里面可以对它进行一个进一步的处理，我们先来说这个请求拦截器的一个具体的使用啊，这块我就不敲了，直接把这块复理过来。

我和上面注释着，好，然后接下来呢，我们写在哪呢？肯定是去请求发之前对吧，所以呢，在这个request对象创建完之后写在这啊，好，那同样这个request就是这个名字啊，所以这个地方如果你起req，那re EQ，那你这个地方就必须写req，所以request并不是一个关键字啊，Request呢，它是来源于前面你定义的这个变量，好，所以request.in thecepts，然后这个request是一个关键字，这个request呢，就是我的请求拦截器啊好点use use是一个方法，方法里面呢接收两个参数，两个参数的话，一个参数我们可以通过箭头函数写，当然也可以通过传统的方式，这样这样写都可以。

好，这是传统的方式啊。好，第一个参数呢，是。有一个内置的肯对象，这个肯对象呢，就是请求对象啊，有一些请求参数呢，都会被封装到这里面，所以在这个地方呢，我们可以pencil点绕一下，比如说啊这边我们说看这个里面都有啥，我们可以看一下看这个好。

然后接下来呢，后面这块它有一个参数，这参数错误对象很显然就是我们在组装请求对象失败的时候，他就会走这个错误流程，放在这边呢，我们就嗯直接写，直接嗯错误的话，一般情况下我们嗯都会这么用啊，就是这个写法。大家记住就行了，嗯，因为这个对于咱们后端来说，其实。嗯，理解起来还是要有一个。还要有一些前端的基础的是吧，好promise呢，它里面你看这是大写的，那很显然就是有点类似于我们嗯，Java当中的那个类类型的一个静态方法的调用是吧，因为我这个上现在上下文呢，New promise，所以呢，我就直接用promise点啊直接调用这个，然后呢，这块有个error能把I给它传进去，那未来呢，如果有这个呃，Cash方法的话，那么这块就会调开方法，好吧，好，那所以这块我们。

就是对错误的一个处理，然后这块呢，是对。正确结构的一个处理，那如果我们的请求对象组装成功了，我们就可以打印出这个肯，所以呢，我们先来看一下这个请求拦截会不可以执行啊，请求缓解。我刷新了。这样的重访问一下右键。好，F12。和cancel，大家看这面的请求拦截是不是执行了，为什么请求拦截执行了两遍，因为我发了两个请求是不是。嗯，这一个是吧，啊，然后这一个对不对啊，两个请求啊，所以执行了两次请求拦截，那这请求拦截还能做什么呢？那我们得看这con对象里有什么，你看一下这con对象里它内容也挺丰富的，比如说有base u啊，有head当中的内容啊，比如刚才我们在head当中，嗯，就是组装的token呀，它会在这里面啊，然后还有timeout呀，是不是这个都是我们的请求对象啊，还有具体的ul地址啊啊，这个是请求对象，好，那么我们可以对这个请求对象做处理啊，所以呢，你看你可以在这个地方，比如说对他的进一步的进行处理，或者是说我们认为在这个地方配置海底它不太灵活，那我们可以在这配置。

为什么？因为在这配个在这个地方配置它是一个方法呀，你方法的话，你可以根据条件来配置不同的海，对吧，你这个地方它是一个就是一个配置项，它顶多这块我们可以写成一个变量的形式，但是更复杂的内容可能就不能在这个地方去啊，去优化去执行了，那这个地方是一个方法题，可以可以写很多代码块，所以呢，我们可以写一些更复杂的业务，那所以如果在这个地方我们去写这个针对于哈德的一个配置的话，那大家可以知道con这个对象里面。

我们刚才是看到了海的，它这个地方应该叫，你看这个con对象里面是不是有。Had呀，然后had里面我们可以写具体的内容啊，比如说我们也给它加一个令牌。He，然后这令牌的名字其实是你自己起的，比如说叫买肯等于HELE123，好，那上面这个我也放开了，他俩可以啊，就是都可以用啊，你可以用它来设置令牌，你也可以用它设令，那他俩同时存在也是可以的，好我们来看一下。然后刷新，然后我们来看一下network。Network。这款。Network这一块呢，你会发现当我点击这块的时候呢，诶没有请求，为什么没有请求啊，因为你得放行是吧，你拦截吗？拦截完了得放行，怎么放行呢？称准对的，这样就放行了啊就这块是放行好然后接下来呢，再看诶这面就有请求了，好然后我再刷新啊两个请求，其中第一个请求呢，你看我们在这个request head里面，请求拦截里面，我们设置了买token是不是啊啊同时呢，在这个ex配置里面，我们设置了token啊，所以这两种方式其实就是比较灵活啊，你看你实际情况，你哪都行，都可以去配置这样的一个开德斯里面的一些节点，嗯，然后接下来呢。

我们来看一下响应拦截。响应拦截呢，跟这个请求拦截差不多，我们来看啊，只不过呢，它叫response啊，前面都一样啊，就这地方呢叫response。好，然后在这里面呢，我们可以写两个，一个呢是拦截，就是响应成功，一个呢是响应失败。

好，那么我们说呢，这个响应成功的时候呢，它会呃有一个。Response。响应失败的时候呢，它会有一个I好，然后呢，在这个响应成功的时候呢，我们可以直接pencil一下pencil.log这个response。我这样写一下好，然后在响应失败的时候呢，我们可以，呃，跟前面请求一样啊，这样处理一下。明白吧，当然了，你在这个地方你还可以写更丰富的内容啊，就根据实际的情况，到时候咱们再说好，然后接下来呢，那就看一下成功，成功这块呢，首先看控制台。

先看这个空台啊。控制台。控制台呢，诶这个地方是不是打印了一个response response啊好，然后在这个位置呢，我们点开点来看，这个就是我们得到的一个响应结果了，好，那这个响应结果很显然我们要获取的时候呢，你看你在这个位置，你得从这个response.data里获取是吧。他说获取失败，获取失败，这个获取失败在哪走的，是不是走的这块啊。走的这款为什么为什么走这款了，因为这边没有成功，为什么这边没有成功，因为我们这边没有放行，对不对，同样这个地方也是需要放行的，怎么放行放好这样的话呢，我们在这个地方呢，可以对这个响应做点什么啊，你是从里面取值也好，你直修改这个响应也好，好你可以做点什么，做完了之后再给他放行，放行之后呢，就可以走到这个数据获取成功了啊，所以我们来看一下这个代码。

大家看这面response，这个是37行执行的啊，37行呢，就是我们这面。界面是不是小应拦截器这块执行的啊，然后接下来呢，直行完37行，紧接着到52行，52行的数据获取成功啊，我们把这个数据就拿到了。在这面。52行是吧，数据获取成功，我们response data好，那接下来呢，假设说我们做一个简单的处理啊，我呢就返回的呢，就不是response，我直接返回response点放行的时候我直接返回response，就意味着这个地方我取到的response就不是response，而是点，所以你可以通过这种方式，就是原来的response贝，因为在这个地方放行的时候，我先把response贝取出来，然后接下来呢，这面新一下，大家看是不是，哎，我看一下哪个是啊，数据获取成功这呢啊。

也就是说在这个地方。52行这个地方我们就原来不是写的点点贝塔嘛，现在省省了是不是，嗯，然后呢，所以在这个位置数据获取成功，这不嘛，52行啊，我们就直接把这它里面的内容就为数据列表就展现到这个位置了，所以这块呢，是我们所说的响应拦截器以及请求拦截器一个用法，那大家要注意的呢，是这个啊，无论是响应拦截器还是这个请求拦截器，一定呢要写在我们真正的发请求之前啊，发请求之后你再写机器。来不及了，好。