day04【项目前端相关基础知识二】/02-尚硅谷-谷粒学院-前端技术-axios使用（1）

首先我们先来看今天的第一个内容，咱来学这个东西叫做AX iOS，把这个我们做个学习。那我在这张图上给大家来画一下啊，咱们的第一个内容叫axls，那这个东西它到底是个什么，给大家来解释一下啊，然后咱们最终写代码，这里我描述一下啊，首先第一个各位要知道啊。AX。IOS它是一个什么，是一个独立的这么一个项目啊，是一个独立的一个项目，也就是说呢，说的通俗点啊，它不是voe里边的一部分。就是它是独立于voe存在的，不是voe中的一部分，只说我们使用它会怎么做呢？就是我们使用这个AXYS，它要经常和vuee一起使用来实现一个操作，就是咱们之前一直学过这个阿贾克斯操作，这是它的一个主要的用途，这个我再读一遍啊。第一个得要明确AXLS不是voe的一部分，是个独立的项目，只说咱们经常让他跟vouee一起使用来实现阿贾克斯操作，比如咱们发送一个异务请求，请求接口，然后得到数据进行返回，进行显示，这个是AXL操作，就是它用于voe中进行R贾科的操作。

而针对阿贾克斯，不知各位是否记得啊，咱们在扎va阶段，或者说在这块阶段，这个应该都学过，就是义务请求，咱们当时在外部阶段应该是请一个serve啊，但是咱现在就请求我们在之前写那个讲师那部分的接口部分用它来做到。啊，那我来写一下第二句话啊。我们现在使用这个AXFS的这么一个应用场景。

什么场景呢，给大家啊，大概画一下啊，这么一个过程。比如说我们在这个操作中，咱们之前应该写过这个，就是后端的接口部分，比如我们写这个讲师个人改查都是接口，那它后面肯定要写这个前端的页面部分，那我们要怎么做呢？咱的过程就是在前端咱们就是要发送这么一个阿贾克斯请求啊，这里边要发送。一个阿贾克斯请求，让他去请求咱们的后端接口，然后请求之后我们到后端接口肯定就要返回这个数据。啊，就这里边会返回数据。然后它返回数据之后，咱们把数据在前端得到，进行显示，或者进行便历等等操作，这是我们AXLS的过程，它就是用于发送X请求，然后得到数据在页面中，咱用我们学的voe的指令做这么一个，比如说便利还是显示，还是获取等等操作啊，这是它一个应用场景，所以各位得知道啊，也就是发送阿贾克斯的这么一个过程。

啊，这个啊，咱做一个说明，然后这个说完之后，下面给大家就来演示一下这个东西，它到底应该怎么去用啊，咱来做一个演示。好，咱们看啊，第三个我们来演示他如何来进行使用。就是axls的这么一个使用，那我们来啊，咱直接写代码来说一下啊。咱们啊，到这里边我们来看一下啊，还是来到我们这个工作区中，这是咱们昨天建的工作区VS1010，然后在工作区中呢，比如现在为了明显，我重新建个新的文件夹，我给它起个名字就叫做axls DEMO。

这是咱们啊建的文件夹，呃，在第一个啊这里，然后建完之后在里边呢，我们来创建一个文件，比如说就叫零一.html啊，这是咱们电子文件，建完文件之后，在页面中咱们写出来那个就是。Ave的那么基础代码，因为昨天呢，咱应该是见过这么一个，就是代码片段，所以咱用这个快捷键vetl这个可以生出来啊，各位把这个代码片段给它创建出来，为了咱们后面操作方便，不创建也可以，只是每次你都需要写这个东西。然后这个做完之后啊，咱下面在里边写这个代码，那怎么做，我在这个位置写一下啊，首先它等第一步操作就是你创建一个HTM页面。然后在页面中呢，咱需要引入那个JS文件AJS文件包含有两个JS文件啊，注意包含两个，一个是VE的这么一个文件，还有一个是as is文件，所以咱需要引入两个JS文件，那咱给它引入一下啊，因为目前文件夹中没有，那我给他就复制过来啊，我直接找到我那个文件夹那个位置啊，我这位置应该在。

