34.前端技术-axios原创

下面呢，我们来学习下一个前端知识，咱来讲解这个内容，Axis，因为就五个字母，所以我就直接读成axi。然后这是什么呢？我强调啊，第一个它并不是VE一个组成部分，它是一个独立于vuee的项目，它的作用是什么？用于帮助我们完成阿贾克斯请求发送，也就是我们在VE中通过它能进行阿贾克斯请求这个过程，那下面呢，咱们通过代码给各位演示一下。AX iOS到底该怎么进行使用？那咱们来看一下这个过程。首先我在这里边呢，我先建一个文件夹，就这个AXL，然后在里边呢，创建一个A条文件，咱就写一个最基本一个操作，比如叫t.HTML。把这个创建，创建之后呢，里边还是加上voe的代码，这个就完成了，完成之后第一步怎么做呢？我们需要先引入AX iOS的JS文件，这个先给它引入进去，然后这个文件我在资料中已经提供出来了，这个文件咱把它复制到我项目的工作区里边来做一个复制，然后复制之后在页面中咱们进行这么一个引入，我把这个代码咱们直接复制过来，把它引进来，这是他的第一步。

然后这个完成之后，下面呢，我们在这里边写上我们的代码，首先我把结构先写一下，第一部分有个date date中是什么呢？电你的变量，还有你的初始值，这是第一个，然后写完之后，下面呢，咱们加上一个方法，这些方法咱刚才刚讲过这个方法。叫。可以的，什么意思，各位应该记得啊，它表示在页面。渲染之前执行，然后除了它之外，下面我们再加上另外一个属性，这个属性叫做methods，里边写上咱们的具体方法，所以这是一个基本的一个结构，各位把这个记住，因为后面咱们写在什么，基本上都这个结构，然后写完之后下面怎么做呢？我们来做个操作，首先我在data中的第一个变量，比如我叫user list。

咱们先来个空的数组，一会儿调接口，把值得到，用它做个赋值，然后第二部分create咱们提到啊，因为它是在页面渲染之前执行，而因为渲染之前咱们肯定是调接口得到数据操作，所以这里边我们就来调用咱的方法，把这方法我写到method中，我起个名字就叫get list啊，当然可以叫别的名字，然后在里边我来调用这个方法，this.get list，在get list中咱就来发送阿贾克斯的这么一个请求，得到我们的那种。

这是一个结构，然后结构中特别说明，大家注意啊，当我进入页面create瑞T的方法肯定会先执行它在渲染前执行，然后执行过程中调get list的，咱在get list中发送al请求，而调的时候各位注意啊，这里边要加个this，表示获取当前这voe中的这个方法。如果说你取属性也需要加个this，也就说获取voe中的方法，或者调用里边的，或者区里边的属性，都要在前面加上一个this，所以现在结构完成完成之后，最后咱在方法中发送I列请求，那再来写一下啊，就是AX iOS加上提交方式，咱就来一个get提交。然后在里边呢，加上你请求那个路径啊，比如说咱的路径，比如咱的接口应该是HTP冒号杠杠，Local house 8301等等，加上你的路径，这是一个结构，但是这个路径请求，因为它里面涉及到一个知识点，咱没有讲到它叫跨域，咱后面再来讲，现在咱先把这个ass的阿克斯做个测试，所以为了测试我这么来做，我在里边呢，建一个这次的这么一个文件，我就叫date点，直接手动写一段固定的数据，然后咱们艾列克斯请求，后面咱们做到功能的时候再去请求我们真正接口，到时会讲到一个内容叫跨域，咱目前先这么请求。

那我在date里边呢，我就来加上这么一段数据啊，来写一下啊，比如各位看，比如第一个名字，我们叫这个success。然后它的值我就叫这个OK。啊，这是第一个。然后比如说第二个我写一个这个名字，咱就里面这个code就是状态嘛，状态嘛，我写个200，第二个第三个我加上一个date，然后在里边加上我们的内容，内容中比如说加一个叫it，里边加上你的具体的这些值，这个值我加上，这么就是加上这个三个对象啊，咱们能看到效果。

然后里边写一下，比如说他的名字。我第一个叫Lucy，然后第二个它的A加个20，后面以此类推，我把值给它快速写一下。第二个，我叫Mary。这个杰克。然后这个是30，这个写上40，所以现在这段数据我们就写出来了，然后写完之后咱们通过阿贾克斯来请求这个文件，就是date.jason因为他们在同一个目录下，所以咱们直接请求，然后请求之后呢，下面有两个方法，各位注意啊，一个方法叫Z，一个方法叫cash。说一下什么意思啊，Z方法表示你请求成功，会调用Z方法，K始表示请求失败，调用开始方法。而在这里边能得到就是我们调用接口反的数据，咱们起个名字，比如说叫response，加上一个箭头函数，再来接收一下，这response就是你调用的这个内容中返回的数据，咱可以调接口，我这里是调用一个文件，都是一样的，他把这个数据给我们会返回，通过respond可以得到。

然后catch里边呢，有它的错误信息，比如咱来一个A。加上一个加测函数，这IO值我就直接做个输出了，console.log。加上这个A。然后这个response我在里边也输出一下，咱就看一下我们调用这个Jason给咱们返回的内容到底是什么。所以现在大家记住啊，这个代码就是AXLS发送阿贾克斯请求过程，咱们加上路径，这是提交方式，Z表示成功，K是表示失败，然后这里边加上一个这么一个变量，比如咱起名叫response，得到你的那种啊，但是这名字可以写别的名字，咱为了更加直接加上response，就是他响应这个信息。

