16-模拟实现axios发送请求

哈喽，大家好。这个这个小金呢。我们来模拟实现一下Excel发送请求的一个过程。啊，如果光去这样的解读，光去看的话，你很难掌握住它整个的过程。所以说啊。还是得亲自去写一下。首先，咱们先来声明一个构造函数。Function Excel。这里呢，接收一个配置对象，然后在里边的话，我们就简单写一下啊，Config等于一个config，就不再去详细详细写它的创作过程啊，那个构建过程了。然后把结构打起来，excel.pro.request等于一个function。然后在这儿的话，开始就是发送请求的。相关动作。这是。关于Excel结构的一个搭建。下边第二步呢是dispatch。

Request函数。然后dispatch。Request。好，然后呢，完了之后这块也是一样，接受一个参数config。这是第二个，然后下边第三个。就是adapter适配器啊。Adapter。适配器。适配器。然后咱们这块用的是XHR，然后adapter。OK，完成。下边呢有request起头啊，因为因为我们Excel的话就是从这个位置开始的啊。呃，当然access这块咱们还没有去做一个创建，所以这这块第四步我来创建一下它。创建Excel这个函数。

然后let Excel就应该等于。Excel点点pro。然后request。然后。咱们这为了方便啊，就直接来一个那啊。不再去指向其他的一些实例对象了。这也是为了方便。好，那么此时Excel就与request功能是一模一样了。发送请求的过程是怎么一回事呢？首先。他先去创建了一个promise对象。那么其实在之前呢，他还做了一些事情，就是对这个config做一些合并处理啊，做一些其他一些操作，咱们这人不需要合并了，就直接。把整个的核心线，咱把它做出来。好，然后写一个let promise就应该等于。啊，这个点。Config。大家可以想象一下啊，这个东西它一定是什么，一定是一个成功的promise。

我们可以来看一看。把上边引入文件先注掉。好，打开浏览器。刷新，点开CTRL。看这。那么下边这个报错，先不要管它因为什么，因为咱们X这个request函数的返回结果还是一个unDeFined，所以下边你调Z方法，它一定会报错。这块报错先不要管，咱们先看这个结果，看这他状态是一个成功的promise。没有问题。好了，那么既然是promise的话呢，下边。我们就接着向前去推进，下一步做什么事情呢？声明一个数组。That train。等于一个数组。数组里面包含两个参数，第一个参数就是这个dispatch request，而第二个呢，是一个unfi。同学可能会想说，哎，这不是闲得慌吗？往这放一个unDeFined，其实还真不是闲的，目前来看你可能感觉它没有什么意义，但是后边咱们在讲到圆形链的时候，你就能够感受它的一个意义了，他在这儿就是为了做一个什么呀，站位。

啊的作用就是在这儿做一个站位。如果没有这个值。啊，那么在运行练车的时候就会出问题。好，那么有了数组之后，下边的话，我们开始遍历这个数组。应该说是循环吧，一样的。其实。呃，说循环也不太，其实是循环处理。啊，循环处理这样来做while。啊，我们其实可以在这先不用加while是吧，我就为了方便一些啊，咱们不跟他写的一模一样的啊呃，后边再讲到原形链那块，咱们再去跟他写一样的，现在就简先简单一些。那就是去调用Z方法。指定回调。大家看一下啊，Promise。点Z方法啊，然后呢，第一个参数是谁，第一个参数就是chances下标零。

相信这个代码大家应该还是能看懂的。然后第二个参数是chain。然后呢，下标一。看这啊，Promise，这是一个成功的promise对象。然后点Z方法啊，然后呢，指定成功和失败的回调，因为这就是成功的了，所以说他一定会执行第一个回调。然后它会有一个返回结果，Let result。它的返回结果是什么呀？咱们知道Z方法的返回结果也是一个promise对象。好，然后接下来咱们再return一下result就完成了。返回。这个promise的一个结果。好了，那么到这儿的话呢，Request函数的功能咱们就已经写完了。下边的核心点落在谁身上啊？落在了这个dispatch request身上。

落在这，咱们可以呢，先来看一下can log。啊，打印一下啊，这是第四。啊，PU request这个函数。保存，点开浏览器刷新页面，看这。看到没有，这块执行了啊30为什么下边会输出一个on DeFine呢？因为这个函数啊，它的没有，它没有写return。啊，没有写return，你想象一下啊，如果他没有写return。你把它放这儿。等等等等等等啊，有点有点乱了啊，别别急，刚才刚才那个划了一下屏，我把这个看着啊。拿过来放这它是等效的啊，注意CHANGE0和dispatch request是等效的，你想象一下，如果说我把它放这儿。这个回调里边没有写return。它值成功结果，呃，这个它没有写return的话，默认值就是unde unde find的话不是promise对象，所以说Z方法的返回结果就是一个成功的promise对象，且成功结果为unde。