这里啊。它是在这位置啊，那咱来复制啊，里边有两文件，这两文件我在资料中给大家都听出来了，各位应该之前都下载过了，首先第一个文件，之前咱用过在voe中的这个东西，就是voe main.js，或者说voe啊，就是一个是压缩的，咱用这个把它复制过来啊，一会咱们引到页面中，然后除了它之外，还有第二个文件，大家看这位置啊，在AXLS中，这个东西叫XX，命点JX，咱把它也输过来，所以咱们现在需要这么两个文件啊，一个是voe的，一个是axlx的。

这是我们要做的一个步骤，我把它先复制过来。然后给各位啊截个图。需要这两个文件，然后复制之后，咱们在页面中给他就做这么一个引入啊，那咱来引入一下啊，首先在我们生成代码中有这个VE了，然后下面我们再加上一行。Script的S2C等于这个叫as问点S，把这个咱给它最终引进来啊，这就是它里边的第一步操作这个啊，咱就做到了啊。给大家把这步给他知道啊，就是引入一个。文件。然后这个永之后啊，我们的第一步就完成了啊，它就是这么来做，第一步做完之后，下面我们来进入到第二步，第二步就来编写一下它那个代码啊，就是第二步来编写那个AXFS的代码。那这代码怎么写？下面给大家我来详细写这代码啊，希望各位要记住啊，这种代码大家后面会一直写到，写的都是这种写法，用AXLS发送I请求，请求咱的接口，然后得到数据进行操作啊，写的都是这么一个代码。

那这个代码怎么做，给大家我来详细写一下啊。咱看这个写法啊，首先我们在写代码中，它有这么一个，就是固定的一个结构，在结构中我们有它内容，那咱看什么结构啊，首先第一部分咱写一个叫date。啊，这date什么意思呢？我这里标注一下啊，它就表示咱们在这个date里边可以定义你的变量和你的初始值，这是第一个，咱需要写个date，这是第一部分，然后写完date之后咱加个逗号，再来个方法，这方法就这个方法。不是，各位是否记得啊，咱刚才刚回过叫create的方法，这方法什么意思呢？它就表示在你的页面渲染之前执行，就是你数据显示之前执行create的，这是我们的第二个方法，而这方法中它一般干什么的，我写一下啊，一般都是去调用你定义的那些方法。

啊，定义的方法，给咱一会儿说定义什么方法，这是第二个结构，然后第三个咱写的话就写这一东西叫做methods，在method里边就定义你那个具体方法。啊，就是编写具体的方法，所以这是我们写这个里边一个基本结构，大体上都遵循这个结构啊，我再说一遍啊，第一个date里边定义变量和初始值，第二个叫create，这表示在页面渲染之前知晓。它里边一般是调方法，然后method里边先引到具体方法啊，那什么叫调方法呢？假如说啊，我这里边比如写个方法，我叫这个save。

然后这个方法在create里边要调用，那调的方式，咱就写一个叫c.C这个调用啊，就是这么一个结构，所以这是我们写的代码的一个基本结构啊，咱都是按照这个结构来写这个操作。啊，这个各位知道啊，Date created methods。咱们都是这么来做，那咱们现在沿着这个结构来实现。所以大家啊，记住后面咱都这么做，那现在我们要做的话呢，比如我们现在啊，咱来个具体的一个需求。因为咱们实际中我们肯定是要去调这个后端这个接口啊，但是咱们啊，今天先不调，然后咱写那个页面中再调，咱今天呢，先做个数据的模拟，后面再调接口，因为调接口中啊，会涉及到很多的知识，后面咱得讲到，那我现在怎么做呢？啊，我这么来做啊，比如我现在呢，我就在这个文件夹中手动建一个Jason文件，咱手动构建的数据，然后我一会儿去请求这个文件把数据得到，当然也可以调接口，然后后面再写接口啊，我先手动写个文件。