所以现在这个就完成了，完成之后我们看一下效果啊，注意这里别忘记调用，一进入页面可以先执行它，调用这个方法得到我们的内容，我们做这个输出，现在我们试一下啊，最终结果。在里边把F12咱们给它点开，然后咱们重新刷新一下啊，各位看里边，呃，这位是报了一个错，他说这个文件没有，那我们看一下啊，应该是这个文件应该是写错了还是什么问题啊，大家看啊在这里。你看它的提示啊，这问题提示的很明确，他首先提示你说voe没有定义，然后告诉你是什么，404说没有找到什么，没有找到这VE mini JS没有找到，大家也看到了，我在这个文件夹下边没有这个文件吧，这文件是不是在VE这个下边，是在这里边有啊，所以咱把路径给它改一下可以了，那我就直接这么改啊，我把文件给大家重新复制一下。

或者说你通过路径找也可以啊，我为了方便咱就直接拿过来，现在就可以了，有文件刚才错误，这个文件没有引入，然后现在我们再重新试一下，这里边我来刷新，咱们看啊，Response返回数据，它就长这个样子，我把这个数据给各位给他截的多一点啊，咱看一下数据到底是什么。这段给各位截出来，咱们看一下啊，这就是咱们阿贾克斯请求给我们返回的数据。然后各位看啊，我们第一眼看到发现数据是不是有很多，有为什么很多呢？给各位强调，各位应该知道一个东西叫HTTP协议，应该听过它里边有请求响应，请求中有什么请求行，请求头，请求体想里边同样有这个叫响应行，响应头，包括这个叫。

体有这三部分，而现在这里边返回就是你的响应行响应头想体部分，咱们得到内容应该是在这个位置，大家也看到是不是在这里。是date中是在内容，然后那种中咱们来看啊，首先它有一个名字叫date，是它返回的详体部分，在date中有咱们数据中的名字，是不是还有一个date，然后里边有个it，所以通过它的把数据可以得到，就是里面这个第一个date。第二个date，还有第三个通过它得到的数据，那这里边我来获取一下啊，包括大家可以想一下这数据怎么得到。Response整个部分点上是一个data，就是点上第一个data。

然后点上之后呢，下面还有第二个date，咱们再点个date，还有第三个叫这个，然后最终得到是咱这个数据，你看啊，两个date一个item都要数据，这个名字不要写错，注意啊，这里边不要写错，要跟你这个名字保持一致，第一个date固定，第二个date，第三个items跟你这里边保持一致，一定不要写错。然后写完之后再做个赋值，上面有一个user list，把它复制一下。这次点user等于咱们这个值，所以现在这就完成了，完成之后注意啊，这些单词不要写错，举个例子啊，有一个很低级的错误，各位不要犯这错误啊，比如你看我这么写。大家看啊，你别告诉你看不出来什么问题啊，这问题很明显，这个叫response，这跟他是不一样哦，你这么做啊，或者说你两个都写上，这个没有问题，你不要说一个拼写对，一个还分写错，这最终会报说这个没有定义，或者这个找不到，这种问题各位不要出现，就是单词不要写错，各位在开发前的中，很多问题经常都是单词写错了，这个注意别犯这种低级错误。

所以现在完成了啊，完成之后呢，这个user list，咱可以在页面中做一个便利的显示可以了，那我直接写一下啊，这咱之前写过，我就快速试验一下。我加上一个table，加上一个TR夹，里边加一个叫V-for，咱说过，然后音音的右边user，音的左边是你每次那个对象，那叫user，然后最终在TD里边来显示我们的内容。那我显示一下啊，第一个user点上这个名字叫name，然后第二个是咱直接做个显示可以了。我在里边写下。

所以大家看啊，现在咱就完成了阿贾克斯请的过程，各位把这个代码记住，里边还用到咱之前说那个箭头函数写法都用到了这个完成，完成之后页面中刷新，大家看一下。数据是有了，杰克Mary lucy2034时在里边都完成了显示，所以以上啊，就是咱们完成的AXLS阿贾克斯请的过程，咱后面前在开号中肯定会用到，所以你把这个代码好好去练习一遍。这个就说到这里啊，然后这个之后呢，在我们前端里边呢，还有一个内容，这个内容呢，咱们简单看一下，因为比较简单，就是最后的这个东西。叫I的UI，它是由饿了么公司，就是就是阿里嘛，阿里把饿了么早就说过了，就是阿里提供的这么一个前端的一个组件库，通过它我们能快速构建页面，就不需要过多去关心那种样式的处理，因为里边把组件都用到了它的官方呢，提供了很详细的文档，咱通过文档一种依赖直接复制用就可以了啊，比如咱们可以简单看一下啊，就这个IVUI具体内容，后面项目他用咱看一下，因为很简单。

你访问页面，打开组件，然后你看里边有很多，比如咱随便找一个八腿按钮。你看是不是各种按钮，另外你看它有源码，这源码你用的话可以直接复制这些使用包括在里边啊，比如这个什么上传的组件，表单的组件，表格的组件等等里边都有，咱后面项目中会基于VE加MUY来完成前端的这么一个开发啊，这议大家知道一下啊，所以以上是咱完成的这个简中的知识，AXLS发送R请求是我们讲的一个重点部分。