00:00
Hello,大家好,这个考题呢,我们来做一下,使用Excel取消请求。那我们通过一个案例来来讲解这个功能。首先呢,这里有两个按钮。点击第一个按钮呢,发送请求。然后点击第二个按钮呢,取消这个请求。好,首先我们先来获取一下按钮。然后呢,BTNS等于一个document query select。将button的这个标签名放进来。下边呢,给第一个按钮绑定时间。发送请求。DTNS下边0.onclick等于一个function。然后在里边我们借助于Excel来发送。然后包括相关的参数,例如method等于get,然后URL等于http local host3000。斜杠。啊。
01:01
好,然后呢,通过Z方法来指定它成功的回调。然后可以搜log打印一下这个结果。这个代码我们已经写过好几遍了啊。先来验证一下。刷新页面。打开控制台,发送请求,看结果。好结果的话是成功的200。啊,数据也拿到了,没有问题,大厂学院上线了啊。好了,那到这的话,我们想呢,去取消这个请求,应该如何去做呢。这里边我们需要做这么几步,首先第一步要添加。配置对象的一个属性。这个属性叫什么呢?它的属性名字叫cancel token。啊,这里的话我们用这种方式来演示,因为它比较简单一些啊。不是简单,就是结构来说更加更为清晰一些。好,把它拿过来,Cancel token。它等于什么呢?等于一个new的excel.cancel token。
02:00
Can token。然后呢,这个。呃,实例化的时候呢,接收一个参数啊,这个参数呢,它是一个函数。然后呢,我们写一个function。然后这里边儿呢,有一个行参叫C。他名字的话,你可以随便写。然后呢,这个时候我们还要再做一个事情,就是声明一个全局变量。啊,全局变量。Let,这个cancel。当然这块名字也可以随便写啊,只要满足标识符要求就可以了啊,这是第一步,这是第二步。好,然后呢,在这个回调当中呢,我们需要做一个事情,就是将这个C。它的值赋值给cancel。来一个cancel。等于个COK搞定。这是咱们所做的第三步啊,将C的值。啊,负值。给谁啊,复制给给这个看。
03:04
呃,这样的话,咱们整个的请求这块就配置完毕了,下边我们只要给第二个按钮绑定一个事件,并且去执行看即可,好。下边的话绑定第二个时间。然后取消。请求。啊,然后BTNS下边1.onclick等于一个function。啊,在里边我们只需要去执行一下cancel这个函数就可以了。好了,那么在这的话呢,我们先来演示一下啊,刷新页面。然后点击。点击你会发现啊,我们就是点这个按钮,它其实没有什么效果。或者说大家可以看这。发请求取消,发请求取消,你看不到取消那个样子。所以说呢,我们未能够看这是为什么呢?主要是因为啊呃,这个服务啊在本地。我们现在发送请求啊,没等我们取消呢,结果就回来了。
04:00
这个号取消根本看不到效果。所以说在这我们做一个事情,就是将服务器端,就是将服务端做一个延时响应。那服务端呢,咱们是用JS server来做的啊,如何让它做一个延时响应呢?大家可以看一下这个位置。啊,这是呢,杰森server,他的一个帮助说明里边呢,有一个参数叫。呃,耕地。等一下,这这这这这看这。啊,就是a delay to response。允许我们设置延时,所以说在启动的时候呢,我们可以加一个杠杠滴类。啊或者杠地都行,写一个,呃,这个2000。测绘车就是延时两秒再返回结果。这个时候大家再看看效果啊,刷新页面,然后发送请求,等着你看,等两秒。反结果,再来,等两秒反结果。是这样的一个啊。响应的效果了,好,接下来的话咱就可以去点击取消按钮了,大家注意观察点击。
05:05
取消。点击取消,点击取消搞定。啊,完成好,这是关于取消的一个实现,当然还有另外一种效果,我们可以这样来做,大家看啊,多点几次。每点一次就会产生一个请求,每点一次就会产生一个请求啊,如果说这个时候要是用户抢购的话呢,我们这个服务器压力肯定会很大啊,用户疯狂这样点。所以我们可以怎么办呢?咱们可以这样子,点击这个按钮的时候。看一看上一次到底有没有,上一次那个请求到底有没有,就是呃,正在发送,如果上一个请求还在发送,那我们就可以来先将它取消掉。在发送这个请求。再说一遍,在发送请求的时候呢,我们先看看上一个请求到底是不是还在继续,如果上一个请求还在继续,我们直接将下一个请求取消掉就可以了。好了,那么这个东西怎么来做呢?也比较简单啊,就是在发送请求之前。
06:04
先检测一下。他上一次请求是否已经完成?那这个判断怎么来做呢啊。啊,其实就是判断cancel的值到底是不是这个,那就可以了,你看啊,它第一次它的值是nu。然后呢,当我们执行完Excel之后。这个时候cancel值啊。就是这个它的值啊,就不再是那,而变成了C了。所以说我们这里可以判断cancel值,来对上一个请求做一个判断。好,如果说。Cancel。他要是不。等于呢?不等于,那表明什么呢?表明啊,我们这个请求呢,上一次还在继续,还没有结束,那同学说怎么还没有结束呢?其实我们这应该再做一步,就是当请求在完成之后呢,我们来一个cancel。啊,等于呢。
07:00
好,我们先把这个先先注掉啊,也就是说最开始。开值为呢,当请求呢,执行完了,诶等会儿咱们不应该把它放在这。咱应该把它放,把它放这。Sorry啊,这是将cancel的值。啊,初始化设置。当我们的请求回来之后。啊,我们再把这个值呢,给它复原掉。这样一来,你下次呢,再去请求的时候呢,请求过程当中探索值,它是哪个对象。啊,Cancel值为这个对象啊,不是啊,是个函数啊,等我们结果回来,然后响应处理完毕之后,它的值又回归呢,所以说在这咱们可以呢,判断它是不是等于now。如果说它不等于呢,就表明上一次那个请求还在继续。我们就可以来直接来调一下cancel这个函数,来取消上一次那个请求。取消。上一次的请求。
08:01
完成,我们一起来看看这个结果怎么样刷新页面。然后点击。点击。点击。点击。点击。啊,这个情况,这个结果已经回来了,此时cancel值又为囊了,为什么为囊了?因为这个代码它执行了。然后这个时候,当我们在发送的时候呢,再点击它呢,就不会去执行cancel了,为什么它的值是那。它执行不了你看点。啊,没有报错,没有问题,好,再来再来。一切都跟原来一样的。好了,那么到这儿的话,关于。Excel的取消请求功能演示我们就到这,至于它为什么要这样去做啊,我们还是一样,到后边讲解圆码的时候,我们会给大家详细去说明啊这个实验的原理。
我来说两句