所以说在这块啊，大家要想去探究Excel源码promise，一定要搞懂它的运行规，它一个返回结果的一个规则。好，这是当前对这儿做一个解释，然后在这儿。又要做什么事情呢？在这儿就是要调用。啊，这个适配器。发送请求。啊，调用适配器去发送请求，他怎么做呢？他这样做的啊，Return一下X HR adapter。括弧，然后config点。然后呢，Response。然后还有个E。首先大家先来分析一下。就是dispatch request这个函数，它的返回结果是一个什么类型的值？注意这里有个Z方法，Z方法一调的话，它的返回结果一定是一个promise对象，所以说在这儿dispatch返回结果，它也一定是一个promise对象。

好，然后的话，在这我们可以先来输出一下结果log，打印一下response。在这的话呢，这个log打印下error。大家想象一下啊，当代码运行到这块以后。他要去干嘛，执行这个适配器的函数。可以看一下啊，Dis request它的写法跟咱们是一样的啊，只是他前面还做了一些数据的相关处理，最终落脚点还是落在了这个适配器函数的执行啊，以及任方法调用这块。在我们这儿也是一样子的啊，Dispatch运行的时候呢，其实内部运行的是谁啊，是这个适配器的函数。啊，H10勺到哪儿啊，到这儿了。

哎，到这儿了啊，到这之后咱们先来运行一下这个，先来输出个内容啊，这个内容是这个X HR adapt的一个执行。函数执行，我们先来看看它到底运行还是不运行。点开浏览器刷新页面，你看这儿它运行了，为什么下边又报了一个错误呢？别着急，你想一想啊，人家在这块运行完毕之后，后边调了个Z方法，是不是得以这个XR adapt得返回一个promise对象。你这给人返回个onDeFi，那人家能掉帧吗？掉不了，所以说在这我们要去return一个new的promise。那么在这个函数当中要做什么事情呢？其实做的事情就是发送啊价格请求，所以真正发送啊价格请求的位置在哪？在这个函数当中。啊，也就是在这个文件当中。啊，里边的步骤的话，我们就快速实现一下啊，Let，呃，Let X HR等于一个new的xmlhttp request，然后open，第一个是请求类型conig.method，第二个请求的URL config.URL。

然后XHR.send的，我们这里不考虑啊pose请求了啊，这里就先考虑这个啊不，我们这里不考虑请求体的发送啊，只考虑这个URL和请求类型。好，这是。做一个初始化，下边做一个发送。然后发送完毕之后呢，再来去绑定事件。X h unre state change function。然后这里边呢，要判断成功的一个条件啊，如果XHR点要是大于等于个200，并且X。等会咱忘了判断一个东西啊，就是阶段XRHR.ready state得等于一个四才能进到里边做相关处理，如果不等于四的话，没有必要判断。

啊，判断也没有意义啊。除非你做一些这个阶段性的一些提示和记录，你还才会那样做啊。如果只是单纯对结果做处理的话，前面几步对于我们来说都是没有用的。好，然后呢，下边XHR点四要小于等于300，这个时候呢，表示是成功的一个状态。然后呢，其他情况都是一个失败的状态。那么成功状态应该怎么办？哎，成功状态就要做成功的一个事情，就是调resolve函数，因为一定要resolve函数。你想一想，这个返回的promise可就成功了，这一成功这就成功，这一成功这就会执行。啊是这样一个规则，所以说呢，我们这儿就让它变成功，成功里边写什么。我们可以先看一看，之前咱做那个。

就是发送请求那块啊，它的返回结果是什么样子的啊呃，找一下。我们再点开之前的一个。不急啊，点开这个使用。然后基本使用这一块。然后打开这个浏览器。然后点击看结果，它包括几个方面啊，一个是conig，一个是data head request status和status text，它可以这样去写，我们可不可以啊，当然可以，完全没有问题。来看好了啊呃，看看我们自个儿的这块，它有什么来着，Config是吧，好，Config。这是一个。还有呢，德塔。还有呢，Headers request，好，Headers。然后还有呢，Request。再有就是status和status test status test OK，然后再来status text。

