35_尚硅谷_Vue_Ajax请求

好。好。下面这。下面就要说我们在view里面如何来跟后台进行通信。嗯，这个地方用到一个技术叫。是叫两个库，一，一个是我们以前学过的access，一个是view的一个插件，叫view resource，但是给大家说明一下，这个呢是用在1.x里面，也就是说现在基本上用的少了。因为我们现在用的view的版本呢，是二点。一点，基本上快被淘汰了，但大家还是要对它有一个了解啊。啊，现在官方推荐的库呢，是access，其实在我们项目里面是不是也用的这个OK。好，这个是resource的一个在线文档啊，这个大家自己下就可以看一看，那我们要用他手机里是吗下载。

好，下载好以后，这里有一个基本的一个编码，等会我们写的时候再跟大家说，如果你用access来也一样，也是需要去把access给他什么下载下来，嗯，是一样的一个意思，来啊在这里下一下。好，下面呢，我们来去写一个小的例子，来说里面的一些语法啊。嗯，这有一个小例子，我们看一下。啊，其实刚才没看到，没看到开头啊，等一下。其实最先呢，大家看一下，最先是一个loading对吧，最先这个loading代表什么。是不是正在请求中啊，等到得到数据后是把数据显示出来。这个地方是从后台获取一个什么数据了，这是根据一个关键字啊，根据，譬如根据这个关键字V去get up上面搜索。

啊，搜索一个什么呢？搜索一个对应的啊，最受欢迎的一个关注量最大的一个库，那个V啊，关注量最大的就是这个view了啊，如果你输了R，那必然是什么啊，就是它还是个链接，点击这个链接会跳转到。它所对应的主页。啊，就是这样的一个简单的一个效果。也就现在是一个异步效果啊，异步效果先有个楼顶啊好。来吧。我们把这个做一个备份，就这一个src啊，做一个备份啊，应该是to do2了吧。因为有一了嘛，那下一个二好来看着把这一些。把这些，把这个样式都给他看啊。看好。

这是这个给它删掉啊，这是一个基本的一个结构，我们的APP里面。那也就是说现在我们要去在APP里面去做一些事情，把这些没用的都给他干了。啊，来一个div。把它去掉啊。啊，这个script也可以去掉啊，就是太多了。有一个基本的结构就行啊。嗯，好，现在呢，我们就在这个组件里面去实现刚才我们想要的这个效果。好，我们的页面实际上是不是有两个状态啊，一个是loading的显示，一个是这个的显示。那怎么去做呢？大家看着啊。那实际上我们这个地方可以这么说，可以有两个div。啊，上面这个div可以显示那个，而下面这个显示的是什么？Most star啊，来把它写一下most star report啊。

ISIS谁，哎，这个是个链接是吧，这个是个链接，这个链接的这个文本是不是一个动态值，是一个库的一个名字吧，那我就给他取个名字叫report内仓库的名字。还有一个他是不是有一个。链接是吧，这个链接也是动态的吧，所以我应该先在左边写个什么冒号，接着我们这是仓库的什么呢？Ul。能看到吧，但是啊，最先他们有值吗？还有我们要在date里面是不对他们俩进行初始化来做一下啊对括号大括return开始啊是没有字的，你可以搞空转，你可以把到都行啊，这个也是没有字的。

看到当他没有，当他们没有值的时候，应该选谁去？那这里面应该来个什么？他们俩是不是切换显示的，那我比较好的方式用if else就行。No no，什么时候他显示了。啊，没有值色显示吧，对不对，没有显示怎么表达。去反吗？能看到吧，啊OK，这个吃吧，那这里面写什么就行。因为他们俩切换显示的嘛。没问题吧，没问题好。那下面有个事情，那我们最终还是要去发请求，去获取对应的数据吧，来这个地方就要说啊，有几个是我们在哪发请求。

啊，像这种事情都是在生命周期回调函数里面做，关键我们是不是有三个阶段呢？初始化更新和什么死亡，那我们应该在哪做？啊，好看啊，其实就他好看，你都不用想，就写个monkey的就行。是不是初始化的时候就一上来就应该去发请求啊，啊，我们说过了，这个里面是不是执行义务的操作啊，也就是说这个时候发什么请求，呃，这请求获取什么什么数据。能看懂吧，那发这请求几有问题了，我谁来帮我发呀，是吧，得要对应的库吧？哎，这个时候是不是有两个可以选择的啊，先我们来用一下view resource。这是一个view的插件，那插件的用法是什么用呢？首先在这个入口文件里面给它引入。

啊，先引读一下m input啊，View resource from view resource，我们插件有一个概念叫声明使用，声明使用插件，怎么声明使用插件？View点又是谁，Resource。一旦声明使用，内部会做一个什么事呢？说一下啊，内部会给。VM对象和组件对象添加一个属性，名字叫什么呢？来写一下。多瑙图HTTP，而这一个属性对象，它就有两个方法。一个是get。那另外一个你应该能猜到吧。

