00:00
哈喽,大家好。这个小节,我们来探究一下Excel发送请求的过程。这里我首先已经写好了一个DEMO的事例。代码之前我们都已经敲过了啊,这是Excel的一个基本使用,传了一个对象。然后对结果做处理。那么在这呢,我们要先说一下这个请求到底是从哪开始的。这里要不得不提一下Excel的一个创建过程。它呢是由excel.pro。点request。这个函数通过B创建而来的。所以说Excel呢,与request功能是一模一样的。它们两个都是函数。所以Excel是调,其实就是request函数在调。这个请求的源头也就在request函数这里。当然不光是这种发送,发送方式。
01:02
还有点点post,那些方式都是由request啊来开始的。所以说我们打开浏览器。啊,稍等啊,我们换一种方式打开。然后打开之后。到Excel到到request函数位置,我们去打一个断点,然后开始整个的过程。那在这的话怎么去打开那个request那个函数呢?这里我们用一下CTRL加P。找那个文件。哪个文件呢,就是这个文件。因为request函数是在Excel。啊,它的圆形上边的。好,大家可以看一下在这儿。然后我在这儿呢,打一个断断点,然后开始刷新。OK,已经进来了。可以先看一看参数。Config的值。然后呢,在这。Con呢,就是个对象,这个对象哪来的?这个对象是我们传递过来的。
02:01
就是这个对象。把它传递给了request。然后request接收开始往下进行。首先第一步呢,是先判断了一下config这个参数。你是不是没有船?你看类型是不是一个字符串啊,当然率先检测是判断它是不是字符串。啊,如果是字符串一种处理方式。啊,如果说不是字符串是一种处理方式。这里如果你没有传,它会给一个默认值空对象。上边这块简单提一下,就是如果说你传的是一个字符串。他就把这个值作为URL去处理。第二个参数作为对象。这样做主要是为了实现某一种使用方式。就是这种,大家可以看一下。Excel允许我们使用啊,这种使用方式啊,第一个是参数,第二个呢是配置对象,所以如果说你第一个参数是字符串的话,它就把第二个参数作为config。
03:02
啊,第一个参数作为ul。好,这是当前呢,对这块做一个说明,接着往下继续。目前咱们是对象啊,所以说的话呢,就直接con就是对象了。然后下边你再看这。啊,Merge config this defaults,还有呢,Con configig,咱们传起来有对象。This default。可以先想一下他是谁。它其实就是Excel默认的配置对象。而me config是做对象的合并。将默认配置对象与传入的配置对象做一个合并。但如果说我们的内容。就是如果存在了,在默认对象里边存在了,那么这个时候是会覆盖的。以体现出来我们配置这个级别的优先级是更高的。好,运行一下。这个时候你再看看config。他可就不再像原来那样子了。
04:02
里边包含了更多内容。例如头信息呀,方法呀,超时时间呀,URL啊等等等等,属性就都来了。好,我们接着继续。下边这块是对请求方法做一个判断。你有没有船?啊,再看看默认对象里边有没有。啊,如果说都没有的话,好就使用confe,就使用get。所以在使用Excel的时候,即便我们没有去设置method的属性。最后它的值就是一个get。啊,会给我们来一个默认值。当然了,上边这块呢,还会,如果你传了method,还会对method进行一个小写设置。啊,进行小写测试。好,完成,晚上继续。因为呢,我们这儿是加了啊,所以说这个conig message就是一个小写get。啊,没有问题。下边的话呢,来到了一个地方。
05:00
声明了一个数组,数组里边第一个元素是dispatch request。我们说过dispatch request这个函数是用来发送请求的,是一个小老板。由他。等一下,哎,由他去调谁呀?去调HTTP和XHR这两个适配器。啊,两个打工仔。好,你记住,它是用来发送请求的一个函数。接下来的话呢,用这个promise创建了一个promise对象。然后把config传进来,Config就是那个配置对象。然后呢,返回一个结果,我们都知道啊,这个config一定是一个普通对象,它不是一个promise对象。所以说这个返回结果就这个变量。啊,他一定是一个成功的promise。来,我们往下运行看一看。走,来看这个promise。看他的状态是一个成功的,没有问题。
06:01
那下边的话这些东西。都是什么呀,都是拦截器,这个是请求拦截器。下边这个呢,是响应拦截器,因为呢咱们这块没有用到拦截器,所以这些代码都是不会执行的,我们也先不要关注它,往下接着继续。接下来的话呢,到了一个循环当中,Changes。目前呢,Chin呢有两个元素,所以说它的length值为二。然后接下来咱们进到循环里边,循环里边做了这么一个事情。点Z。注意,此时promise,它的值是一个成功的promise。然后呢,点Z,它是会执行chin。啊,就是执行Z里边第一个回调函数的,而不会去执行第二个。那么shift得到是哪个函数呢?Change shift得到的就是它第一个就是change这个数组的第一个元素,也就是dispatch request这个函数。
07:04
所以说dispatch request这个函数是一定会执行的。并且这个函数它的返回结果。啊,将决定Z方法的返回结果,也就是决定下一次promise这个变量它的值。这一块稍显有点绕,我们再来说一遍。首先你明确一点。在这个时候是一个成功的promise对象,我们可以再来看一眼。看这。他状态是一个成功的。然后呢,点Z方法。指定他成功和失败的回调,因为它是成功的状态,所以说这一个。函数,它是一定会执行的。而这个函数又是谁?这个函数就是chin数组当中的第一个元素,因为shift是弹出数组的第一个元素。所以说的话,他一定会执行谁呀,执行dispatch request。
08:02
所以dispa request执行的返回结果将决定另方法的返回值。也将决定下一次promise,它的值是多少。所以说现在的话,他决定了他。那好,下边我们就开始进入到这个回调当中,也就是dispatch request里边,咱们来看看里边都做了什么事。好,点击走。你看到看这啊,我们已经进到了dispatch当中来。肯菲格是谁呢?配置对象。然后呢,紧接着第一步,他先去做了一个啊这样的操作。就是看看呢,这个请求是不是被取消发送去啊,发送出去的,然后抛出错误,咱们这里没有涉及任何的错误,呃,任何的取消操作,所以说跟他没有关系,直接往后走。在这儿是对头信息做一个初始化。看看你这块有没有设置header信息。
09:02
如果有那就用用你的,如果没有就设设置一个空对象。好,接着继续。下边这块呢,是对请求体内容和请求头内容做一个呃,这样的一个转换。啊,做一个转换啊,这样一个动作好了,这里呢,我们并没有请求体相关内容,所以说咱们也是一样,紧接着往后继续。下边这块呢,是对请求头信息做一个整合。这里的使用方式有好几种,你看,它允许我们使用config.head.common去做一些通用的头信息设置。还可以呢,去对头信息当中head加一个方法。比如说get,比如说post,单独对请求的类型进行头信息设置。也就是说你这个头啊啊,可能是说单独针对于某一个类型请求的时候才会添加,比如说forget我不加头。发post请求,我就加上这个头信息,那你就可以通过这种方式去做一个设置。
10:05
它是这么一个技巧。还有一个呢,使用方式就是直接conig heads啊,直接去设置这个对象值就可以了。好,这是关于头信息它的一个整合,下边再继续。这个操作是对头信息上边关于方法的配置做一个移除,因为已经整合完毕了,所以说这块就没有什么额外的一些作用了,所以说把那个method对应的配置就全部移除。好,接着继续。接下来的话呢,进入一个比较重要的点,Adapter,要获取适配期对象。获取适配器对象,它呢会到con.adapt当中去获取适配器这个值,这个适配器其实就是一个函数。啊,就是那个函数啊,要么是HTTP的,要么是XR的,好,咱们接着继续看这的值。大家注意观察。
11:01
Adapt值就是XHR.h X HR adapter这个函数。好了,那么下边的话,你再看这return adapt。然后调用点Z。我们都知道啊,这个XR adapt是谁?点开。找到adapter。就是这个函数。注意啊,注意adapter括弧,它在调的时候,其实调的是谁呀?调的是这个函数。那么这个函数它能做什么事情?你可以看里边代码。New xmlhttp request。下边open。On ready state change,所以在这儿它是可以发发送S请求的。OK,大家看这啊,它一掉就会发送阿贾克斯请求,那为什么后边可以点Z呢?因为你看这儿。在这个函数内部,它返回的结果是一个promise对象。
12:02
所以说呢,他在后边可以用Z方法来去指定成功和失败的回调。这里我们先不探究这个文件内这个内部代码,因为这这里边儿其实就是阿贾克斯的相关操作。啊,创建对象初始化发送处理结果这样一些步骤,在之前我们已经介绍介绍过了,所以说这里咱们不重点来探究它。那么这个时候咱们来返回结果到哪到Z方法里边。因为他是一个。呃,这里咱们因为是成功的啊,因为没有去往失败的那个对象里边去请求,所以他这块状态应该是肯定是一个成功的。那既然是成功的话,他就一定会执行这个回调。啊,一定会执行这个回调来,我们往前推一截啊走。坏事儿了。为什么坏事儿呢,咱们直接一步进大了啊,所以咱们这儿重新来过一下啊,然后。到这儿我再打一个断点,然后刷新一遍。然后呢,跳下一个断点。
13:03
跳下一个断点。好到这儿来。到这来之后,咱们咱们稍微进一下走进去。哦,进完之后咱们再往前推一步走。好,然后再往下走。大家看这接下来我们开始进到哪,进到这个这个里边来。这个时候,Adapt就已经执行完毕了。进到then的第一个回调当中来。那这个时候呢,你可以其实可以证明一点。就是adapt这个函数,它的内部执行已经是成功了,否则它不会进到这个函数里边来。因为Z方法执行的第一个参数是它的成功回调。好,然后呢,他在发送成功之后。我们在这儿做什么事情呢?我们在做的事情就是,哎,对这个响应的结果再去做一些处理。你看啊,Transform response,对应结果做一个处理,做一个格式化,然后再去return一下response。
14:00
那么这个response它是个什么东西,哎,往下推进一下走。走,这是个对象是吧,可以看一下response的值。在这儿。Con data head request,巴拉巴拉一大堆啊,这个结果就已经构建完成了。因为这个返回结果是一个普通的promise对象啊,普通的这个对象。所以说它呢,这个Z方法的返回结果就直接是一个成功的promise。好,我们再说一遍啊,Z方法的返回结果是由它所指定的回调函数的返回值来决定的。这块因为返回的结果是一个普通值,不是一个promise典型对象,所以说定法的返回结果是一个成功的promise。好,到这儿,第4PACH的返回结果就已经完成了。完成了之后。Dpach运行完。来,咱们接着继续往下推进,往下推进看这。
15:00
到哪儿了?到咱们这儿了,为什么到这儿呢?因为Excel的执行结果已经完,Excel的执行已经完成了。我们点开它看这。我们说了Excel就是谁啊,就是这个request函数,看这。啊,他在这儿做了一个return。Return谁啊?Return这个promise,这个Z方法的返回结果,我们说了是dispatch,就是这个。他的返回结果。因为他的返回结果是一个什么呀,是一个成功的。啊,这样的一个对象,所以说Z方法这块结果就是一个成功的promise。然后呢,把它把它return。他这一。你看request函数就执行完毕了,Request函数执行完毕就意味着Excel已经执行完毕了。那么执行完毕之后,因为返回结果是一个成功的,所以说我们就可以通过方法来对其结果做一个处理。这就是Excel函数,它发送请求时的一个过程。
16:00
它调的是谁呀?调的是request这个函数。然后在request内部呢,他又去调谁啊,Dispatch request调他。调他以后呢,由他再去调adapter。XHR,由他去发送请求,发送请求之后呢,然后返回结果,返回的结果又决定了这块的一个结果。啊,也就是由他决定了谁啊adapt,呃,它决定这个这个这个dispat request结果,而dispatch request结果又决定了整个request结果。所以他们的关系是这样子的。这块咱们写一下,画画一下。啊,然后request。由他去调dispatch。啊,然后呢,由他呢,再去调这个XHR。然后再结果,一点一点的往回返。啊,最终返回给谁啊,咱们调用者就是就是这块。
17:02
啊,接下来的话,咱们就可以通过自个儿的回调来对结果做一个成功和失败的处理了。好,那关于Excel它的请求发送过程的一个啊,这样的描述啊,这样一个讲解,我们就先到这儿。
我来说两句