比如这个文件，我就来一个叫date点。你看啊，就是一个data文件，然后在里边呢，我写一段Jason数据，为咱一会儿做调用，这些数据咱就按照我们那个数据格式来创建啊，比如咱之前有那个格式。我写一下啊，就是一个这个size，然后它的值是处。我说各位是否记得啊，就是咱之前写那个统一反应结果那个格式啊，我快速写一遍，第二个应该叫这个code，它的状态嘛，就是这个2Y。然后第三个应该有一个叫message。然后它里面那个描述，比如我们叫这个成功。啊，这是啊几个值，然后下面还有一个叫date。啊，就是date date中呢是它那个最基本的数据，但是date里边咱可以再起个名字，比如我叫这个it，然后it中加上一个数组，数组中就是你的具体值啊，就是你的多个对象，比如现在为了明显我就写这么三个对象啊，为了咱们后面是有效果啊三个对象，然后对对象中我写这个值，比如说我写个name。

里边啊，我加上一个Lucy。再来个A，然后加个20，下面以此类推啊，咱写多个对象。这个啊，我先复制过来，把这值改一下啊，这个叫麦。这叫杰克。这是。30啊，这是40啊，所以这个啊，是咱们写的这么一段最基本的这次数据啊，咱就手动构建一个，后面咱们写到我们的页面中，咱再具体去请求接口，现在咱做一个模拟的效果。把这个啊，我们给它写出来了啊，所以这个数据各位要能看懂啊，就是咱们之前那个统一结果，首先第一个大括号表示一个对象里边有KY6KY6。

然后在这个date，这个K的名字里边有一个it，在it中这部分是个数组啊，然后咱的数据其实就是这个数据，最后我想实验就是把这段数据在页面中做个显示啊，所以这是咱们手动构建了这么一段数据啊，咱手动构建一下啊，就这么一部分。这个啊，我给各位啊，咱直接就截个图了啊。我写一下啊，这个基本的步骤啊，就是在这里边，我们第二步是编写代码啊，但是咱为了效果明显，首先我们先就是创建一个Jason的这么一个文件。啊，咱们用于啊，我们先做一个数据的这么一个创建，后面肯定启用接口，咱现在先这么来做啊，为了咱们方便操作。

那这部分啊，给大家接过来，就这段数据是咱们刚才做到的啊，然后这个做到之后，下面咱就开始写这么一个最基本的代码了，发送阿贾克斯请求，请求这个数据，然后把数据在页面中做个显示啊，就是第二个。我们就要使用AX is发送一个阿贾克斯请求，去请求我们这个文件，然后得到数据在页面中进行显示，啊，所以第二部分我们就来做这个事情，那咱们下面就把这个代码我们就来具体写下。首先我强调啊，就是第一次写的代码，各位可能会感觉啊，这代码比较奇怪，不是很适应，但是要各位啊，这代比要自己给他多练一练，咱后面写代码都是按照这种方式去写的啊，你要适应这种写法。另外还有一种思路啊，咱们现在写这些代码是我们前端的javaq代码，跟Java代码是不一样的，你不要写代码，再去想Java，两个是没有什么关系的，只是很多时候他们长得像而已，但是两个没有直接关系，有时候他们的思路是不一样的。

啊，那咱们下面来写这个代码，就关于前端。那写之前咱先看一下啊，各位先有一个大体上一个思路，要让我写，我就写一句，你们就看一句，这样不合适啊，咱先大家看一下啊，咱们看啊怎么来做的，第一个在date中我说到它是变量和初始值，那我里边呢，写个变量，比如叫慢格list，它的初始值就是一个空数组啊，这是我写的第一个，然后create特里边调列方法叫get例子，这是调的方法。另外在get例子中这一段是核心的，就是发送阿贾克请求，请求数据，我的课件中是请求我们这个接口啊，一会我就直接写文件了，然后下面这个结构，在这结构中这七法比较特殊，主要有一点咱们在昨天学到过。

