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

刚才呢，咱们把结构写完了，然后下面做什么呢？我强调啊，因为咱们现在response得到的就应该是这本数据，但是我最终目的是什么呢？我想把里面的这些值得到，然后在页面中做显示，因为这些都是一些提示信息，但要得到的应该是item中的这个值，就是Lucy Mary，杰克。所以最后我做这个事情，把这些值得到，然后在页面中做个显示。那咱看该怎么得到啊，给大家来说一下啊。首先第一个咱注意啊，Response里边有咱们的所有数据。而里边到底是什么，咱看一下啊，第一次我有信号，我把信号去掉了，看的更准确，咱看这里边刷新。我看这里边这个值，呃，没我先还是先给他输出啊，不输出就没有了。咱先输出啊，然后看下这个到底是什么样的啊，大家看啊，这是response，它这个值就是咱们在这里边这位置是什么，那咱们把这个点开，各位看一下啊，大家看啊，在这里边呢，你会发现啊，有很多的信息，因为这些信息中的包含你的响应中的所有信息，大家知道HTP中有请求响应，这里边把响信息都得到了，比如说咱们看几个大家熟悉的啊，你看这个。

Status status是不是200就是状态满200，然后这角OK就是你成功，但是咱现在要得到数据怎么看呢？大家看这位置你看啊就这里。这个地方。在这个地方大家看到它是不是有个叫date，所以咱的数据是在这里边，然后再把date点开，你看里边啊，有这个扣的是2万set处matter成功，而这些值我们会发现是不是就是咱们刚才的这些东西啊，就是这个真正我们的数据是在你返回到date里边，然后你看啊，在date里边它还有一个date，这date中有个it，而这个具体的it里边是不是才是我们的内容啊，所以大家就会看到咱们的具体内容，它是在这个位置。

给大家啊，我特别标注一下啊，首先这里边有一个。Date，然后date中的又有一个date在这里边有个叫it，咱的数据是最终是在这个位置啊，这是咱们数据的这个位置，所以咱要想办法把这个数据给它得到。啊，这是啊，我们看到这个结果，那这个该怎么得到，我们来说一下啊，该怎么实现。首先啊，我希望各位能想到这种特点啊，第一个呢，咱就看这个数据，我刚才说到啊，这次数据嘛，是不是就k value，这是K，这是VALUE6这是K，这是value，那比如说我想得到数据这个K，再点上这就是date，再点上items得到是不是这内容啊，就是根据K得到value表，但是你看啊，它的反应数据中大看这结构中这整体部分叫response，但是我现在比如说我想得到里边这个items里边这个内容，那怎么得到。

希望各位能看懂啊，那咱是不是写一个就是response整体部分，点上一个date，再点上第二个date，再点上it得到是不是你的数据，你就看这个层级结构，第一个date是咱要点的，然后它里边还有第二个date，咱要date，点上date，再点上一个叫it，是不是这么一个结构。当我们这么写之后，这里边数据就可以得到啊，所以这是它一个写法，就是它里边有多层的关系，咱需要date.data再点items得到里面的内容啊，这是它的这么一个特点，就是根据K得到里面这个值。那咱来写一下啊，来到代码中怎么做呢？这我先注掉啊。

我们的做法就是写一个response，这代表我们返回到就是整体的结构叫response，那我们现在就是点上一个date。这date是什么呢？就是里边的第一个date啊，把这点，然后这中的还有第二个date，咱们继续再点上一个date，然后这个date点完之后得到就是它在这date中还有一个叫it，咱再点上。这个叫。It。而这个item里边就是咱们那个具体内容啊，就是那个里边的就是数组中的三个对象，把这数组我们就得到啊，这是它的一个写法，只要这个值各位都知道啊，或者说各位一会儿自己在测试中，你把这输出看一下里面这个值。然后这个得到之后，咱数据有了，当然数据得到之后，因为咱们最开始在这位置，我是不是写了一个变量，所以咱Y值就赋值给这个变量就可以了，怎么赋值，按照我们说的啊，你需要加上一个叫this，代表当前V对象，点上这个叫user list，然后等于啊把那个去掉response这个值，这就表示把你的值赋值给这个user list啊，是咱们这个空的这个数组。

这一步就得到了啊。我写一下啊。这里边就是。通过response获取你具体那个数据。然后把数据就是负值。给我们那个定义的那个空的这个数组。这样的话就可以了啊，然后这个做到之后，比如咱们最后测试一下，我们做一个输出。conso.log输出的就是这个叫这点右侧list啊，咱看这结果是不是咱们想得到那个结果，最后啊，咱来试一下啊。我把这个呃到里边，我直接。

刷新。然后大家看啊，这是它反数据，而这些数据咱们清晰的看到，是不是这个瑞三，就是咱们那个数组部分啊，就是里边这些值，这个我们就最终得到了，比如说Lucy啊，什么Mary，什么杰克。里边啊都有。所以这是关于我们写的axf代码啊，它就是这么来做啊，主要这个结构这个位给他好去看一看啊，比如能给他写出来啊，因为咱后面都这么来做。所以完成了啊，然后这个完成之后，就是现在在我们的user list中数据应该就有了，那我最后想把user例子中的数据在页面中，我想做个显示啊，最后咱就做个显示。写一下啊，咱就把这个user list这个数组里边的数据给它进行一个显示。比如说现在当你执行之后，一赋值，这里边就不是空了，它就有咱们那个数组那个值了，那最后想把数中的值做个显示。

