00:00
Hello,大家好,这一个小节我们来讲一下呢,Excel。这个Excel呢,是目前前端啊,最热门的阿贾克斯这工具库。啊,它的一个使用频率特别高,而且呢也是view和react推荐的。这个阿贾克斯请求的一个工具包。好了,那么大家可以看一下它的一些特性啊,然后可以呢。可以再弄GS里边。发送请求,然后呢支持promise promise的话是ES6推出了异步编程的新的解决方案,然后呢,还有这个拦截器机制,然后数据转换,还可以取消请求,然后自动转换成杰森还。可以呢,做一些安全的一些防护。啊,特性很强。好了,那强归强,其实根究归根结底,它还是用来发送啊价格请求的。那么下面的话,我们就来看一看这玩意儿怎么去用。啊,我们这儿呢,就不在NPM下面去安装了,我们直接在页面当中啊,使用CDN链接去使用和引入这个文件就OK了啊。
01:05
那么拿过来,我们来演示一下Excel。发送加请求。套路咱们还是一样啊,来来这么三个按钮,一个呢是get。一个呢是post。还有一个呢,是这个阿贾克斯。啊,三个按钮啊。好,那么script标签我们先把这三个按钮呢,咱们先获取一下cost btns等于一个document.query select2。然后把八天的都拿到。然后下边呢,开始绑定事件BTNS,下边来个0.onclick,然后等于一个function。点击第一个按钮呢,咱们发送get请求,Get请求。怎么发?首先第一步要先把Excel弄进来。在哪呢,在这。复制一份。拿过来。呃,不过这个呢,它的CDN的链接是在国外的啊,访问起来可能会比较慢,所以说咱们换成那个boot c dn的。
02:09
然后搜一下Excel。啊,点击咱们用这个。这个的话速度会快一些,复制。拿过来,放到这儿。他如果说要担心他报这个警告的话,可以把这个加上crossor。好,那下边的话咱们发怎么去发呢?哎,看看那语法很简单啊,就是excel.get.post跟那个谁跟很像哈,跟很像OK,然后咱们写一个ce.get。那么里边第一个参数呢。就是给谁发,咱们准备呢,给这个。再换一个啊。给这个Excel server去发。Sales。这块也是一样子啊,写一个Excel下边内容的话,咱就不变了啊,保存一下他把服务重新启动啊,靠一边去。
03:04
啊,咱们给谁发呢?给HTTP127.0.0.1冒号8000斜杠X-server给他去发。然后发什么东西。注意这个使用方式可就跟几块RY不太一样了,大家来看一下啊,这个参数设置的话东西比较多啊,比如说我们想加一些URL参数,我们可以做。这是URL参数。然后里边可以加,比如说我们写个ID等于100,然后呢,VIP等于一个七。我们来先看看效果怎么样。然后首先点开浏览器。然后打开这个控制台,Network,点开,点击发送。你可以看一下啊,ID等于100 VIP等于七,都已经传递过去了,这是没有问题的。除了URL参数之外呢,咱们还可以设置什么呢?设置这个请求头信息。
04:03
啊,来一个header。我们来看一下这一块。来一个黑的。啊,少写个S啊,过来加个S。咱们这写一个name等于一个at硅谷。然后呢,H等于个20,举个例子啊,就随便写两个头信息保存切过来在这儿刷新,然后点击。看一下啊,点开它。啊,然后呢,点开我们的这个请求,头看这AGE20。然后name at硅谷没有问题,所以请求行和请求头就行,参数和头参数都没有问题。在这的话,因为是盖的请求,所以说咱们没有办法呢去对。这个请求体呢,直接做一个设置。啊,咱们呢,就是把URL参数和头信息做了一个设置。那么其实在这设置的这个选项啊,特别特别多,你可以看一下request con啊。什么有URL method base URL,这个base URL呢,它是对径去做一个。
05:05
简化,我来给大家演示一下。配置这个base URL。excel.default。点deft,点这个base URL等于一个HTTP,然后呢127.0.0.1冒号,然后呢8000。可以搞定,那加上这个之后呢,下边这个咱就不用再写了,哎,直接写直接写这个。啊,你会发现它还是比较方便的啊好,咱们看效果怎么样,切过来刷新页面,然后点击好这个地方出了一些问题是吧,咱们这个配置可能是有一点小小的问题,可能是强哥这少写个S。看效果,刷新页面,然后呢,点击OK。你可以看一下,他一样是能够把这个结果呢给我们拿到的。那参数特别多哈,咱们就不挨个演示了啊,不挨个演示的,大家只要把这个先掌握住。
06:01
行,咱们呢,就是知道使用Excel可以呢,去发UR参数,也可以设置请求同信息,先把这个掌握住。啊就够了啊,如果说你想呢,想对xce做一个深入了解,那你得啊,你可以到咱们这个上硅谷呢去找啊,它是有专门的xce的一个课程的,比如。还涉及到了源码分析。是咱们这的一个发送,那么它的一个数据返回和处理呢,使用方式呢,也跟几块不太一样,几块呢使用的回调函数,而它呢是基于promise的。Then。Value。好,我们来看看这个结果啊,然后呢八六。保存斜过来。啊,刷新页面点开点击你看一下。是它的返回一个结果,返回结果包含什么呢?它是个对象啊,它这包含配置,然后包含data,这个data的话就是显应体解析之后的一个结果。看它自动帮我们转成了一个对象,然后呢,还有head这个头信息。
07:03
然后呢,还有这个请求的原生阿贾克斯对象啊。响应状态码和响应的状态字符串都有。所以说呢,使用Excel的话,它在进行这个请求。的时候呢,这个数据的获取这块啊,是比较完整的啊。啊,当然了,除此之外它还有很多特性啊,有兴趣你可以看一看关于X源码那个课程。我们是当前发了一个get请求,那下边咱们来演示一个pose请求啊,DTNS,下边来个0.onclick。然后等于一个function。然后来个excel.post。还是给他发Excel-server?然后呢,参数后边啊。参数这块的话呢,你的URL参数呢,还是可以加的pose的请求呢,你ul参数和请求体可以同时设置来演示一下,比如说。啊,咱们这写一个ID等于个200是吧,VIP等级等于个九。
08:04
URL参数,然后呢,还有请求头参数。Head。冒号。咱们这写一个he啊。一百一百八是吧,身高一米八,体重一百八啊。然后还有最后一个就是请求体,请求体这块的话,那是一个贝塔。这个是一个data,然后里边可以加,比如说用户名等于一个din。然后呢?Password等于一个mi,举个例子。这样一来你可以看一下啊,行头体。很清晰。很清晰就可以看到这样一个结构。非常方便啊,好,我们来一起看看效果怎么样,刷新页面,然后点击,然后点开network啊,这块出不来结果很正常,因为我们在代码这块并没有对结果做任何的处理,所以咱们需要到那个work里边去看一下效果。然后。把这个呢,咱们先清掉刷新,然后点击这个呢,点完之后没有出效果,应该咱们事件绑定出了问题,哎,你看明显这块不对啊,应该是这个下边为一。
09:08
好切过来刷新,然后点击看一下请求。啊,成功了啊,然后咱们点击一下。查看一下这个请求。这是哟呵,SS。等一下啊。Parros。这块并没有为我们加上。啊,稍等一下,我们看一下这个情况。点击来先看看请求体啊,先看请求体,请求体这块的话,Oh my god oh my god,咱们这结构出了一点点小问题。啊,结构这一块出了一点点小问题啊,那它这块的参数啊。如果说第二个是一个对象的话,它直接作为这个请求体的。啊,直接作为请求体的啊,所以说咱们可以怎么办呢?咱们可以这样子啊,把这个第二个数据翻过来。
10:02
啊放到这儿,然后第三个数据呢,是其他选项。啊,格式化一下。啊,看一下啊,这是第一个参数是URL,第二个参数是请求体,第三个参数呢是其他配置。啊,是这样的一个结构,我们可以看一看它一个文档。我们找一下啊,找一下走走走走走走走走。Post你看第一个参数URL,第二个参数呢,是一个请求体,第三个参数才是那个其他配置好。看效果怎么样,刷新页面,然后清一下,点击post。点击POS哦,报错了哦,57行,57行。把这个给去掉。保存,刷新页面,然后点击。看这啊。UUR参数这块没有问题啊,然后呢,再打开request,点开它。啊,当然不是这个下边这个。点开它。看这。URL参数存在,然后呢,头信息头信息he weight也存在,再看一下请求体,看这。
11:05
这个请求体格式呢,它发的并不是一个。就是URL查询字符串的形式,而是发了一个什么呀,发了一个Jason格式字符串。发了一个杰森格式字符串啊,是这样的一个格式来做数据传递。好了,那么这是当前的话,我们演示了一下。Excel呢,发送请求两个方法,一个是get,一个是post,好了我们先把这个保存一下。
我来说两句