38-尚硅谷-尚医通-前端知识点-Vue-axios使用

各位同学大家好，欢迎继续收看上硅谷视频课程，我们继续来学习前端的相关基础知识。刚才内容中呢，给大家演示了VE中常用的指令，以及它的生命周期，那下面呢，给各位演示下一个内容，再来演示这个东西，它叫做AX iOS，那这个东西到底是什么，给各位做个说明。咱们之前曾经提到，我们项目开发中等，咱们用的是前后端奋力开发，也就是说在过程中我们有前端部分。包含有后端的接口部分，而咱们前端是不是要通过阿贾克斯请求去请求后端，然后后端把金子数据返回，我们在页面中是做过显示了，所以这是我们之前提到的，就是这位置咱们要通过阿贾克斯去情接口，而阿贾克斯咱们之前应该学过扎损落等原生方式，包括这块方式，而现在在vuee中咱一般用这种方式就用一个东西叫AXL，这个东西就用于发送阿请求，然后得到数据，最终进行操作，所以咱们下面就讲这个叫AXLS。

那这个东西有一点各位注意，就是我的这句话。大家看一下AX iOS它本身呢，其实并不是voe的一部分，是一个独立的项目，只是说它经常跟VO一起用来实现二贾克斯操作，那我下面给各位就来演示一下这个AX iOS如何进行阿贾克斯请求的发送，那再来看一下。首先我在这里边呢，比如现在我来创建一个A条文件，这个文件我就叫。淋巴。AXLx.HTML然后创建之后在里边呢，写上我们的基本结构，这个结构完成，然后完成之后我们怎么做呢？因为刚才我提到咱通过它是不是要发送R点的请求，请求咱们后端的接口，然后后端接口把这份数据是不是要返回啊。

也就是说这过程要请求接口，但是在目前呢，我先模拟个请求，然后后面写到项目中，再去真正请求接口，然后怎么模拟，给给我说一下，比如现在呢，我在voe这个文件夹里边，我来建个文件，这个文件比如我就叫A点。或者说我叫U侧点。然后在右侧点这里边，咱们就手动构建一段这数据，一会儿就请求这个数据得到我们内容。假如说数据中，比如我们的第一个值，我们就叫code状态码，然后它是200，代表成功，第二个我们叫message值。

Message代表它那个信息，比如说信息我们就叫成功，然后除了message之外，咱下面有一个名字，比如这个名字我叫date，在date里边呢，我们加上它的值，然后这个值我也写个对象，就这个值的名字我就叫it。在item中加上咱们最终那个数组，包括里边我就写上，咱就写这么三个对象，最终反应值取到在页面中做显示，那我在里边写一下，比如说里边第一个我们就来一个name。它的值叫Lucy，然后第二个我们叫A值。它的值是20。下面以此类推，把这个我们都写出来。比如说第二个我就叫麦瑞，然后这是。30这个咱们叫杰克啊，它的值就是。

40所以这样的话，我们就手动构建了一段电子数据，一会咱就请求这个文件把数据得到，在页面中做个显示，在这个准备工作就完成了，然后完成之后咱们看一下axls到底该怎么去用，给各位来说一下。我这里写一下。首先第一步，因为咱要用这个as，第一步呢，我们需要在我们的ATL页面中先引入aiss，它的这个JS文件，同时也包含voe的JS文件，这就是它的第一步，先引入新文件，那这个文件我们看一下之前的voe的文件咱们应该已经引入过了，而现在在里边我们就多加上一个，就是AX iOS文件，这个文件在我资料中给大家也听出来了，就这个文件，那我现在把这个文件就复制到我们当前这个项目的录中去，那我来做个复制。

我们项目应该是在这个度下。然后在里边voe，咱们把它直接拿过来，然后拿过来之后，我现在在页面中就把它引入进来，我们加上一个script。S2C等于我们的值，这个值就是AX iOS这么一个内容，那我们给它就是做一个引入。我来写一下。所以咱们现在把第一步完成了，在页面中引入相关的文件，然后引入之后我们下面就来编写这个具体的代码，那咱们来这个编写，我写这个位置。第二步。编写具体的代码。那这个代码怎么做呢？咱们把这结构给它完善一下，首先在里边我们有new狗voe，有E，取到它那个位置，然后date中定一个变量，比如说咱们一会儿取到的话，咱是不是其实最终取的是不是就是这个值，就以用信息，最后在里边来一个变量，比如我叫user list，然后它的值默认就为空。

这个写完之后，再下面呢，我们再加上一个叫可瑞的这个方法。不知道各位是否记得咱们讲生命周期中曾经讲过create的方法，什么意思来的？什么意思？它应该是在我们的页面。渲染之前是不是执行了，所以这个方法中呢，就是咱一般做件事情，什么事情，它里边一般都是调用我们的方法得到返回的。这些数据一般都是做这个事情，然后写完之后，在可以的下边我们写上一个叫methods。麦里边就需要我们的一个具体方法，比如这个方法我就叫做get list，咱们加上一个方法。