这个东西。各位应该记得啊，咱们刚才刚回顾过这个东西是不是叫箭头函数，所以咱要写到这种叫箭头函数啊，那我下面把这个给大家就来详细写一下啊，咱看它到底该怎么去写。第一次我写的稍微慢一点，然后后面啊，我就快速写代码，因为都是差不多的这么种结构，那当来实现啊，首先第一部分在date中呢，我们先定义变量和注始值，因为咱们现在要请求是这段数据，也是把这部分得到，而这部分大家看到中括号。是不是一个数组里面都有对象，所以第一部分呢？我在date中先定一个变量，就是定义。这么一个变量啊，它的值是一个空的一个数组啊，为了咱们后面赋值方便啊，这是第一个变量，然后变量名字可以随便起啊，比如我就叫user list，它的定义方式就是名称值，名称是user list，然后它的值咱就加个中括号啊，这表示定义这么一个空数组是咱写的第一部分。

然后写完之后看第二部分，在create里边要调方法，给咱一会调，咱就最终先写方法，Method中我们来创建这么一个方法啊，比如这个方法我们就是查询所有这个就是用户的数据啊，因为咱要把这些查到，那这方法我写一下啊，第一个你写个方法名字，名字随便起啊，比如就叫get user。例子，这是一个方法，咱就写个方法括号大括号这个结构啊，注意这写法啊。给的特别多，混出去啊，各位看得更清楚，然后在方法中呢，咱要做的就是。使用AXLS发送这么一个阿贾克斯请求，那怎么做，我把这写下啊，大家看我的写法啊，我写的稍微慢一点啊，咱的做法就是第一个这个肯定要先引入，不引入做不到啊，然后咱写一个叫AX iOS，注意啊，这没有提示啊，需要你自己手写，然后咱后面点上一个什么呢？就是你的提交方式。

什么叫提交方式呢？比如说我们有get提交，有post提交，有什么提交，那我现在我就写个get提交，这是一个叫提交方式啊，这是一个结构，就是这是固定的AXLS，后面加上你的提交方式。写这结构啊。点上我们的提交方式，然后我们加上一个括号，加上括号之后怎么做呢？在这个括号里边写上是什么，就是你请求的那个。接口的那个路径和地址，或者你请到文件的路径和名称，这个在这块中要写出来，写上你的路径，但是因为我现在啊请求的就是一个文件，所以咱就直接写我这个文件的名称。

大家看我的文件是不是叫date.j那我就这么来写啊，Date点。但是后面呢，如果咱请求接口，那他写的路径肯定就是这个路径。Local house，然后8001啊什么这个地址，把这个写出来。咱现在先去请求这么一个文件啊，这是一个结构，然后这个写完之后，在下面就是在这个位置中有两个方法咱需要写啊，当然你可写一行，我换一行啊，那怎么写呢？一个方法，咱的写法就是写个点上一个。Z方法还有一个叫做点上一个叫。Catch方法，这是一个结构，一个点赞，一个叫点开。啊，点赞。还有一个点，Catch你可以写一行啊，但单写多行更加方便，然后这两方法是固定的两个方法啊，是asf中默认的两个方法，那两方法什么意思？给大家解释一下啊，来看第一个。

各位看这单词这是什么意思？我觉得各位应该能看懂啊，这应该是一个初中的一个单词啊，Then是不是有然后的意思，怎么然后这then表什么意思，就是当你这里边请求成功。啊，写一下啊，请求成功它就会执行这个Z方法，这是第一个就当比如说请求一个接口，当他请求成功，数据正常，返回点赞，对方会执行，还有叫catch，最好理解，当你请求失败，会执行这个catch方法。啊，这是一个结构，比如现在我启动接口成功了，再发执行，当我失败了，Catch会执行啊，这是它的两方法，一个点Z，一个点开，各位给他知道啊，然后写完之后，咱看这里边该怎么写啊，注意啊，这个写法中咱要写到一个东西，这个东西叫做。

箭头函数，通过箭头函数来写这个代码啊，那我写下啊，各位来看一下啊，咱先写这个点阵，两都一样，第一个就是现在呢，因为我要请求接口或者请求文件，而这个地方是不是要把数据给咱返回啊，所以我要接收到反应数据，那怎么做，咱们给他写这么一个变量，或者写个名字，把数据得到，这名字随便写啊，但是我们一般经常写的叫response。这位置棒就表示得到你这个文件，或者接口返回那种就把这得到，但是这个名字写什么都可以，比如写个WW没问题啊，指咱一般电写的优点是E，我们写个response，写完之后后面加上这么一个东西。大家看啊。是什么？是不是箭头函数，然后箭头函数后面我们加上一个括号。