也就是说，调用get去发什么get请求，调用post发什么post请求。啊，OK，好，那也就是说我们在这边。可以干嘛去了，Z是点多了福，HTTP点我们当前需要请求的A需要就有一个，是不是有一个URL的问题，有个地址吧，好，这个地址呢，这里准备好了啊。哎，我一共有两个测试接口，我们现在用的第一个。这是get他们提供的一些免费的一些接口。我们来看一下他是干嘛啊，从这个首先来看到他是在去什么搜索，搜索什么搜索什么，是不是搜索仓库啊，我们在给他上创建都是仓库嘛，那接着。

Q等于Q什么意思啊？Query查询，查询的关键字是什么？V答案你也可以写别的是吧？这什么意思？排序按什么排序？按那个关注量排序对不对，肯定是降序，你不用想，必然是降序，能不懂啊，OK，这个啊，就是按关注量进行降序排列，那也就是说我要得到关注量最大的，实际上取数组的第一个。啊，是不是第一个，也就下面为零的那个，这个里面你看他是说明什么。是不是搜索的是所有匹配的呀，啊OK，这个排序很关键，要排序不行必须得排序。好，那这一个啊，这个有好以后下面点什么。传一个什么。好，他的编码风格是一个什么风格呢？给大家说是promise风格，也就是说他返回的就是一个promise下面干嘛，是不是点认了，那点认之后是不是可以传两个回调函数。

一个是成功的是吧，另外一个什么失败的啊，大家可以看一下它这个里面啊，都有去写啊。大家可以参照的去做就行，其实就是两个回调函数嘛，一个是这个。这成功了吧，下面应该是什么失败了啊，这以前做过类似的事情啊啊，也来一个response。对吧，好，那我怎么知道他返回的数据是一个什么情况呢？我要得到返回的响应数据，我应该怎么做，我要得到一个应的结果，Response好了，点data，其实access是不是就是点data，就是点data好，到底data是个什么结果呢？你说对造的是个什么结构，看什么呢？啊，你得去反问一下。

啊，不用这个啊，用这个来看一下走底。我天，这速度有点慢了。就等了半天就返回这么点东西来了，大家看呢，总共匹配量是多少？我的天一百十八万七千多，主要是我现在写的是一个写的是一个V，那匹配的太多了，对不对。看到不，譬如说我再加一个U是吧，其实你们看啊，第一个啊，第一个看到这里啊，我们看一下第一个是谁啊，是不是啊B还是啊。来看一下我们用用用vu了。你看我写的越多，是不是匹配的越快啊，返回的越快，为什么？因为你想后台他要查询吗？你查询的数量少了，当然快了，真的不但现在我们依然是谁。

View。好，那有了这一个，有了这个数据后，我现在问大家我。需要从中怎么取数据，也就是说现在我是不是成功了，对吧，成功得到结果以后是不是要更新数据，更新这两个数据啊好，这个数据瑞点它等于什么呢。首先你要从result取到什么it，从it里面取出第一个元素吧，也就说前面先得做一个事情得到啊第一个什么那个叫。或者most啊，得到最受欢迎的，对吧，最受欢迎。

好，那这个怎么做呢，来看呢，Most report等于。Result。好，什么属性名，看着。It接着第几个下面为零的对不对？好，这个我的这个仓库的ul是不是在这个对象里面，关键是点什么属性，我得去看一下，其实他是这个看到了吗？就这个，那所以我在这里给他吧，还有一个。这个。是不叫？也是一样啊，Most report看一下。就那吧，可以吧。不就是这个吗？没问题是吧，好。可以是吧，那可以后下面啊，再一个事情就是有可能是不是失败啊，这面我先简单弄一下，我就打印就一下请求什么呢失败。

OK吧，OK好，现在我们就来看一下啊，看一下行不行。这个是我的吗？应该是我的吧，先有个什么no，接着它是不是有一个most star report is view是吧，接着我点过去，应该是不是会跳转到。它的主页面了可以吗？啊可以，当然你有可能，譬如说举个例子，我这边擦了一下不要心是吧。是不是写错了呀，写错了能成功吗？不能，按来说是不能的，对不对来。等一下啊。诶，我应该刷新一下。楼是吧。看到过，是不是失败了啊，就这么个事啊，注意的。

好，这是我们对它的一个基本使用，当然我们现在用的是view resource是吧？那当然我们也可以用另外库啊叫什么。用我在哪用在哪引入吧，引入from的用法和这个是什么很类似的啊，很类似。啊，下面啊，下面我们来去写一下，是使用access发送什么请求，是呃请求请求怎么做点get出ul点。其实你你跟这个一样的，把这个拿过来。能看到吧，而且那个失败的可以用另外一种表达，用吧，用过，只是他这里面是一个东西叫什么I啊I来箭头啊，这个地方我也先暂时简单的搞一下啊，就一下。

好，我这里面写个这个，好，我把他们把这第一个给大家注意一下啊。能看到吧，好。来现在呢，我们肯定是失败的，对不对，能看到吧，现在失败的啊，好，但是呢，我们要把它改成什么。是不是这个啊酸新加。来好了吗？是好了。嗯，这样是没有任何问的出来了吧。可以啊。比较简单。其实跟我们用也类似啊，里面有很多代码基本上是类似。好，这是关于它的一个基本使用啊，下面我。