23.尚硅谷_AJAX-Axios发送AJAX请求

Hello，大家好，这一个小节我们来讲一下呢，Excel。这个Excel呢，是目前前端啊，最热门的阿贾克斯这工具库。啊，它的一个使用频率特别高，而且呢也是view和react推荐的。这个阿贾克斯请求的一个工具包。好了，那么大家可以看一下它的一些特性啊，然后可以呢。可以再弄GS里边。发送请求，然后呢支持promise promise的话是ES6推出了异步编程的新的解决方案，然后呢，还有这个拦截器机制，然后数据转换，还可以取消请求，然后自动转换成杰森还。可以呢，做一些安全的一些防护。啊，特性很强。好了，那强归强，其实根究归根结底，它还是用来发送啊价格请求的。那么下面的话，我们就来看一看这玩意儿怎么去用。啊，我们这儿呢，就不在NPM下面去安装了，我们直接在页面当中啊，使用CDN链接去使用和引入这个文件就OK了啊。

那么拿过来，我们来演示一下Excel。发送加请求。套路咱们还是一样啊，来来这么三个按钮，一个呢是get。一个呢是post。还有一个呢，是这个阿贾克斯。啊，三个按钮啊。好，那么script标签我们先把这三个按钮呢，咱们先获取一下cost btns等于一个document.query select2。然后把八天的都拿到。然后下边呢，开始绑定事件BTNS，下边来个0.onclick，然后等于一个function。点击第一个按钮呢，咱们发送get请求，Get请求。怎么发？首先第一步要先把Excel弄进来。在哪呢，在这。复制一份。拿过来。呃，不过这个呢，它的CDN的链接是在国外的啊，访问起来可能会比较慢，所以说咱们换成那个boot c dn的。

然后搜一下Excel。啊，点击咱们用这个。这个的话速度会快一些，复制。拿过来，放到这儿。他如果说要担心他报这个警告的话，可以把这个加上crossor。好，那下边的话咱们发怎么去发呢？哎，看看那语法很简单啊，就是excel.get.post跟那个谁跟很像哈，跟很像OK，然后咱们写一个ce.get。那么里边第一个参数呢。就是给谁发，咱们准备呢，给这个。再换一个啊。给这个Excel server去发。Sales。这块也是一样子啊，写一个Excel下边内容的话，咱就不变了啊，保存一下他把服务重新启动啊，靠一边去。

啊，咱们给谁发呢？给HTTP127.0.0.1冒号8000斜杠X-server给他去发。然后发什么东西。注意这个使用方式可就跟几块RY不太一样了，大家来看一下啊，这个参数设置的话东西比较多啊，比如说我们想加一些URL参数，我们可以做。这是URL参数。然后里边可以加，比如说我们写个ID等于100，然后呢，VIP等于一个七。我们来先看看效果怎么样。然后首先点开浏览器。然后打开这个控制台，Network，点开，点击发送。你可以看一下啊，ID等于100 VIP等于七，都已经传递过去了，这是没有问题的。除了URL参数之外呢，咱们还可以设置什么呢？设置这个请求头信息。

啊，来一个header。我们来看一下这一块。来一个黑的。啊，少写个S啊，过来加个S。咱们这写一个name等于一个at硅谷。然后呢，H等于个20，举个例子啊，就随便写两个头信息保存切过来在这儿刷新，然后点击。看一下啊，点开它。啊，然后呢，点开我们的这个请求，头看这AGE20。然后name at硅谷没有问题，所以请求行和请求头就行，参数和头参数都没有问题。在这的话，因为是盖的请求，所以说咱们没有办法呢去对。这个请求体呢，直接做一个设置。啊，咱们呢，就是把URL参数和头信息做了一个设置。那么其实在这设置的这个选项啊，特别特别多，你可以看一下request con啊。什么有URL method base URL，这个base URL呢，它是对径去做一个。

简化，我来给大家演示一下。配置这个base URL。excel.default。点deft，点这个base URL等于一个HTTP，然后呢127.0.0.1冒号，然后呢8000。可以搞定，那加上这个之后呢，下边这个咱就不用再写了，哎，直接写直接写这个。啊，你会发现它还是比较方便的啊好，咱们看效果怎么样，切过来刷新页面，然后点击好这个地方出了一些问题是吧，咱们这个配置可能是有一点小小的问题，可能是强哥这少写个S。看效果，刷新页面，然后呢，点击OK。你可以看一下，他一样是能够把这个结果呢给我们拿到的。那参数特别多哈，咱们就不挨个演示了啊，不挨个演示的，大家只要把这个先掌握住。

