00:00
好的,那接下来的话呢,我们开始实现一下Excel这个函数。首先先把结构答一下function Excel。它呢,接受一个参数是一个对象。这呢,我们用一下解构赋值的方式。对其参数的一个接收。有method。UL。和data。这样一来,我们就在可以在函数当中直接使用变量。来使用对象当中的属性了。一个小技巧。然后呢,下边第一步呢,我们先来确定一下返回值。它的返回值呢,是一个promise对象啊,所以我们可以直接这样子return一个new的promise。然后在里边进行。阿贾克斯的四步走。第一个步骤呢,是创建对象。
01:00
啊,创建。有创。见对象。然后呢?XHR等于六的xmlhttp request,这是第一步。下边第二步呢,是做一个初始化XHR.open。第一个呢是请求类型,Get post put delete。啊,不过在这呢,咱们不能使用固定的啊,应该写成变量来一个method。第二个呢是URL。Ul这块咱们不能直接放ul,为什么呢?因为paras里边它要放参数。啊,URL参数要追到后边。所以说。在这呢,我们要处理一下。这个S。这个对象要把它转化为字符串。类似于这种形式。缀到URL后边才能去发送请求。那咱们怎么办呢?啊,我们可以这样来做,就是便利一下。
02:00
然后let k,然后in。S。好,然后呢,我们就开始一点一点去拼接啊,其实K的话就是这个A,第二次的话就是B,我们想办法把它变成A等于100AND b等于200。所以在这我们可以先声明一个变量ST2。然后开SD加等于。把A等于100放进来。啊,这样一来的话呢,就可以不断的累加出来,但是呢,A等于100不能写死啊。这个A呢,就是这个键名K。然后这个100呢,就是键值下标K。搞定。然后咱们可以先验证一下,看看好使不好使啊,打印一下str。我们点开浏览器测一下。刷新页面。把这些我们先关一下。在这的话,它结果已经出来了啊,下边这个报错咱们不用管它,因为呢,方法还没有加,他报错很正常。
03:01
啊,在这的话,我们为了不受它,不受到它的一个影响,咱们把这注掉。好出来了,出来之后呢,咱们这样子呢,多了一个东西啊,大家注意观察,多了一个什么呀,多了个暗符。其实影响倒不大,就看起来有点别扭,咱们还是移除一下str等于ST2点。零逗号负一。做一个截取,截完之后呢,这个结果再看一眼,刷新一面,你看爱德福就没了。截的时候就是截到最后一位,最后一位不要啊。就可以了。然后呢,URL这块咱们要做一个追加啊,把参数呢缀到后边。搞定。这是第二步完成。下边呢是第三步。第三步是发送啊。X h2点。Set这块咱们要注意一下。注意什么呢?就是他要设置请求体的,有可能要设置请求体。Get请求请求体一般是空的啊,但是post put delete啊,它的请求体。
04:02
是可以有内容的。所以说这块咱们需要做一个判断。啊,如果说。Method要是等于一个post。或者说,Method等于一个put。再或者说,Master等于一个delete。这个时候呢,咱要可以去设置请求体。这块严谨的做一下呢,我们应该怎么办呢?应该把这个master还要转转换一下大写。Two our case。啊,不能说只允许用户写大写,不允许用户写小写,这样子是不合理的啊。所以说咱们这儿呢,转换一下。大写。方法这块转化啊。好了,这步完成之后,咱开始在里边设置请求体XHR,点三请求体啊是data。Data这块大家注意观察一下啊,这是个对象。
05:00
我们需要把对象的转化成字符串才行。所以说,所以说咱们需要需要这样做阶层点范。把data塔放进来。如果说你不是以上几种方法。就不需要再设置请求题了。啊,直接send完事。好在这儿呢,往我们为了跟大家写的。标准一些,对于这种杰森格式的数据呢,应该还要加一个content type请求头,也就是那个ma类型。类型设置。怎么来设置这个类型呢?可以这样子设置一个请求头信息。Contact type。然后application斜杠杰森搞定。好了,就是当前呢,关于第三步就完成了,下边呢是第四步。处理这个结果。处理结果呢?需要绑定事件on change。
06:00
然后布置这一块的话,一定要最后一步,所以说if X hr.ready state。等于四再去做处理。前面几步呢,处理也没有用。所以说必须要等到第四步才行。然后里边如果是第四步呢,还不够啊,我们还要再去判断一下响应的状态码。因为响应状态码来决定我们的成功还是失败。二叉叉,它表示的是成功。所以咱们做个判断。点status。啊,大于等于大于等于200,然后并且呢。这个status呢,得小于一个300。这个时候表明他已经成功了,然后呢,否则的话是一个失败的。如果成功了,咱们就得改变成功状态啊,成功的状态。如何设置成功状态呢?咱可以调用resolve函数去改变promise对象它的一个成功状态。然后在里边呢,需要设置的是成功的值,那么成功值呢,咱们这这样做啊,就是用一个对象来表示,其中包括几个属性。
07:08
第一个。是成功的这个状态码。第二个呢,是成功的这个。字符串,也就是响应状态字符串。叫做status text在那存着的。还有一个呢,是显应体。XHR.response。好了,搞定。在这的话呢,我们顺便再对响应结果呢,做一个预设。我们要求的响应结果呢,是一个杰森格式,所以说呢,这里我们加一个response type等于一个杰森。啊,设置。响应结果的类型为S。好了,那么到这儿呢?我们成功的状态就完成了,下边再把失败状态做一个设置。失败的话就要改变失败状态啊。失败结果呢,我们传一个error。
08:03
请求失败。失败的结果为。是这个状态码为啊,这个状态码为。XHR.status搞定。好了,到这儿的话,关于功能的封装就完成了,接下来咱们做一个测试。下边方法还是一样啊,咱们先不测,先测上面这个。测的时候呢,URL我们就不自个儿去搭服务了。我呢找了一个接口,咱们用它来测一下。啊,是一个段子接口。复制一份拿过来往这一放。咱们来看看这个请求他能不能成功。打开浏览器。然后刷新一遍,大家看一下,结果已经出来了。啊,大家看这的话并不是特别的重要啊,咱们看network。看这个请求到底有没有发成功啊,点开post。打开豹纹看一眼啊。呃,类型没有问题,Ul参数没有问题,然后请求头这个位置也加上了,没有问题。
09:06
好,再看看请求体。下边这个位置,看这请求体也添加成功。那由这由此呢,就可以。断定呢,这个请求的封装是没有问题的。下面的话,咱们再看看失败的情况啊,比如说我这儿把这个E呢去一下。啊,这个资源肯定找不到啊,找不到他返返回404404就是失败的。刷新页面,然后点开pencil。大家看这。啊,这个时候呢,我们的报错就出来了,但是这个报错是promise里边的啊,我们为了能够处理啊,咱们这里呢,加一个catch方法。然后对这个结果呢,做一个处理啊,Log打印一下这个reason。看这个失败结果啊,刷新一们瞅一眼,看这。就来了啊。没有问题,上面这个报错是浏览器帮我们报的。好,到这的话,关于Excel函数的封装就完成了,咱们这几个小节先到这下一个小节再去添加它的一些方法。
我来说两句