来吧，一个一个去写，首先con是谁？Con就是那个配置对象。配置对象啊，里边写conig，这个肯定没毛病啊，因为这是传递过来，那个值下边的data是什么？Data是应体。想应题，详应题怎么写？详应题的话就是啊XHR.response。然后呢，Headers呢是什么样响应响应头。哎，在这啊，响应头，而且XHR.get all response。注意啊，咱们这跟他的还不太一样啊，人家那个是格式化之后的，它就是它它对这个结果做了格式化，咱们但但是咱们这儿没有这个内容，它是一个字符串的。啊，那Excel内部的对齐做了格式化，做了解析，变成了一个对象。啊，就是那个pass header，不知道大家记不记得pass。对头信息做了一个这样一个解析。好，然后呢，Request是什么？Request就是XHR的请求对象。

也就是XHR。好，然后至于后边这个就是响应的状态码。代码XHR.status status下边这个呢是响应状态字符串，响应状态字符串。这都是协议当中内容啊，XHRT搞定。完成，至于失败的话呢，啊，咱就写一个reject reject。然后里边它其实有自个儿取消那样一个那样一个错误啊，咱们这就来一个error得了。这是请求失败。失败的状态码为。XR.status搞定。OK。那么此时。这个适配器的核心代码咱们就已经完成了，完成之后它呢就会。

到这儿。啊，它的执行的返回结果就会到这儿，然后呢，由Z方法去指去去去去指定它成功和失败的回调。好，我们先看这它能不能这样去执行。点开浏览器，刷新页面。看这。看着32行输出的啊，32行输出的没有问题。啊，没有问题，那好，这没有问题，这儿做什么事情呢。对响应的结果进行这个。转换。处理。也就是说，如果你想对这个结果再去做处理，你可以在这去做，你可以看看dispatch request，它是不是这么干的啊，点开。好，Adapter。好放大一些看一下，就是咱们这样看看看的清楚一些啊dispatch request点开它。然后呢，Dispatch request是它啊，你看它在运行完毕之后，这个方法回到里边做什么事情。

对响应的结果做了一个处理。啊，对这个结果做了一些相关处理，处理完之后又return，咱们这就不处理啊，直接return啊return一下谁啊这个response完成。至于失败的话呢，诶。那就也就不用再去做单独的处理了，直接throw一个error就可以了。啊，直接入一个error就可以了啊，那么这样一来的话呢，如果这成功。啊，如果你。RX发送请发送这个请求是成功的，那么这个Z方法里边就直接啊去指定去执行第一个回调，然后返回结果。啊，中间这块可以对数据做一些处理。啊做一些处理好，如果失败的话，走这个，并且把失败结果做一个through的话，咱们都知道。它呢就是抛出错误，抛出错误之后呢，Z方法的返回结果就是一个失败的promise对象。啊，所以说在这的话呢，我们可以呢，根据它去改变整个的返回结果，好这儿的返回结果。

E有了，你看这儿。Result，结果就来了。看着啊，可能有点迷路了，咱们再重新说一下这个这个整个流程啊Z方法一执行。他呢会去执行。这个数组第一个。元素对应的函数，而这个元素就是这样，就是它。而它的返回结果，你看then是一个promise对象。啊，是一个promise对象啊，而Z的返回结果是由这个函数它的执行返回结果决定的，你这块如果说是一个成功的promise，那好结果也就是一个成功的promise。那如果说你失败了，你失败的话，哎，我造也是失败的。并且在这种情况下，你不是成功了吗？你成功的结果就是我Z方法返回promise对象成功的结果值，所以这里response就等于谁啊？

等会儿是result成功的结果值。啊，Result这个promise对象成功的结果值，然后最后呢，我们在return一下result return result返给谁呢？反给的是Excel这个函数的执行。结果。啊，这个result啊，就是Excel的执行结果，因为你看这个它其实是request的函数执行结果，而request函数跟Excel这个这个函数。他俩是等效的。啊，它俩是等效的，所以说就反反给他反反到这儿了啊，他俩绝对性方法执行，咱们就可以把结果拿到。好，一起来看看效果怎么样，刷新一面，然后点开，你看有config data head request，巴拉巴拉一大堆全来了。好了，到这儿的话，关于。整个Excel它发送请求的过程的模拟实现，我们就已经介绍完了。

虽然说跟圆码呢，它的实现啊，其实稍微有一些。简略，但是核心结构一点都没有少。一点都没有少，甚至说连这块多余的东西，我都是把它又加上了，其实这个你说有没有必要写呢？完全没有必要写，但是也是为了贴合谁啊，贴合这个dispa request结构，才加了这样一个，加了这样一段一段代码。啊，其实以我们目前这个代码来看的话，加他没有用。啊，直接这样子就可以，你看结果是一样的。结果是一样的。好了，这个小节的话，我们就先到这儿。