00:00
Hello,大家好,那这个小节我们来模拟实现一下Excel取消请求的这个结构。还是一样,一步一步来。从这个位置以上。为模拟实现的代码。把引入的这个文件,我们把它注掉。好了,开始。首先还是一样,把构造函数。先造出来。Function access config。This config等于一个config。然后。原型上面的request方法也要给它加上。啊,然后在里边的话需要做一些其他事情,这里为了方便我们就直接这样子的dispatch dispatch request。由他呢去调dispatch,然后dispatch再去调adapt。然后接下来我们先把这个结构全都做出来。这是。
01:04
原型的request方法。下边呢,是。去把这个dispatch request加出来。然后function。然后里边写一个config。呃,我们在这个位置呢,也是一样,Return一下adapter。XHR。然后config。至于这里边对结果的一些中间处理,我们就不加了啊,就把整整体结构都答出来,X HR adapt。然后function。然后这块也是一样,把config传进来。好,那到这儿的话,整体结构就有了。
02:01
有了之后呢,咱们先把谁也造一下,就是创建。Excel这个函数得有。Costce应该等于ce.pro.request点。我就用它了。然后。这里的话还是一样啊,咱们再做一下吧。要要到时候的话,This指向可能会有一些问题。好,把它呢放到context上面。搞定。此时Excel就已经是函数了,它就可以发送。啊,相关的一些请求就可以调查了。啊,然后进而去调它。然后下边的话,咱们先看一看啊,先看一看,然后点开。不是这个文件重新打开一下。把他干掉。刷新点击好,大家可以看一下此时。这就是Excel的样子。
03:01
它可以当函数句式,然后发送请求。好的,接下来的话呢,我们开始去实现功能。这功能怎么去做。哎,这重点就来了啊,重点就来了,我们这儿呢,首先先把。X HR adapter这块功能先加一加,因为是要发送请求嘛,这个请求你必须得能发出去啊对不对,然后呢,这块return一个new的promise。他必须要返回promise啊,因为他要返回给他,他也要返回promise,然后他要返回给他request就是Excel。啊,所以说这块的返回结果是promise才可以,因为后边要调Z方法指定成功和失败回调的。就是在这儿。啊,所以说我们需要在这return一个promise,然后在里边去写相关的步骤,例如。实例化对象。然后XHR等于new的xmlhttp request。
04:04
呃,然后做一个初始化。XHR.open第一个是类型con method,然后conig URL拿进来。第三个呢,做一个发送x2.3。最后一步呢,是处理结果。On ready state change等于一个function,这些代码都比较熟悉了,我们就写快一些。X h2点,Readyate要等于一个四。啊,在里边判断结果。啊,如果XHR.status要大于等于200,并且XHR点得小于个300。好了,然后在里边的话,设置为成功的状态。我们写一个resolve括弧来一个对象。啊,这些的话呢,这里。我们就把status拿过来,XHR点。
05:03
然后还有就是状态的字符串text拿过来。了,那其他东西我们就不往里边放了啊,然后失败结果也加一下,然后reject。New era。请求失败。OK,搞定。下面我们来验证一下啊,这个代码到底能不能发送请求啊,能不能把结果呢在控制台做一个输出。点开刷新页面,点击。好,他说access.talking is not a constructor啊,这里功能还没有完全完成,所以我先把它掉,刷新页面。点击。呃,还是cancel token的问题。啊,在这个位置。把他也得住掉。好,点开刷新重新来。OK,这个时候reject is not DeFined啊,那第几行呢?第51行我们去看一看,51行怎么一回事?
06:01
11行。啊,这个单词写错了,Reject。切过来,再来点击。Oh my god,请求又失败了是吧?失败怎么回事呢?是不是的服务出了问题呢?然后看一下network是怎么回事啊,点击。然后response,点开看一眼,哦,这是200啊,怎么会失败呢?我看一下我的判断是不是出了问题。在上边儿。Status oh my god。啊,单词写错了,这个是不太应该的啊,然后点击。好,回来了,见console这个结果也回来了,没有问题。好了,整体结构我们就已经写完了,下边进入正题,就是关于取消请求。那么取消请求处理,我们应该怎么去做呢?首先呢,需要有一个构造函数,就是cancel to的构造函数。
07:08
我们写一下function.cancel token。OK,然后它那里边接出一个参数ex。当然,型材名字你可以随便写。那在这个地方我们做什么事情呢?首先,先声明一个变量。注意啊,我们现在还没有用它的啊,只是在这儿呢去构造一下,咱们看索token应该做什么事情。然后先说明一个变量VAR。这样一个变量。啊,它只是一个普通变量啊,下边的话。为实例对象添加属性。如何去为cancel token的实例对象添加添加属性呢?我们可以来个this。点等于new的。
08:05
OK,搞定。那么此时如果有实力对象cancel token的话。那这个时候他的身上就有一个属性。并且它的值还是一个promise对象。而且还是一个pending状态,因为并没有改变啊,所以说它是一个pending状态的promise。而在这呢,我们再做一个事情,就是将resolve赋值。给resolve promise。什么意思呢?就是我要把它复制给他。这样一来,他们两个功能将变得一模一样啊。我只要叫他。就能够改变这个。就像状态为成功。OK。完成啊,完成之后呢,咱们接下来的话去调用一下X。这个函数。
09:00
调用函数干嘛呢?别急。我往里边也传递一个参数。啊,也传递一个这个函数,那么这个函数内部它做什么事情。别的东西我都不管,我就做一个事情执行。这个函数。啊,只做这一个事情,就是我要调一下。就掉他。掉完它之后咱们就知道啊。这个就能够把它对象状态改为一个成功。好了。这个cancel token我们就已经写完了,大家可能会对这块有些困惑,有些绕,别急。我们把下边代码给大家,一打开你就知道怎么回事了。接下来啊,我们把这个代码先打开。
10:00
啊,把这个代码我们往上提一下吧,这样看的清楚一些。然后把这个咔掉,把这个也卡掉啊,咱们先不用它了,用自个儿自定义的这个can构造函数,其实呢,这个东西只是把它的属性,就是把它的值作为一个属性存在了Excel身上而已,这个并不是特别重要啊,咱们想要先把它放掉。好了,接下来。我把它贴个图。放到下边。对,放在这个位置,大家看一下。当new can的时候。这里边代码就会执行。然后呢,有一个变量,This,你看啊,此时can talk身上就已经有promise这个属性了。有了promise属性之后。然后继续往下执行。然后呢,Executor要去执行,Executor是谁?Executor就是他。
11:02
啊,Exor就是它,然后呢,它在执行过程当中接受了一个参数。这个参数是一个函数,你注意啊,是现在。红色线所框的这个函数,它要执行了。它的函数接收一个参数的,因为它有形参啊。所以说他得有食材。食材是谁?食材是他?啊,食参是他。那么这个时候实参是他的话,我们又做了一个事情,就是把这个C又复制给了cancel,你想一想,你说cancel此时是不是他?大家品一品。当这个代码在运行完毕之后,Cancel其实就是这个函数。就是这个函数。而如果说cancel要是一执行promise就会执行resolve promise执一执行,那好,这个promise,这样状态就会变为成功。
12:12
好了。这个时候呢?在cancel的功能代码这一块,我们就已经把它做完了。但是呢,他还不能够去取消请求。为什么呢?因为还是那句话,你这里并没有跟about单这个代码有任何的关系。啊,没有任何关系,所以说怎么办呢?我们还要回到发送请求的核心代码当中来,去处理这个取消的请求。我们知道Xh2.about。这个方法只要一执行。请求就会取消,但是这个代码不能直接放在这个位置,为什么呢?如果直接放在这个位置的话,每个请求都发出,发送不出去。代码执行到这块就取消了,执行到这块就取消了,没法发了。
13:00
对吧,这工作就没法过了,哎,这日子没法过了是吧?好,那么这个时候怎么办呢?好。看好了,我们这样来做,con.can talkingken。如果说。你con里边传递了cancel token,大家注意看一下啊,看这位置把把它打开。那么此时这个是那个config config can token,咱们配置这个对象。哎,如果说你配置对象,那么下边就要对。Can token对象身上。The promise对象指定成功的回调。啊,为他指定成功的回调,那怎么去指定呢。Con can talking。想一想啊,他。其实就是刚才的这个对象。
14:02
往小的放一放,或者把代码咱们这个地方看能不能还能再再减一减,往小小的放一放,让小小。好看这他。其实就是这个对象。为什么呢?因为你看你往这儿一放。是吧?Con fa.can token就是他呀,看着can can token就是他,他又是谁?他就是这个对象。所以说can talking就是他。好了,那到这儿之后。那他的身上有一个属性叫promise。来吧。直接咱们这写一个,呃,写一个value拿进来。然后呢,这个位置。把它放进来。到这儿呢?整个取消请求的功能我们就写的差不多了啊,来验证一下看行不行。
15:02
点开刷新页面。点开network啊,看能不能发请求,点击请求发出去。没有问题,然后呢,咱们再去点击取消,点击取消注意啊,这用用咱可是咱们自个儿的啊,你看这个地方,我把文件引入这块已经给它注掉了,用是咱们自个儿的这个代码。去实现了请求的取消。其原理咱们再说一遍,就是啊,在can talk身上维护了一个属性promise。然后将改变他状态的。这个变量。暴露到了全局。啊,也就是说我们可以用一个变量。来去来去,怎么说呢,来来去,保存它的值。Cancel就成为那把钥匙。只要CANCEL1执行。啊,Cancel只要一调用。那么这个导火索就会被就会被点燃。
16:00
啊,他一直行内部的resolve。Promise就会执行他,执行他就执行他,执行他的状态就会变为一个成功,而他的状态一旦变为成功。那么发送请求的当中,这个地方回调就会执行。其回调一执行。啊,然后XR的就会执行。啊,然后一执行的话,请求就会被取消,不过在这的话还可以,为了做的详细一些还可以呢,将整体结果。设置为失败。然后一个reject。啊,请求。已经被取消。也可以呢,做的更为的标准一些,加一个这样的error。好了,那关于promise取消请求的功能模拟实现我们就已经做完了啊,希望大家呢能够。在自己不看任何代码的情况下,能够把它实现出来,这样的话。
17:04
能够对自己有一个非常大的提升。好了,我们就先说这么多。
我来说两句