行，咱们呢，就是知道使用Excel可以呢，去发UR参数，也可以设置请求同信息，先把这个掌握住。啊就够了啊，如果说你想呢，想对xce做一个深入了解，那你得啊，你可以到咱们这个上硅谷呢去找啊，它是有专门的xce的一个课程的，比如。还涉及到了源码分析。是咱们这的一个发送，那么它的一个数据返回和处理呢，使用方式呢，也跟几块不太一样，几块呢使用的回调函数，而它呢是基于promise的。Then。Value。好，我们来看看这个结果啊，然后呢八六。保存斜过来。啊，刷新页面点开点击你看一下。是它的返回一个结果，返回结果包含什么呢？它是个对象啊，它这包含配置，然后包含data，这个data的话就是显应体解析之后的一个结果。看它自动帮我们转成了一个对象，然后呢，还有head这个头信息。

然后呢，还有这个请求的原生阿贾克斯对象啊。响应状态码和响应的状态字符串都有。所以说呢，使用Excel的话，它在进行这个请求。的时候呢，这个数据的获取这块啊，是比较完整的啊。啊，当然了，除此之外它还有很多特性啊，有兴趣你可以看一看关于X源码那个课程。我们是当前发了一个get请求，那下边咱们来演示一个pose请求啊，DTNS，下边来个0.onclick。然后等于一个function。然后来个excel.post。还是给他发Excel-server？然后呢，参数后边啊。参数这块的话呢，你的URL参数呢，还是可以加的pose的请求呢，你ul参数和请求体可以同时设置来演示一下，比如说。啊，咱们这写一个ID等于个200是吧，VIP等级等于个九。

URL参数，然后呢，还有请求头参数。Head。冒号。咱们这写一个he啊。一百一百八是吧，身高一米八，体重一百八啊。然后还有最后一个就是请求体，请求体这块的话，那是一个贝塔。这个是一个data，然后里边可以加，比如说用户名等于一个din。然后呢？Password等于一个mi，举个例子。这样一来你可以看一下啊，行头体。很清晰。很清晰就可以看到这样一个结构。非常方便啊，好，我们来一起看看效果怎么样，刷新页面，然后点击，然后点开network啊，这块出不来结果很正常，因为我们在代码这块并没有对结果做任何的处理，所以咱们需要到那个work里边去看一下效果。然后。把这个呢，咱们先清掉刷新，然后点击这个呢，点完之后没有出效果，应该咱们事件绑定出了问题，哎，你看明显这块不对啊，应该是这个下边为一。

好切过来刷新，然后点击看一下请求。啊，成功了啊，然后咱们点击一下。查看一下这个请求。这是哟呵，SS。等一下啊。Parros。这块并没有为我们加上。啊，稍等一下，我们看一下这个情况。点击来先看看请求体啊，先看请求体，请求体这块的话，Oh my god oh my god，咱们这结构出了一点点小问题。啊，结构这一块出了一点点小问题啊，那它这块的参数啊。如果说第二个是一个对象的话，它直接作为这个请求体的。啊，直接作为请求体的啊，所以说咱们可以怎么办呢？咱们可以这样子啊，把这个第二个数据翻过来。

啊放到这儿，然后第三个数据呢，是其他选项。啊，格式化一下。啊，看一下啊，这是第一个参数是URL，第二个参数是请求体，第三个参数呢是其他配置。啊，是这样的一个结构，我们可以看一看它一个文档。我们找一下啊，找一下走走走走走走走走。Post你看第一个参数URL，第二个参数呢，是一个请求体，第三个参数才是那个其他配置好。看效果怎么样，刷新页面，然后清一下，点击post。点击POS哦，报错了哦，57行，57行。把这个给去掉。保存，刷新页面，然后点击。看这啊。UUR参数这块没有问题啊，然后呢，再打开request，点开它。啊，当然不是这个下边这个。点开它。看这。URL参数存在，然后呢，头信息头信息he weight也存在，再看一下请求体，看这。

这个请求体格式呢，它发的并不是一个。就是URL查询字符串的形式，而是发了一个什么呀，发了一个Jason格式字符串。发了一个杰森格式字符串啊，是这样的一个格式来做数据传递。好了，那么这是当前的话，我们演示了一下。Excel呢，发送请求两个方法，一个是get，一个是post，好了我们先把这个保存一下。