那这怎么做？我觉得各位应该知道啊，咱们刚才回顾过，昨天也讲到过。咱看一下啊，也算回顾一下，昨天咱们在讲的内容中呢，有这么一个地方，就是在voe中的最后一个。大家看啊，就是VE中的最后一个指令，它叫做V-for v-for是不是循环指令，然后指令中你注意啊。昨天咱的数据，这数据是不是写固定的，而我们现在数据你发现跟这个是不是一模一样，你看啊，这数据是不是一模一样，只说我们现在的数据是咱们通过请求得到的，但是本质上跟这个一样的，所以咱们现在做法就是跟这个做法是相同的，把这数组用V-for变例是不是就可以了啊，这就是我们的最终的显示方式，用VE的指令v for，把这个就是数组做个变就可以做到。

啊，写一下啊，使用这个V-for这么一个指令，那咱们最后给他就写一下啊呃，为了方便我就写个div了啊，然后在div里边，我们现在加上一个指令，咱昨天说那个叫。V杠。怎么写，咱再看一遍啊，要各位记住啊，它的希望就是这是你便利的数组，然后加个音，前面加上每次便利名字，或者说可以在多个索引，然后用它差值表达式取里边的各种值啊，我们就是这么来做，那当来最终写下啊。首先这个名字叫user list，然后里边加个音，每次遍利之后是个user对象，在这里边我们用这个差值表示取它的值啊，就是user点上name user点上A。啊，给它最终取一下啊，这是name。为了明显我加个横线啊u.H。

所以这样的话，这个数据咱们在里边就能够显示出来啊，它就是这么来做啊，就是用个V-four做个便利就可以了。是咱们昨天讲到的啊，所以今天马上呢就用到了。所以大家法律知道啊。然后现在这个过程我们就完成了啊，最后我把它执行一下，咱看一下最终的结果啊，看到最后。大家看页面中Lucy mary2034时是不是想出来了，而这过程中就是咱们通过发送请求得到数据，然后把数据在页面中最终做的显示，啊，这是我们就是最终完整这个代码。啊，所以大家啊，把这结构给它要牢牢记住啊，特别是里边的。这个部分啊。我们做了一个说明。然后就是这个啊，我们最终说完了啊，各位一会儿好给他练练啊，而这个过程中呢，就是各位同学在写的时候呢，之前班上很多同学啊，在写这个代码中经常犯的错误是什么呢？其实大部分都是两种错误，第一个错误就是单词可能写错了啊，各位不要觉得这个说法很轻松，单词写错了你别喜欢这个问题啊。

在就是之前很多班上的同学在遇到前段中，可以说有80%的问题都是单词写错了。这个问题是很常见的，因为前端嘛，它不像后端有时候写错没有提示，而一般什么写错呢？就刚才要举个例子，比如说你这位置写成大写response，这里写成小写response，那这个肯定就不对了，而这个不对的话，比如现在我们一刷新，你看数据肯定没有啊，但是没有的话，比如说我这里边我点那个F12。大家看啊，DF12，你发现里边还没有报错，它没有任何错误信息，但是数据它就没有，那这问题可能就迟疑了，没有报错，我这里边又看不出问题，那是不是我这个电刀问题，有同学说是不是我这个系统有问题，他可能会这么来想注意啊，这就是前端中它不好调制的原因之一，这里边我明明是写错了，但是他没有提示，我经营的时候他还没报错。

但是效果就没有啊，这种问题是很常见的，所以各位写的时候这种字母要注意啊，比如说这里边你写成小写。但是R下面要小写，我建议各位啊，前端代码的时候，你第一次写咱们就是从零开始写，而后面当你写熟练的时候，这里边代码就是能复制，咱尽量复制，比如你写完一个之后，后面都复制，要不然你很容易写错，但是第一次要求各位从零去写啊，都给它写一遍，后面你再复制。这事啊，咱特别说一个问题啊，有的时候就算写错，他没有不会报错，但是效果你又不好找。啊，就是这个各位注意一下啊，就是第一个问题可能同学会遇到的，然后第二个问题是什么呢？就是我这里边你看啊。

我这里写的叫response.date.data.it前面都好说，这it是我在里边写的这个名字，这名字你跟他要对上，因为有的同学啊，他这可能叫Rose，然后他在复制我代码的时候，这叫it，那没对上，这直接取不到啊，你要跟这个一样，或者说你到这里边根据我刚才的方式这么去点，去看看它是什么，根据它写出来。就这些问题各位都注意一下啊，所以咱们现在就把这个AXLS部分我们就最终写完了啊，就这么一个结构代码，我就不截过来了啊，在我这里边。这都写出来了啊。这张图我保存一下啊。这是我们的。第二张图就是AX iOS。他这么一个操作。所以这一部分我们就完成了啊，比如说现在咱把这个在voe中怎么使用AXL发送阿贾克斯请求过程给大家就演示完了，这一部分很重要，咱后面会一直写这个代码，就是每天写计算中这种代码都会写到。

啊，所以大家把这结构给他要熟练啊。