00:00
哈喽,大家好。这个这个小金呢。我们来模拟实现一下Excel发送请求的一个过程。啊,如果光去这样的解读,光去看的话,你很难掌握住它整个的过程。所以说啊。还是得亲自去写一下。首先,咱们先来声明一个构造函数。Function Excel。这里呢,接收一个配置对象,然后在里边的话,我们就简单写一下啊,Config等于一个config,就不再去详细详细写它的创作过程啊,那个构建过程了。然后把结构打起来,excel.pro.request等于一个function。然后在这儿的话,开始就是发送请求的。相关动作。这是。关于Excel结构的一个搭建。下边第二步呢是dispatch。
01:02
Request函数。然后dispatch。Request。好,然后呢,完了之后这块也是一样,接受一个参数config。这是第二个,然后下边第三个。就是adapter适配器啊。Adapter。适配器。适配器。然后咱们这块用的是XHR,然后adapter。OK,完成。下边呢有request起头啊,因为因为我们Excel的话就是从这个位置开始的啊。呃,当然access这块咱们还没有去做一个创建,所以这这块第四步我来创建一下它。创建Excel这个函数。
02:01
然后let Excel就应该等于。Excel点点pro。然后request。然后。咱们这为了方便啊,就直接来一个那啊。不再去指向其他的一些实例对象了。这也是为了方便。好,那么此时Excel就与request功能是一模一样了。发送请求的过程是怎么一回事呢?首先。他先去创建了一个promise对象。那么其实在之前呢,他还做了一些事情,就是对这个config做一些合并处理啊,做一些其他一些操作,咱们这人不需要合并了,就直接。把整个的核心线,咱把它做出来。好,然后写一个let promise就应该等于。啊,这个点。Config。大家可以想象一下啊,这个东西它一定是什么,一定是一个成功的promise。
03:03
我们可以来看一看。把上边引入文件先注掉。好,打开浏览器。刷新,点开CTRL。看这。那么下边这个报错,先不要管它因为什么,因为咱们X这个request函数的返回结果还是一个unDeFined,所以下边你调Z方法,它一定会报错。这块报错先不要管,咱们先看这个结果,看这他状态是一个成功的promise。没有问题。好了,那么既然是promise的话呢,下边。我们就接着向前去推进,下一步做什么事情呢?声明一个数组。That train。等于一个数组。数组里面包含两个参数,第一个参数就是这个dispatch request,而第二个呢,是一个unfi。同学可能会想说,哎,这不是闲得慌吗?往这放一个unDeFined,其实还真不是闲的,目前来看你可能感觉它没有什么意义,但是后边咱们在讲到圆形链的时候,你就能够感受它的一个意义了,他在这儿就是为了做一个什么呀,站位。
04:10
啊的作用就是在这儿做一个站位。如果没有这个值。啊,那么在运行练车的时候就会出问题。好,那么有了数组之后,下边的话,我们开始遍历这个数组。应该说是循环吧,一样的。其实。呃,说循环也不太,其实是循环处理。啊,循环处理这样来做while。啊,我们其实可以在这先不用加while是吧,我就为了方便一些啊,咱们不跟他写的一模一样的啊呃,后边再讲到原形链那块,咱们再去跟他写一样的,现在就简先简单一些。那就是去调用Z方法。指定回调。大家看一下啊,Promise。点Z方法啊,然后呢,第一个参数是谁,第一个参数就是chances下标零。
05:07
相信这个代码大家应该还是能看懂的。然后第二个参数是chain。然后呢,下标一。看这啊,Promise,这是一个成功的promise对象。然后点Z方法啊,然后呢,指定成功和失败的回调,因为这就是成功的了,所以说他一定会执行第一个回调。然后它会有一个返回结果,Let result。它的返回结果是什么呀?咱们知道Z方法的返回结果也是一个promise对象。好,然后接下来咱们再return一下result就完成了。返回。这个promise的一个结果。好了,那么到这儿的话呢,Request函数的功能咱们就已经写完了。下边的核心点落在谁身上啊?落在了这个dispatch request身上。
06:04
落在这,咱们可以呢,先来看一下can log。啊,打印一下啊,这是第四。啊,PU request这个函数。保存,点开浏览器刷新页面,看这。看到没有,这块执行了啊30为什么下边会输出一个on DeFine呢?因为这个函数啊,它的没有,它没有写return。啊,没有写return,你想象一下啊,如果他没有写return。你把它放这儿。等等等等等等啊,有点有点乱了啊,别别急,刚才刚才那个划了一下屏,我把这个看着啊。拿过来放这它是等效的啊,注意CHANGE0和dispatch request是等效的,你想象一下,如果说我把它放这儿。这个回调里边没有写return。它值成功结果,呃,这个它没有写return的话,默认值就是unde unde find的话不是promise对象,所以说Z方法的返回结果就是一个成功的promise对象,且成功结果为unde。
07:10
所以说在这块啊,大家要想去探究Excel源码promise,一定要搞懂它的运行规,它一个返回结果的一个规则。好,这是当前对这儿做一个解释,然后在这儿。又要做什么事情呢?在这儿就是要调用。啊,这个适配器。发送请求。啊,调用适配器去发送请求,他怎么做呢?他这样做的啊,Return一下X HR adapter。括弧,然后config点。然后呢,Response。然后还有个E。首先大家先来分析一下。就是dispatch request这个函数,它的返回结果是一个什么类型的值?注意这里有个Z方法,Z方法一调的话,它的返回结果一定是一个promise对象,所以说在这儿dispatch返回结果,它也一定是一个promise对象。
08:12
好,然后的话,在这我们可以先来输出一下结果log,打印一下response。在这的话呢,这个log打印下error。大家想象一下啊,当代码运行到这块以后。他要去干嘛,执行这个适配器的函数。可以看一下啊,Dis request它的写法跟咱们是一样的啊,只是他前面还做了一些数据的相关处理,最终落脚点还是落在了这个适配器函数的执行啊,以及任方法调用这块。在我们这儿也是一样子的啊,Dispatch运行的时候呢,其实内部运行的是谁啊,是这个适配器的函数。啊,H10勺到哪儿啊,到这儿了。
09:00
哎,到这儿了啊,到这之后咱们先来运行一下这个,先来输出个内容啊,这个内容是这个X HR adapt的一个执行。函数执行,我们先来看看它到底运行还是不运行。点开浏览器刷新页面,你看这儿它运行了,为什么下边又报了一个错误呢?别着急,你想一想啊,人家在这块运行完毕之后,后边调了个Z方法,是不是得以这个XR adapt得返回一个promise对象。你这给人返回个onDeFi,那人家能掉帧吗?掉不了,所以说在这我们要去return一个new的promise。那么在这个函数当中要做什么事情呢?其实做的事情就是发送啊价格请求,所以真正发送啊价格请求的位置在哪?在这个函数当中。啊,也就是在这个文件当中。啊,里边的步骤的话,我们就快速实现一下啊,Let,呃,Let X HR等于一个new的xmlhttp request,然后open,第一个是请求类型conig.method,第二个请求的URL config.URL。
10:15
然后XHR.send的,我们这里不考虑啊pose请求了啊,这里就先考虑这个啊不,我们这里不考虑请求体的发送啊,只考虑这个URL和请求类型。好,这是。做一个初始化,下边做一个发送。然后发送完毕之后呢,再来去绑定事件。X h unre state change function。然后这里边呢,要判断成功的一个条件啊,如果XHR点要是大于等于个200,并且X。等会咱忘了判断一个东西啊,就是阶段XRHR.ready state得等于一个四才能进到里边做相关处理,如果不等于四的话,没有必要判断。
11:05
啊,判断也没有意义啊。除非你做一些这个阶段性的一些提示和记录,你还才会那样做啊。如果只是单纯对结果做处理的话,前面几步对于我们来说都是没有用的。好,然后呢,下边XHR点四要小于等于300,这个时候呢,表示是成功的一个状态。然后呢,其他情况都是一个失败的状态。那么成功状态应该怎么办?哎,成功状态就要做成功的一个事情,就是调resolve函数,因为一定要resolve函数。你想一想,这个返回的promise可就成功了,这一成功这就成功,这一成功这就会执行。啊是这样一个规则,所以说呢,我们这儿就让它变成功,成功里边写什么。我们可以先看一看,之前咱做那个。
12:03
就是发送请求那块啊,它的返回结果是什么样子的啊呃,找一下。我们再点开之前的一个。不急啊,点开这个使用。然后基本使用这一块。然后打开这个浏览器。然后点击看结果,它包括几个方面啊,一个是conig,一个是data head request status和status text,它可以这样去写,我们可不可以啊,当然可以,完全没有问题。来看好了啊呃,看看我们自个儿的这块,它有什么来着,Config是吧,好,Config。这是一个。还有呢,德塔。还有呢,Headers request,好,Headers。然后还有呢,Request。再有就是status和status test status test OK,然后再来status text。
13:00
来吧,一个一个去写,首先con是谁?Con就是那个配置对象。配置对象啊,里边写conig,这个肯定没毛病啊,因为这是传递过来,那个值下边的data是什么?Data是应体。想应题,详应题怎么写?详应题的话就是啊XHR.response。然后呢,Headers呢是什么样响应响应头。哎,在这啊,响应头,而且XHR.get all response。注意啊,咱们这跟他的还不太一样啊,人家那个是格式化之后的,它就是它它对这个结果做了格式化,咱们但但是咱们这儿没有这个内容,它是一个字符串的。啊,那Excel内部的对齐做了格式化,做了解析,变成了一个对象。啊,就是那个pass header,不知道大家记不记得pass。对头信息做了一个这样一个解析。好,然后呢,Request是什么?Request就是XHR的请求对象。
14:03
也就是XHR。好,然后至于后边这个就是响应的状态码。代码XHR.status status下边这个呢是响应状态字符串,响应状态字符串。这都是协议当中内容啊,XHRT搞定。完成,至于失败的话呢,啊,咱就写一个reject reject。然后里边它其实有自个儿取消那样一个那样一个错误啊,咱们这就来一个error得了。这是请求失败。失败的状态码为。XR.status搞定。OK。那么此时。这个适配器的核心代码咱们就已经完成了,完成之后它呢就会。
15:01
到这儿。啊,它的执行的返回结果就会到这儿,然后呢,由Z方法去指去去去去指定它成功和失败的回调。好,我们先看这它能不能这样去执行。点开浏览器,刷新页面。看这。看着32行输出的啊,32行输出的没有问题。啊,没有问题,那好,这没有问题,这儿做什么事情呢。对响应的结果进行这个。转换。处理。也就是说,如果你想对这个结果再去做处理,你可以在这去做,你可以看看dispatch request,它是不是这么干的啊,点开。好,Adapter。好放大一些看一下,就是咱们这样看看看的清楚一些啊dispatch request点开它。然后呢,Dispatch request是它啊,你看它在运行完毕之后,这个方法回到里边做什么事情。
16:00
对响应的结果做了一个处理。啊,对这个结果做了一些相关处理,处理完之后又return,咱们这就不处理啊,直接return啊return一下谁啊这个response完成。至于失败的话呢,诶。那就也就不用再去做单独的处理了,直接throw一个error就可以了。啊,直接入一个error就可以了啊,那么这样一来的话呢,如果这成功。啊,如果你。RX发送请发送这个请求是成功的,那么这个Z方法里边就直接啊去指定去执行第一个回调,然后返回结果。啊,中间这块可以对数据做一些处理。啊做一些处理好,如果失败的话,走这个,并且把失败结果做一个through的话,咱们都知道。它呢就是抛出错误,抛出错误之后呢,Z方法的返回结果就是一个失败的promise对象。啊,所以说在这的话呢,我们可以呢,根据它去改变整个的返回结果,好这儿的返回结果。
17:03
E有了,你看这儿。Result,结果就来了。看着啊,可能有点迷路了,咱们再重新说一下这个这个整个流程啊Z方法一执行。他呢会去执行。这个数组第一个。元素对应的函数,而这个元素就是这样,就是它。而它的返回结果,你看then是一个promise对象。啊,是一个promise对象啊,而Z的返回结果是由这个函数它的执行返回结果决定的,你这块如果说是一个成功的promise,那好结果也就是一个成功的promise。那如果说你失败了,你失败的话,哎,我造也是失败的。并且在这种情况下,你不是成功了吗?你成功的结果就是我Z方法返回promise对象成功的结果值,所以这里response就等于谁啊?
18:03
等会儿是result成功的结果值。啊,Result这个promise对象成功的结果值,然后最后呢,我们在return一下result return result返给谁呢?反给的是Excel这个函数的执行。结果。啊,这个result啊,就是Excel的执行结果,因为你看这个它其实是request的函数执行结果,而request函数跟Excel这个这个函数。他俩是等效的。啊,它俩是等效的,所以说就反反给他反反到这儿了啊,他俩绝对性方法执行,咱们就可以把结果拿到。好,一起来看看效果怎么样,刷新一面,然后点开,你看有config data head request,巴拉巴拉一大堆全来了。好了,到这儿的话,关于。整个Excel它发送请求的过程的模拟实现,我们就已经介绍完了。
19:04
虽然说跟圆码呢,它的实现啊,其实稍微有一些。简略,但是核心结构一点都没有少。一点都没有少,甚至说连这块多余的东西,我都是把它又加上了,其实这个你说有没有必要写呢?完全没有必要写,但是也是为了贴合谁啊,贴合这个dispa request结构,才加了这样一个,加了这样一段一段代码。啊,其实以我们目前这个代码来看的话,加他没有用。啊,直接这样子就可以,你看结果是一样的。结果是一样的。好了,这个小节的话,我们就先到这儿。
我来说两句