16. 尚硅谷_mpVue_Flyio库前后台交互.avi原创

好，我们继续，那么上节课呢，我们把基本结构打好了，那其实剩下呢，我们只需要发送请求，拿到数据是把动态的去，哎，填充这个数据就可以了，OK，那这是一个事儿，那么发送请求的地址呢，哎，我呢可以把这个我们之前用这个地址呢给他拿过来，拿过来地址呢，我呢。放到这里。好，那这个地址呢，是呃，网上一个人，他去把豆瓣那个地址，然后呢，咱们只需要用这个就了，用这个就OK，好地址有了，接下来我们要去发请求，哎，要去发请求。那么要去发起球的话，应该是什么？应该是越早越好，对吧？哎，所以呢，我可以在这在方mount里边去发，那首先我们用微信提供的API能发，哎能发没有问题，但是呢，我在这儿呢，要讲一个事情啊，还记不记得我们之前使用一个库叫X，哎，这个在view里边呢，应用较为广泛，但是呢，这个X在这呢，哎，我测了一下啊，我测了一下。

X在小程序里面不能用，不能用啊，这是我要和大家说的，呃，因为它会报这个错，哎差因为X底层是不是分装的，我们原生的那个那个就l http request这个对象啊，但是呢，在这儿呢，它会报错，哎说它is not a constructor，为什么会报这个错呢？首先你得知道这个属性是谁的。是window的，那么window这个对象，它存活于我们浏览器的环境，而在小程序的环境里边是没有问到这个对象的，所以你也不能使用它。哎，注意那不能用它呢，我想给大家去推荐一个库叫fly IO，哎，这儿呢也有它的一个教程，我们可以呢去访问一下好。

那这个FLYL呢，这是它github上面的一个哎地址，首先我们可以来看一下啊，它浏览器的哎支持程度，以及其他平台的支持程度，那么在这儿呢，就有一个小程序，哎下面呢，有它的教程，哎首先第一步我们要使用，哎，那不用说了，咱应该去干嘛，应该去安装一下，我在这儿呢，我再去添加一个，好去装这个库。那么装完了，其实他还告诉你用什么用什么，因为我们是工程化的项目，我是不是用的n PM install去安装的呀，然后下边是引入，哎引入的话它其实也分了很多，哎这呢，第二个就是告你在小程序中如何去引入，但是呢，我发现他这有点怪啊，这是require，那你看我们在项目里边咱用的都是什么？哎，我们用的都是什么import，哎，也就ES6这种模块化语法，而这个require呢，它是属于common GS这个模块化，哎在这儿呢，我们可以不用这一种啊，不用这一种。

来，呃，这儿还在安装，那这个时候呢，我再说一个事情，为了我们在任何的这个V的组件都能用，我会哎像store对象一样，把那个FLYL呢，放到这一块，放到它的原型上，那这样的话，咱们的实例对象是不是都可以去使用了呀，哎，都可以去使用了，哎这个安装呢，好像稍微有点卡啊，有点卡我们接着往下来看啊，这引入了以后，你别忘了，这你得去new这个FLY，并且呢，它有一个特点啊，没加这。生成这么一个实例啊，那再往下，这有个例子，哎，如何发请求，就实例对象点get，这是么？我们的地址呀，然后点认呢，点catch，那这个呢和X剩下的东西，哎是不是就一样了，哎就一样了，好。

呃，我们还得稍微等一下啊，这稍微有点卡，稍微有点卡，那在他这儿，哎等的过程中呢，我们可以在这儿呢去写一下，首先呢，你可以在这呢去import什么，哎，这个fly from，我们马上下了个fly I，然后呢，我要做一个事情是什么呢？先生成它的实例，对吧？Let一个FLY等于另一个fly OK，那接下来呢，我们去把它呢，哎，放到。我们的原型上唯有点pro.Dollar符，这你起啥都行啊，等于FLY。好，那这样的话呢，我们应该只要说他下完了，哎，我们就能用就能用。

诶，那这个时候大家看一下它这儿是不是已经下载完了，好，那这边下载完了以后呢，我们把这个控制台这一块呢，来关掉它，关掉它，然后呢，来来到我们当前这个movie这。那在这我们要去发请求，我们现在是不是要使用这个FLY啊，怎么去发呢？我们得通过raise点我们刚刚设置的它，哎，它是不是有个get方法在这呢，把这个地址扔进来，那么下边写的内容呢，哎，其实就是。这一堆对吧，好，那把这个拎过来，那接下来我们去测一把，哎，是不是这样的，好，那这个时候呢，来到这一块。呃，来把这个听一下，我们再编译一下，看一下他报什么错，首先他说什么fly all is not constructor，那应该是哪的问题呢？应该是我们这个，我们看下边这儿不是这个实例吗？哎，那个实例呢，我们已经放到哪了，已经放到了我们这个最开始，哎，放到了这个原型上。

