00:00
哈喽,大家好。这个小节我们来给大家讲解一下Excel当中关于取消请求的一个原理。就是给大家演示一下他是怎么样做的来实现这个请求,这个请求取消。好。还是按照老惯例。我先把之前。做的取消请求的案例呢,先把它拿了过来。拿了过来之后呢,我们可以通过它呢去发送请求。啊,发送请求。当然我当然的话,这个请求发的太快了。啊,没有任何的延时,所以来不及我们去点击取消请求这个按钮。所以说我们把服务呢,稍微调整一下。把杠地呢给它补上。啊,这个时候的话,我们就可以去点击取消请求了。刷新。然后点击取消,点击取消点击取消。啊,如果说你直接去点这个取消的话。啊,直接去点这个取消。
01:00
它也是没有什么效果的。好了。然后接下来的话呢。我们开始。来把这个代码呢,给大家把流程跑一跑。呃,在没有点击按钮之前,所有代码都是没有动的啊,只是引了一下Excel。当然我这块也需要把文件引入呢,稍微换一下,换成自己的那个。保存一下。啊,咱们再来验证一下刷新,然后点击。再来一次啊,点击请求可以发送。可以取消。发送取消都没有问题。那好。下边的话,当我们点完按钮之后,代码开始跑。啊,然后呢,运行Excel,在运行Excel的时候呢,大家注意看一下,这里有个对象。这个对象肯定是先做先造好的。啊,这个地方肯定要先造好,如果对象没有的话,Excel运行时是你得不到参数的。
02:02
所以说这个对象一定是先造好的,而这个对象当中它有一个额外的属性。叫什么呢?叫cancel talking。所以说这个代码在这儿呢,它会先去创建cancel token所对应的这个值。为了看得更加清楚一些,我把它单独提了出来。啊,创建cancel token的值。好,我把他请了出来。那么请出来之后。再把它放到这个位置。相信这样的话大家应该能看懂啊,我只是把这个直接放在外边,方便大家去查看。而cancel token这个值是由new excel.cancel token而得来的。那么Excel cancel talking,他长什么样子呢?其实在这我们可以方便一些,直接去搜cancel token这个文件。
03:01
C。找一下。好,大家看一下cancel token在这儿。把它拉一拉,咱们调整一下,字还是有点太大了,我稍微调小一些好吧,要不然咱们空间比较小。然后我点开cancel token。大家看这啊,然后还得再小一些啊,还得再小一些,大家看这,它在实际画的时候接出一个参数。啊,把这参数需要传给他。注意,这是一个函数。也就是说在实例化的时候呢,这构造函数需要接收一个函数类型的值,你看这这里我也做了文字的一个汉字说明啊,你必须要传一个函数,你要传一个其他类型,我就报错。啊,就要保存。好,然后呢,接下来接着继续。然后promise,这是一个变量。没有什么特殊的含义啊,目前来看的话就是一个普通变量。然后呢,这里又来一个事情啊,This promise等于一个new promise。
04:02
注意啊,this.promise等于new promise,所以说。在实例化出来这个对象的身上,也就是cancel token的身上。有一个属性叫promise。啊,而且这个promise呢,它还是一个promise类型的值啊,你看这个属性啊,是一个promise promise类型的值。而在实例化的过程当中,注意看这行代码。他把这个参数。赋值给了这个变量。我们先来分析一下是干嘛的。咱们promise里边已经介绍过了,Resolve这个函数执行是可以改变promise对象状态的,它只要是掉了,那这个状态就会变为一个成功。而此时,你把值传递给了这个变量。
05:00
所以promise这个函数如果它执行的话,他如果说像这样子去执行的话。那么这个promise的状态将会变为成功。注意啊,这是一个非常关键的一个点,这种技巧也值得我们去学习。此时,他将可以改变。这个属性的状态。OK,接下来的话接着往下继续啊,来一个事情,就是talking等于一个this,这里其实就是保存一下this的指向,然后呢,Executor往里边传了一个函数。好,我们来分析一下executor是谁?你发现诶X和XQ的好找不到,别急,看这。Ex在这儿呢?而ex是通过传递函数传过来的。
06:00
所以说ex就是他。啊,Executor就是它,而就是他之后。注意啊,注意这个时候呢,就消身稍微有点有点有点乱了啊,往前怼一怼,我把这个图贴一下。拿过来放到这个位置。放近一点,这样看得更清楚一些,是这个函数。而XQ在运行的时候呢,接收了一个参数。而这个参数是也是个函数。我们在内部做了一个什么事情呢?哎,就是把它先不说内部啊,就是先把在运行的时候呢,它把这个内容传递给了。就是现在我所选中的这个函数传递给了C。别急,慢慢的再看一看啊,就是把现在选中的这个函数。
07:06
给了C,所以说此时C就是一个函数。那咱们想一想啊,如果C执行。会怎么样?哎,如果C要是执行的话,那内部的话就开始执行啊,Ton reason to reason是什么东西,咱们先不用管它。啊,不用去管它,而talking reason等于new cancel也不用管它,重点看谁。重点看这个。Resolve这个函数执行了。啊,Resolve这个函数执行的,也就是说C只要一调用。相当于是resolve promise这个函数就会调用,所以说他的命运跟他的命运绑在了一起。C只要执行,Promise就会执行,而现在我们在内部把C交给了cancel,所以cancel执行,那promise就会执行。
08:11
就是这样的一个规律。当然,同学可能会想说,诶,不太对劲啊。这cancel是改变了他,Cancel如果执行是改变了他的一个呃这个呃,让他去执行,并且改变状态,改变状态又怎么样呢?改变状态,也不能说去停止Excel的这个阿贾克斯请求发送吧。没有错啊,你单纯从这个点去出发,我们不能够。说直接去影响请求的取消。我们现在这个层面只是说分析到这个层面啊,就是说cancel如果去执行啊,Promise,这个promise去执行,一执行就改变的状态为成功。只能是到这个位置了,没有后续了。
09:00
但是你别急。接下来我们往前再推进一步。就是阿贾克斯请求。他要想去取消。势必得调一下实例对象当中的一个方法,咱们指的是阿贾克斯那个对象啊,就是xmlhttp request这个东西。啊,HTTP。Request。这个实例对象里边一个方法叫什么名字呢?叫。只有AB about这个方法执行,才能够去取消as的请求。那么这个代码在哪儿呢?对不对,这个代码about代码在哪呢?我可以现在直接告诉大家它的位置。它就在adapt当中的HR.gs当中。就是核心的发送阿贾克斯请求的那个文件。
10:04
然后接下来的话呢,我去搜一搜about。这是一个事件啊,不是他。大家看这。啊,大家看一下这。Request their about这块的话就会取消请求。好。那么现在的话,我们就只需要关注这块内容就可以了。与取消相关的这块内容,上边和下边我们都不管。啊,跟咱们现在的卦就是跟他们都没有关系啊,只跟他有关系。那么这里做了一个判断。If can.cancel token,注意啊,这可是最最核心的发送请求那个文件。啊,而在这里边我们做了个判断,如果conig can talking。这什么意思啊,就是如果说你的配置对象拿过来啊,放这边来,如果说你的配置对象当中有一个叫cancel talk的属性,你再进来。
11:04
啊,你再进来,如果没有配置的话,兄弟你就别来了,如果你都没有配置,你都不可能去取消这个请求。所以说如果你配置,你就进来执行里边代码,里边代码在做什么事情呢?你看啊,Can fix.can token是谁是他。啊,准确来说应该是他是这个对象。而can promise,它又是谁?是这个对象身上那个属性?Promise。同学可能忘了,哎,这个promise哪有啊,看这。看这啊,所以说在con cancel talking的这个对象身上是有一个promise属性的。他在这里做了这样一个事情。Then方法指定了一个回调。
12:01
注意,他在这儿只指定了一个回调。没有执行,没有没有指定两个回调,按常规来说,咱们会指定成功和失败,这他就指定了一个。因为有一个就够了。那么咱们想一想啊,你说这个代码。他会立即执行吗?会不会呢?不会,为什么,因为在这个情况下。啊,在目前没有去取消的情况下。Promise状态,它是处于一个pending状态的。也就是状态未改变的状态,那所以说这个回调它不会立即执行,而是在未来的某一个时刻,当状态改变之后,他才会去执行。啊,那如果说我前边的状态改变了呢,改变的话就执行里边代码,改变的话执行里边代码,里边代码做什么事情呢?里边代码就是request about。
13:08
取消请求。好了,那么接下来问题的症结点又落在了,什么时候会改变这个promise对象它的状态呢?此时,我相信大家已经有。一些感觉,就他们刚才这些点是能够连在一起的。没有错。就是如果说你运行了cancel函数。就相当于C。这个函数运行了。C这个函数运行的话,就相当于其内部的resolve promise这个函数它运行的。它运行就相当于resolve内部的这个函数,它运行了,而它运行兄弟。状态就发生了改变。
14:03
而其状态一发生改变的话。在这个对象的身上已经绑定了一个成功的回调,所以这个回调函数就会去执行,从而让请求取消。这就是Excel实现请求取消的原理。他很巧妙,把代码全都放在了这个文件当中。而取消代码呢,他说他不一定一定会执行,注意他不一定一定会执行啊,就是说不一定会执行。所以说他把这个代码放在了一个promise成功的回调当中。而在未来,如果你想让这个代码去执行的话。你只要去改变这个promise对象的状态就可以了,而他将这个状态改变的函数暴露给了外层,将由程序员自己。
15:08
来,去控制。很巧妙。啊,也是我们值得学习的一种编程的思想。好了,这个小节我们先到一这儿啊,把它保存一下,下节课咱们开始模拟实现。
我来说两句