这个是它的一个结构啊，就这么来写，包括开始中一样，我们起个名字，比如说这名字我叫I着，这表得到你的那个失败信息，箭头函数大括号，然后回车，它里边这么来做啊，这是点赞点开，然后后面都这么来做。啊，比如说啊，我再写一遍啊，咱再看一遍。他怎么做呢？首先啊，里边有点z.catchche点赞表示执行成功，执行，点catch表示执行失败，执行，然后在里面希吧，就是点赞中咱加个变量的名字，这表示得到你的那个数据，这名字随便起啊，起什么都可以，只是咱一般经常建议写的有点意义，我就写个response，写完之后后面加上一个箭头函数。大括号啊，这个可以就是得到你返回的数据，通过棒得到，然后开里边一样，咱来一个叫A种加个箭头函数。

大括号，这表示得到你那个就是失败的信息，I着可以得到啊，所以这是它的两个方法，一个点赞，一个点开。啊，这个咱们就写出来了这个结构，然后再点赞的response写下啊。就是这里边这个response。它就是你这个请求之后，给你返回那个数据，这response就是我们返回的数据啊，所以咱现在这么来做，那这个咱们为了一会儿明显，我先给大家做个输出，咱来一个conso.log，我把这个response咱给他就输出一下啊。重一下，为了明显，我给他加上一个星号啊，为咱们看的更清楚，所以这样的话，这个请求的部分我们就初步做到了，就是。这么一个结构啊，通过阿贾克斯发送get请求，请求我们这个文件，然后文件反应数据，咱在点赞中用response得到，如果有异常，在开始中有它的异常信息啊，这是一个基本结构，然后这个写完之后给大家说明啊。

因为咱们现在这页面中呢，我们有方法，当然各位应该都知道啊，不管你是在Java中还是在Java中，咱的方法最终是不是要调用才能执行啊，如果你这么写，这方法不会执行，所以咱要调用，怎么调用呢？就是这里边写到在create里边，咱一般都是调方法，那怎么调加一个叫this，表示你当前这个页面这个位置啊，或者当前这么一个部分啊，就wee这个对象部分，然后写个this，点上这个方法叫get。User list，这样的话就可以去调这个方法，因为这个方法咱昨天说到过，在你页面渲染之前执行，就你页面数据还没有显示的时候，它会执行，所以它先执行，然后才会调这个数据啊，所以咱们create里边调这个方法。

这就是一个基本结构啊，所以咱们把它就初步做到了啊。这么一个过程啊，咱再说一遍，然后再来看一下这个效果，看它返回是什么啊，它的做法就是第一个date中定一个变量初始值，咱现在定一个就是空的一个数组，第二个麦中写方法，发送阿贾克斯的get请求，这写上你请求的路径就是你接口路径或者文件路径，然后点赞成功，Response就是反应数据挨着开始失败，最后在可以里边调的方法，如果你不调用这方法肯定不会自动执行，咱需要做个调用，因为created在页面渲染之前会执行这方法，用调到调的方式写一个叫这次点方名字，这次代表当前voe的一个对象啊，能调到里边的这个方法。所以这个我们就最终做到了啊，就是这么一个基本的一个结构啊。

所以大家啊，把这个给他一会儿给他好好去练一练啊，咱后面都是这么来写啊，用这种方式做到。这个啊，我们就做到了啊，然后做到之后咱下面啊，把这个就是执行一下，看一下它的结果是什么样的啊，我们来执行一下啊看结果。比如现在我到里边用浏览器打开。然后打开之后我点F12。啊，打开里边啊，找到console。大家看啊，这里边应该有它那个具体的一个输出啊，这值应该是有一个输出啊，它就是把这个做了输出，但是它目前默认输出的应该是因为它是一个对象嘛，啊，就object这么一种形式，所以证明啊，这个应该是已经能够执行到了啊，就是棒应该能做一个具体的输出。所以咱们啊，把这个我们就做了这么一个最基本的一个说明啊，一个结构，各位的记住啊。

好，我先啊。