00:00
大家好,这节课我们继续来完成我们这个todo历史的,那上节课呢,我们把这个列表已经完成了,但是这个数据是我们在这里写死的,那这节课我们主要的任务就是哎,去使用API动态的去请求这些数据,哎,但是我们没有呃后端的API,所以我们就使用这个Mo来模拟后端的这个数据的一个返回啊,那要使用Mo呢,首先我们得去。嗯,把这先折叠一下,再去这个Mo里面,我们来新建一个Mo。来这些是我们之前创建的,我们先不用管,那我们新建一个。TODo.TS然后呃,Mo的这个格式我们去默认暴露一个对象,哎,K就是我们的请求方式和请求API的一个地址,Value就是我们返回的一个值,那我们来定义一个get。API,嗯。To do。
01:04
就定义这样一个地址啊,接下来我们返回的值。嗯,直接复制我们之前这里写好的这个值啊。啊,嗯,可以再给他加几条。再加三条吧,四。567。嗯,把我们的这个总结。放到最后,然后这里再加上一个删除啊,以及搜索呀,啊这些都是随便写的啊嗯,那状态哎,就这样吧。啊,这个慕课我们就定义完了啊,那接下来。我们得去service里面。这个啊,Service里面去创建我们请求API相关的一些。哎,文件啊,那我们todo呢,我们就建一个todo文件。
02:01
点KS。啊,这个慕只是为了让就这个模拟数据用的,那我们真正所有的设计请求的,哎,和后端API打交道的地方,我们都放到这个service里面。因为这个里面的话,会有很多的一个方法,那比如说列表啊,添加修改等等等等,所以这个我们就不用默认暴露,我们分别暴露啊export。嗯,在报露之前呢,我们再想一想,嗯,这里面我们要和服务端去打交道,需要发起这个请求,对吧?所以需要用到这个request,我提前把这个request给导入进来,嗯,从我们这个us这个request导入,因为这个呃,Us的request,这个request是我们我们自己封装过的啊,自己处理过的,我们还写了一些拦截器,对吧?啊,所以我们使用这个request来接着分别暴露一个port cost,一个get。Get todo list啊,这样一个方法,A soync,我们使用这样的一个业务的一个方式。
03:07
接下来哎,直接return request,那如果是get请求呢,我们可以直接写写我们的请求地址就可以了,好,那请求地址呢,就是我们这边刚才定义的这个地址。因为只是一个简简单单的一个get请求,所以呃,我们也没有做搜索这个参数我们就先不要了,那直接发起这个请求,最后把我们的请求返回出去就可以了啊,把知识写一写啊,获取所有的。土类。啊,那接下来呢,我们这个方法已经有了,也就是说我们调用这个方法就会发起这个请求,那请求的这个地址呢,是它就会走到我们慕模拟的这个数模拟的这里,然后就会得到这个数据啊当然如果有真实的后端的API的话,我们就嗯就不再使用这个慕,那现在没有,我们就使用这个慕来模拟数据,那在这哪里去调用这个呢。
04:03
嗯,肯定是在用到数据的地方,也就是说这里是我们定义死的,对吧,那我们现在啊,不想把它定义死,我们要去请求获取这个数据,嗯,所以呢。我们在哪里去写这个date呢?来请求这个date呢,哎,我们在这个组件里面。嗯,提前去定义一个date啊。用来定义啊。Let,一个date,因为后面我们要去修改它的这个数据,好,现在我们先定一个空的一个date那。这个时候我们需要去发起这个请求,去获取这个数据,并且去修改这个data。一般我们在哪去发起这个请求呢?因为请求它是一个一个异步的,对吧,它会有一些影响,会有一些副作用,所以我们在这个副作用里面,也是在生命周期里面去完成这个请求,那这个是函数式的一个组件,那要使用生命周期的话,我们必须得使用这个。嗯,Effect啊,Use effect,我们把这个东西引入进来之后啊,在这里使用use effect啊,它里面是一个函数啊函数,那我把第二个参数给上,第二个参数如果你不给上的话。
05:15
你呃,组件的更新也会触发它,那我们给上第二个参数,就只有在第一次他去渲染的时候才会触发它。就是挂在前触发它一次,好,我们在这里面,呃,去就是调用我们的这个接口去获取这个数据啊,那date等于。哎,我们的这个get todo例的这个接口啊,这个方法,那这个方法现在没有,所以我们要从上面把它给暴露出来,用的是分别暴露啊from,呃,应该是我们的这个service里面,里面的todo,好暴露出来这个方法之后呢啊,在这执行这个方法,获取到这个方法啊,这个方法返回一个请求,请求呢之后会拿到这个数据啊,最后给到这个data啊。
06:01
但是啊。有一个问题啊,我们这个网络请求,它会有这么时间的一个开销,对吧,而且这个生命周期呢,是在组件,就是挂载完毕之后,它才会执行,那组件已经挂载完了,表格已经渲染了,这时候我们再去拿到这个数据。所以说啊,它应该是不会显示的啊,那我们来验证一下看看啊。来刷新一下。可以看到啊,数据并没有出来对吧?啊,这就是我刚才说的这个问题啊,它是在这个,呃,我们的这个组件render之后,它才去执行的啊,并且它网络启求还一定时间,那时候表格已经渲染完了,这时候data改变并没有引起组件程序渲染,那么我们知道想要引起组件程序渲染怎么办?我们是不是可以把这个date放到这个。啊。状态中放到组件状态中,是不是它就可以去状态的改变就可以引起组件的数据渲染对不对?但是我们函数的组件你要使用状态还得用一个。
07:01
Use state。我们在这里啊,就不用这个let去定义了,我们直接定义一个date,一个set data啊,那从哪个里面去结构出来呢?从这个嗯,用the state里面,咱们可以给一个初始值,那么初始值给一个空。就是空数组啊,这时候我们在这里去获取到我们的这个,呃,Res data就是服务器返回的这个数据,之后我们调用set对的方法去更新这个状态啊。Date来,呃,Res date。A ta。好。嗯,这个没有定义上定一个,看来定义一下这个数据。这时候我们来看一看啊,我们从这个里面去获取到这个数据之后。从那个层次里面获取了数据之后,然后把这个数据啊,使用这个set date啊,这是个括号,这个写错了啊。
08:05
调用set data的方法来去更新我们定义的这个date这个状态,那状态的改变就会引起组件存渲染,这时候表格我们就会得到这个结果,对吧?好,那我们来验证一下啊。实现。啊,报错了啊。不仅报错了,还没有数据,这是为什么?It is not a function,那说明哪地方肯定有问题,什么地方有问题呢?就是我们的这个is date,它会有问题,我们来打印一下看一看啊。嗯,先把它清空一下再刷新啊。啊,注意你看我打印出来的这个这个。I,它是什么?它是一个喷Ding状态的一个promise对不对,所以我们这边你直接把一个喷Ding状态promise,你去给这个data去设置啊,然后并且这边你再遍离这个data,那肯定是会出问题的,对吧?啊这个是怎么回事,这还是。
09:02
我们之前讲过的,你get todo的。他发送网络请求啊,它会有一个异步的一个操作,就是它会有一个时间内开销,并且。呃,他使的是这个fat,然后返回的结果呢,也是这个。呃,是这个promise,所以我们想要拿到数据呢,你可以有两种方式,一种是使用这个点Z,我们在Z里面去获取这个数据啊,大概是这种啊,一种是点认,哎,我们在Z里面去拿到这个数据,然后在这里面去进行设置,这是一种方式,但是呃,有些候这么写的话,我们会不断的去,呃。嵌套,嵌套就比较麻烦,所以推荐大家使用另外一种解决方案,那什么方案呢?就是我们给这个函数加上一个think啊,为什么要加它,加他我是为了写在个A,因为A外的话,它必须得写在一个a think e的函数里面,对不对?好,那加上A外之后,哎,这个时候我们就可以,哎,等它执行完成之后才会执行它啊,他会等待一个就是说promise reject的一个结果,好这时候我们再来看一下。
10:04
来刷新。好数据是不是就有了啊,这个错我们先不管它啊,这是我们有一个东西没有设置唯一的K。那结果是不是就有了?清楚了吧,啊,其实我完全可以一步到位给大家,哎,直接写到最终的一个答案,但是我想一点点引导大家,为什么要这样啊,为什么会出错?清楚了吧,嗯,一定要注意这个请求,它返回的这个promise,你如果直接去设置的话,肯定会有问题,对吧,你要么是使用呃点Z这种,呃这个promise链式调用,你去在那个Z里面去处理它的结果,要么我们就使用a think加来。处理这种,呃,这个结果好吧,嗯。当然。哎,这是一种思路啊,就是我们非要用这个data source的时候。这样的一种思路,因为电他接受一个data的一个数组,对不对,那实际上那既然是这个网络请求就可以去获取到这个数据的话,那么我这些都可以注释掉,这个属性我也会用的,我们知道表格它还有一个。
11:04
对吧。Request。这个request呢,它里面是可以写一个函数的啊,我们的这个函数,诶,可以在这个里面去发起我们的请求啊,并且获取到我们这样的一个一个数据啊。呃,但是啊,它这个数据呢,你是要给到他的,呃,Date这个字段才可以啊,也就是说我们要把我们获取到的这个数据给到他date这个字段啊。然后它返回的是一个对象,就是我们要把。这个得到的这个数据给到这个date这个字段。清楚了吧?如果不确定呢,我们可以去看一下手册,找一下这个request啊,来找到表格这里,然后我们找到它这个API request这里。它是这个最重要API,可以会接受一个对象啊,对象里面。呃,有这个date和success。
12:03
然后呃,可以去进行手动的一个分页,然后我们直接往下去看它这个方法的这个定义啊,这里已经。嗯,告诉我们了,这个这个方法的一个使用,比如说它这个参数,注意它这个参数。参数呢,可以接收到,你看有分页的信息,有当前的页数,以及我们排序用的一些字段,做这个查询筛选的一些字段,这是我们的参数啊,那接下来看它的返回值,它返回值呢,返回的这里来看它的返回值,返回的是一个对象对吧?那对象里面必须得包含这个date。啊,以及这个。呃,这个success等等等等啊,其实我们只要返回data,它就会有数据。然后这是它的一个例子啊。呃,接下来呃,可以看到它这个例子,他查询这个数据的时候,他还用到了什么,用到了a wait,然后这边配上a think,因为查询数据呢,也会有一个就是。呃,就是说异步的一个操作嘛,啊,我们解决这个异步目前用的比较多的就是使用这个a think和配合啊,啊接着下面是这个request的一个一个介绍,比如他接收的这个参数,然后是嗯,可以有也可以也可以不不给他,就看你用不用,然后最后返回来,只要包含这个test,包含这个date啊,那我们也是这么去写的,对吧,我们把这个获取到这个结果给到这个date属性,然后。
13:21
让它这个对象作为返回值给返回了出去,对吧,那我们因为是这个渐成函数的简写,所以我加了一个小括号,那接下来我们来看一下效果啊,确实是没有,为什么。大家想想这边是不是一个网络请求,一个网络请求。对吧,它是一个异步的操作,我们把这个,呃,之前在这上面也打印过了,对不对。打印过来,然后我们如果直接把这个网络请求给到date的话,那它是一个喷定状态的一个promise,那我们肯定拿不到数据,所以为了解决这种情况,我们把它给加上一个think啊,然后这边加上一个让它诶变成同步的,就是等你拿到数据之后,你再给到这个date。
14:02
清楚了吧,是这么去写的啊,如果我们用request这种方式的话来保存,再看一下效果,刷新一下是不是就有数据了啊,这块大家一定要注意啊,一定要特别特别小心网络请求的地方,你一定要记住它是一个一个义务的请求,并且它是返回的是promise。清楚了吧,啊要呃学会去使用这个A和维去呃解决这种网络请求造成的一个异步的一个影响,当然还有其他的解决方案,比如说像呃。之前给大家讲过的,像这个。啊,Nt pro它这个model里面,我们来找找这个model,这个目录model里面,它就使用的是这个,呃,ES6的这个构造器去解决的。呃,生成器去解决的啊,我们来看一个,比如说person这个就是使用的这个星,然后加这个yet这种生成器去解决这个异步的一个问题啊,这也是一种方案啊,大家看用哪个比较熟练啊都可以啊,其实推荐大家使用这个think和维特啊,这样看起来啊,还是比较比较简洁的。
15:00
那这节课我们就把之前的静态数据,然后使用这个Mo GS进行了数据的一个模拟啊,并且在这个service里面,我们建了一个TODo.TS去获取我们的呃,所有的这个todo list,对吧,最后在。我们的首页啊,就是我们的列表页去,哎使用了两种方式给他展示,两种方式去获取这个数据,一种还是基于这个data source这个属性,那我们就必须得拿到这个date,并且在我们拿到数据之后,还要能引起组件从渲染,那我们就得基于这个状态去管理,对吧?那还有一种是比较简单的,我们直接使用request这个属性,那直接放一个请求过来,他拿到这个数据,哎,就可以直接去完成这个表格的一个渲染。啊,那这是这一节课,我们先到这里。
我来说两句