所以这样的话，这结构就完成了，完成之后我们可以在create里边把我这个方法做个调用，那我们就写一个this.get例子就表示调用当前vuee中的这个方法，这样的话完成一个结构，而这结构中它的效果就是当咱访问页面，那K1的方法是不是先执行了，它一执行就调方法进行2X请求，最终得到数据在页面中做显示。所以这样的话，咱们把结构就完成了，完成之后咱在方法中就来使用axs发送这个阿贾克斯。牛，那我们来做一下怎么发送，写一下写法很简单啊，你来一个axls，点上你的提交方式，就是你是get提交还是破提交，比如说我们写的get提交，然后在里边呢，加上我们请求那个路径，或者说请求的。

接口路径，然后洗完之后，我们再下面加上一个叫点阵，再加上一个叫。点catch.z表示就是你请求成功会掉这个方法，然后点catch就表示你请求失败会掉这个方法，所以这是我们一个最基本的结构。那结构我们说到这里，咱给他做个完善，首先get里边加路径，这些路径呢，如果说咱们去请求我们的接口，那应该是去调用那个local house8201加上你的接口名字，但是现在呢，因为咱们是请求我们这个文件，所以我就直接加上文件的路径。user.ja做个请求，然后启用之后点then表示成功，成功里边呢，咱们可以给它起个名字，比如我叫response，注意我的写法啊，加上一个箭头函数，咱之前讲到过，这什么意思呢？又表示我这个user Jason里面返回结果咱通过范可以得到，然后再结成函数中写你的具体操作。

这是一个写法，通过一个简断函数实现，Catch里边一样，假如我起个名字叫A种加上。建设函数，咱通过挨着能得到里边的错误信息，这是一个最基本的结构编写。然后写完之后，咱在里边写上，首先当我们请求成功，它会进行这个点z response，就是返回结果，那我现在就把response，比如说我们做一个输出，包括如果你有异常，咱就把这个I，我这里边也是。自我输出。所以这样的话，这个方法咱们就最终完成了，就这个写法，当你发送请求，它就是执行这个代码，然后请求user得到数据response，咱把response最终做输出。

这个完成完成之后，咱们把代码执行一下，看一下效果，现在我点F12。然后在里边呢，比如现在我重新刷新，大家看这一段呢，就是我输出的response的值，而各位看到这棒输出呢，它不是说只有你文件中的这个内容，它包含你所有那个小信息，包括大家看，比如里边有这个什么头信息，有你的相关的数据等等，包括有相关什么配置信息，然后咱们重点看它的date里边。大家看啊。这里边是不是有个date date中有code，然后有message，然后里边是不是还一个date，包括有it，咱们具体数据是不是就是it中数据，所以现在我们做的事情就是把里边的这端数据也就取出来就可以了。这是关于我们完成的这么一个编写。

然后这个完成之后，咱们下面把这值给它取一下，看怎么来取，咱们来观察一下啊，首先我整个部分是不是叫response，然后response里边你看是不是有个date date中是排一个date，然后在这date中是不是还有这个it，所以大家说我这值我该怎么取这个it中的值。大家说已知该怎么取？我觉得各位同学应该能想到啊，怎么选，是不是咱们加上一个response，点上一个date，比如说点上这个date。然后下面是不是还一个，那怎么做，我们再上一个date，再点上里面那个是不items items是我刚才起到这个名字，就是这个date的j it，然后最终就得我们结果，这结果因为它是一个数组形式，所以咱们用user立数组给它做一个赋值，我就写一个this.user list。

等于我们的这个值。这样的话就完成了，完成之后我把这个user list，咱们给它最终做一个输出。咱们来测下这个效果，就现在这个效果应该已经做到了，然后现在我到里边刷新，各位看啊，这里提示我说这个user list没有定义，那我们来看一下啊，哪里没有定义。排查一下这问题啊。我们来看一下啊，它哪里没有定义，然后咱们通过F12里边有个提示，它这里边咱们看说在第34行有问题，那我们来看一下，大家看到问题了吧，我这里边你要用这个变量是不是要加个Z，而我这里边直接输出肯定输入不了，所以咱输入的时候也要加个Z才可以。啊，就是这么一个小问题，然后咱给它加上之后到里边，比如现在我做一个刷新，咱们看最终的结果是不是得到了，因为咱们有三个对象，所以这样的话我们就完成了AX iOS进行阿贾克的请求，然后得到我们的数据。

然后得到数据之后，这些数据最终咱在页面中是不是做过显示，那我现在在里边给它就显示一下，比如说为了明显，我这里边加上一个table。然后table里边有这个TR，包括有这个TD，而现在我这里边因为是有多个条，就是每行记录式。一个TR，所以在TR里边，按照咱们刚才讲那个指令是不是叫V杠。威刚foy怎么写？首先便利的是user。List，然后咱起个名字叫user，再来一个音，通过user把里边值是不是取号在里边，我就加上这个差值表达式。User name。还有一个是usage age。

咱把这个写一下，所以这样的话，我们就完成了AXLS的操作，最终来到页面中，大家看。数据输不出来了，Lucy me结克20 30、40，这样的话咱们就完成一个显示，所以这就是关于AX is如何进行阿贾克斯求的发送，咱把这代码就完成了。而在过程中各位注意，咱们现在加了一个create的，在我页面渲染之前要用这个方法，所以咱在create里边就调我们这个发情的方法最容易得到数据，然后数据在页面中用V杠后做一个便利显示。这是关于我们这个一个讲解。