放到了这个原型上，那么放到这个原型上的话，应该是没有什么问题才对，哎，那其实是哪出了问题呢？我们来看一下这一块。Fly IO，哎，我们是不是就引了一个他呀？哎，这个时候我想起一个问题啊，我想一个问题大家可以看一下，在小程序这，他告诉我们这一步才是关键，那也就是说我现在引入的时候，我是不是指引了它，哎，不够啊，不够，我们把它加上来再去看一下，哎，再去看一下，那这个时候呢，你会发现刚刚报错的内容不一样了。哎，至于说为什么出现这个问题，咱是吧，之前也讲过呀，就是小程序为了安全考虑，他要求你发送的请求呢，都是HTTPS请求，而我们现在发这个是不HTTP请求啊，所以呢，他在检测的时候认为我们不合法，那实际开发当中你还是去发什么请求，好HTPS，那在这呢，我们可以干嘛呢？让他不去，哎，校验这个是否安全，那这个时候呢，大家看我的请求已经发送成功，并且拿到了数据，只不过这儿是不是有一个警告呀？好，那这个时候我们看一下我们的数据在哪呢？这有data data下边是不是有个subjects啊。

那也就是说在这这个response，我先写一个let一个哎，等于什么response，点下边它有个叫sub，呃，应该是它subs，哎，我们看一下是不是。

Data塔下边的啊，首先response下边data subject，哎，那这个呢，就是我们要的那个数组，好，那现在其实我们已经成功了，拿到了这个数组，那这个数组有了以后，我们，哎可以干什么事情啊，我们是不是就可以在页面便利了？好那为了便于便利呢，我可以这样去写data，我们先去初始化一个状态，然后呢，Return的一个对象，那么在这儿呢，Movies，诶。它初始化呢，应该为什么为空触组，那在这儿我们要做的一个操作点它。Movies。等于谁呢？是不是等于它就可以啊，那接下来我们去遍利谁遍利这个movie是不是就可以v for，哎，呃，BA，那我们这写一下item index啊，然后呢，In in什么什么in它呀，那其他的不需要动，按理成功的话，他应该是哎有哎这报了个错，是movie away。

Of under find，那我们来看一下是哪的问题呢？是那十有八九是这取错了，哎，十有八九呢，是这儿取错了，我们这儿move array，这没问题，我们可以让它成为同一个，哎，同一个你包括这儿呢，这是不是也是同一个啊好，那重点呢，是。这儿的问题，但是这儿的问题。我们可以去干嘛，去做一件事情，Conslo，哎，这个R我们来看一下啊，来看一下，好，Conslo moviesr，这是一个。数组。对吧，这是一个数组没有问题，那数组没有问题，我这一更新为什么会出错呢？哎，有同学想到了race的问题，我这是不是使用了个race啊，那你在这如果是用常规函数去写的话，哎，它这个race。

那这个点认的意思是不是应该是一个promise对象的实例才对啊，所以呢，在这呢，我们统一的给它换成什么，换成借头函数，哎是不是就可以，那那既然要换，把这个呢，也给它换掉CTRLS1保存我们来看。哎，大家看那这个是不是已经出来了，那剩下的就是我们需要把呃里边的这些东西呢，换成什么，换成哎动态的句型，那在这儿呢，应该是item点。点什么呢？因为在这儿不好看啊，不方便，我呢会去哪看呢，把这个地址拿走，我们可以让浏览器去发这个请求，然后呢看一下。好，我们现在要找的是。

那个图片，哎，要找的是图片对吧，那这个图片在哪呢？我们往下来看一下，哎，下边应该有一个叫images，这有个large啊，有个large就是那个大图，好，那这个时候在这呢，我们可以这样去写。Images下边的他，那前边是不是要加一个他，好，那接下来这个是名字，那在这呢，我直接呃先写个他，然后呢，我们再来这边来去看要找这个，呃，这应该是电影的名字，对吧。那最直观的我们可以看下边那个找霸王别姬，哎，找霸王别姬那是不是应该是这个东西啊，好把这个东西拎过来，下边年份，那这呢也是item点，哎，我这呢，我直接就写了是个页，好那再往下写item点点什么呀？呃，这一把要找导演，导演的话这有个director，但是呢，大家要注意啊，这个director是个复数，而且它对应什么一个数组。

那你说意味着什么？啊，意味着其实一部电影有多个导演，什么导演副导演啊，乱七八糟啊，这个不是咱的重点啊，那这个时候呢，我们在这儿去找一下他好，首先是他，他是一个数组，我们取第一个工厂来说，肯定是什么，肯定是导演，那这是第二内蒙，那最后的一个，我们再换一个，哎，这呢应该是item点，我直接就写了reading.our哎，那这个时候我们来看一下。哎，咱们这个数据是不是已经动态的展现出来了，但这有个问题啊，这个肖申克的救赎，哎，这部经典的电影呢，它这个名字呢太长，导致这儿是不是换行了呀，哎，那这个时候我们要做一个预处理。

我们肯定不能让它换行，然后呢，超出的部分我们还应该用什么点点点代替，哎，那这个找到这个name首先不换行，应该是什么space no，那我们来看。好，这是不是没有换行，但是一有溢出，那这个时候呢，哎，同学立马想到overflow hidden。那这个呢，直接是截取了对吧，还有个text的overflow叫S用点点点代替，好那这个时候这是不是点点点就OK了呀，那这样的话呢，电影列表，哎，这个全部的内容呢，我们已经写完了，好这节课我们就讲到这儿。