00:00
好的,我们继续啊,那接下来呢,我们去拿一下我们,哎,不同的标签下边的这个动态的数据啊,动态的数据,那首先呢,我们来看一下我们的接口文档啊,那么3.7啊,获取视频标签下对应的视频数据。那么对应的接口地址呢?是这个请求的方式是get,注意这里有一个必选的参数呢,是ID。那么这个ID呢,对应的是video group的ID啊,这个video group呢,其实指的就是我们上边这个导航啊,我们上边的导航,那导航里面每一个导航标签是不是都有自己的ID啊,哎,我们这儿呢,也已经记录了,对应的其实就是这个NAV ID。好,那知道了这个以后呢,我们往下啊,大家看这是这个倍应该是3.7啊。这呢是这个测试的地址来,那现在呢,我们去。测一下这个地址啊,Local host的3000,我们把这个地址呢丢过来,那对应的标签ID呢,我们可以到这里面一个啊58100来把这个一换,那么正在访问之前呢,大家看一下。
01:10
这儿呢有一个注意事项啊,使用这个呢,用户必须要先登录,因为发当前的请求呢,需要携带用户的cookie。哎,需要携带用户的cookie,好的,那么现在呢,你看我一回车啊,我这儿呢,是可以拿到这个数据的啊,对应的视频标签的这个数据呢,就是这个data。那么现在呢,哎,我怎么能拿到呢,那是因为我之前啊,用我浏览器里。用浏览器的URL呢,去发过登录的请求啊,就是当初咱们在讲那个登录对吧,我在这发过,那发过的时候呢,这里边呢,是会浏览器呢,会自动的收集啊,服务器端返回的cookie啊,那再发请求呢,它会自动的携带。哎,这是用浏览器测没有问题,那么接下来呢,我们用编码的形式呢,去看一看啊去看一看。
02:03
好的,那么呃,之前这个呢,是获取这个视频标签的数据啊,这个方法呢,我们已经整完了,对吧,那接下来呢,我们可以啊,再去整一个,那么我们再去诊断呢,是专门去拿什么呀,专门去拿我们那个video,哎,是列表的数据啊,我们再分装一个方法,那这个呢,是获取我们这个视频。来列表数据来,呃,这个呢,就get一个video list吧,是这个方法。嗯,是这个方法,那么首先用这个方法的话啊,我们说了,我们需要一个固定的参数呢,叫什么呀,叫group的ID啊,所以呢,我们这呢,需要你动态的给我传一个参数,你就ID呗。哎,你要用我。嗯,那么你在这里你把调用的时候呢,你应该给我传一下这个ID啊,这个时候呢,我们就是raise.data卡点NAV ID,因为之前呢,我们已经存到了data塔中,那在这儿呢,我们是去获取这个视频。
03:08
列表数据对吧,因为接呃接下来了,我们要发这个义务请求啊,所以呢,这里呢啊,我写一个a think啊没有问题,那么在这个里面来我们写一下let,呃,Video list,嗯,Data吧,等于wa request,那么对应的地址来咱们给它搂过来。就这个呗。OK,听进来那么需要的参数啊,我们还是以对象的形式去给大家写一下ID,那对应的就是我们传进来的。VI。好的,那现在啊,我们先不管别的啊,我们先不管别的,那这个时候呢,我先去给大家把这个拿到的数据打印一下啊,打印下来过来。啊,来到咱的模拟器里面,哎,这个时候来大家看啊,他说我参数错误,参数错误的话说明啥,说明我们这传的不对。
04:00
呃,Na ID呢,我这已经写了。嗯,没有问题。来,我们看一下我们最终传过去的是什么呀。是不是没有给到值呀,ID为空。嗯。呃,Request ID,点点ID。嗯,没有问题啊,就他呗。呃,对应的方法啊,我们看一下我们这的video list呢,呃,在这里那已经调用了啊,没有问题,呃,然后认点data.na ID也传了啊,应该是没有啥问题才对。应该是没有啥问题才对,来,那现在啊,我们我们再看一遍。我刷新一下。过来。嗯,这还是说我参数错误,那这个时候呢,我在这里在这也行吧,或者在这这个上面我呢去打印一下什么点啊data.na ID啊,我们看一眼。过来,那这个时候呢,大家看啊,这为什么呀,啊为空啊,为空是因为什么呢?在为空是因为什么来首先我们在上边。
05:11
Get list,我们在这里是不是发请求去拿这个数据?对吧,在这里发请求去拿这个数据,那这个注意它是个异步函数啊,那这个时候呢,大家看呢,我在这呢,我去在这里认点data塔,点na ID,我给大家打印一下,同时呢,我这标个一一,然后啊在这我这呢标个R来你一看你就懂了,来那这时候过来你会发现呢,我们先打印的是222。先执行是这一行代码,然后才打印这个。啊,那看到这儿呢,那说明啥呀。说明啥,哎,说明当前这个异步函数,它里面是异步任务嘛,那这个函数本身是个异步任务的话呢,非呃,那它就是非阻塞的,非阻塞的话是不是执行的是下边的呀。
06:02
所以啊,在这里呢,其实我们拿到的是它的初始值。哎,是他的初始值。就是空串呗,那这样的话呢,哎,我们知道了这个问题呢,怎么解决它呢,其实也很简单。这里要发请求,我们就判断一下,如果说NAV ID。对吧,啊,我们判断一下,来这样写吧,If。啊,如果说na ID。False来一取法,怎么进来了,那这个时候呢,我们就不让他发请求了。啊,那这一这一把呢,是判断什么啊,判断这个NAV ID为空串的情况。那之后的话有值了以后呢,它肯定不是空串了啊,那个时候呢,肯定为触啊,所以呢,加一个这个判断就OK了,那那这个时候我们再看。刷新一下。嗯,那上来了,这不发请求,不发请求的话,那还比较麻烦啊,因为它初始化。
07:00
在初始化的时候是什么呀?初始化的时候只执行一次。对了吧,哎,On no只执行一次,那no执行一次的话,上来走if的话,是不是进来直接出去了,所以呢,这没有发行球。那之后啊,那即使数据到了,他也不会再次执行了,对不对啊,不会再次执行了,所以呢,我们这发不了请求,那针对于这个情况呢,我们可以怎么去解决它了。那因为在这儿啊,我们拿不到这个数据了,所以呢,接下来我们可以做这样一个操作,大家看。哎,稍等啊,撤销一下,我们这要发请求,是不是必须要保证我们能够拿到na ID啊,所以这的操作呢,我们可以不用放到这啊,我们放到哪放到这个里边,什么时候拿到了导航的标签数据,我们什么时候再去拿对应的列表数据,那这样的话呢,这都可以不用写了。
08:00
不用写了。啊,再说一遍啊,为什么把这个从outad中拿过来了?首先out只执行一次。那么刚才我们在这里如果是判断na ID,哎为空串,我们就不发请求,那会导致什么呀?第一次上来我们的na ID确实是controlt,所以呢,进这个if判断了直接return呢,那之后他就不发请求了吗?哎,要注意啊,那为了解决这个问题呢,我们要保证我们的na ID有值,所以我们把这个行为呢,放到了它的里边啊,放到它之后一定是在拿到na ID之后再去发请求就OK了啊,那这样的话呢,过来我们再看一下。好的,那大家看啊,现在呢,请求是发了,只不过返回的是什么,告诉我们需要登录。啊,为什么呢?那现在呢,我们用编码的形式去发请求的话,注意啊,你是需要携带一个什么cookie的。
09:00
而这个cookie呢,必须是用户当初登录。返回的cookie,那现在呢,我们请求图里面大家看啊,它并没有什么cookie的字段,所以验证不了身份,告诉你需要先去登录。哎,先要知道这个问题,那这样的话。我们在登录的时候,我们就要做一些处理。当初我们在发请求啊,我们来到这个登录界面。当初我们发起就登录成功的时候呢,我们还需要拿到用户的cookie,那这个时候呢,大家看到在这里边,我去给大家打印一下这个result。哎,是它,我们看一下我们当初拿到的值是什么样的。哎,注意我在哪儿打印的,我是不是在登录成功以后呀,没有问题,那这样的话呢,我们就需要转战到登录界面了啊,那这个时候呢,我先把logging。给大家提到上面去,然后来到我们的截面里面,注意看啊,这一把呢,我在这儿。
10:04
去登录一下。OK,来密码一输,嗯,走。好的,那这个时候大家看啊,这是我们当初。来登录成功了以后呢,我们拿到了root结果,那么在这个里面是没有cookie的,哎,Cookie在哪呢。注意啊,这里边没有cookie cookie在哪呢?我们来到我们当初分装请求的,呃,这个功能函数里面。在这里大家别忘了,当初我们为了方便的话,是不是把那些cookie呀,小樱头呀等等的字段过滤掉了,我们直接是把data是吧,通过rob送出去啊啊,那这个时候呢,你看着在这里呢,我去给你打印一下这个res。打印一下res,一看你就懂了,过来我们再去登录一把。嗯,然后呢,输入一下密码。来,走一波。那这个时候大家看啊,上边这个呢,是呃,Request打印的对吧,那我们展开这个里面,你会发现这个data呢,其实就是我们反出去的数据是它,而除了data以外呢,你看啊,还有什么cookies,什么响应头,状态码等等。
11:15
哎,那这个cookies里面我们能看到它是一个数组。看它是一个数组,数组里面对应的哎,有这么些内容。对吧,啊,有这么一些内容啊,那为为了方便的话呢,我给大家把这个啊复制一份啊复制一份呢,我们找个地儿啊,我这儿呢,新建一个test文本。我先给它放到这儿,待会儿呢,我们去看一下这个里面的内容,好的,那这个呢,我们先放到这儿啊,先放到这儿,那现在呢啊,我们知道啊,我们在登录的时候呢,是返给我们cookie的。啊,那这个时候呢,你就要做一个事情了,你登录拿到了cookie,你是不是应该保存起来啊。保存起来的目的是什么?是为了我们在视频页,我们在发请求的时候,我们是不是要携带这个图片。
12:04
哎,那这个时候可以怎么做呢?我们登录成功。我们把用户的cookie先存到本地,然后在视频页也是需要cookie的时候再去读它。那么在这里呢,是能够拿到cookie的地方,注意这个字段,它叫什么叫cookies。对不对,那也就是说res.cookies呢,是我们想要保存的数据,而且呢,我们还得在这个request JS在这里去操作啊。其实本应该呢是在外面操作,但是大家要注意啊,我们之前所有的请求是不是都是直接接收的是res点贝塔的数据啊。那如果说啊,你在外边去操作的话,那这我得把res送送出去,那就比较麻烦了。哎,比较麻烦了,那之前的请求呢,我们都得去改,所以呢,为了方便的话呢,我们就在这操作,那么接下来呢,我们要注意我怎么知道我当前这一次请求是登录请求。
13:05
只有登录请求成功了以后,我们是不是才需要存储我们的顾客呀?哎,有同学说,哎判断URL,哎判断URL,判断URL那肯定能知道是登录请求没有问题啊,但是啊,大家看啊,判断URL的话,你看这个地址呢,比较长。啊,那还有什么方式呢?你看这里我们之前登录的时候是不是要携带这个两个参数,一个是手机号,一个是密码呀,这个时候呢,我给他再带一个参数叫is lock为主。哎,之前我们所有的请求了,都没有带过这个参数,对不对,那现在呢,只有在登录的时候我去携带这个参数。那这个时候呢,来到请求这里啊,注意我去判断一个东西,如果我们参数中的这个is logging为true,那说明啥?说明他是登录请求对吧,但如果他是登录请求来到成功的里面呢?那我去做一个事情啊,将这个。
14:09
嗯,用户的cookie对吧,哎,投入至本地。不就行了吗?哎,怎么从也比较简单啊,微信的set storage,我们来一个think吧,或者说来一个异步都可以啊,都可以啊,这里我们列一下异步的来,那在这呢,我们首先需要一个K,你比如说我们这就叫它,哎,Cookies啊,对应的贝塔呢,那就是res点。Cookies呗。对了吧,哎,没有问题啊,Re,点儿cookies。好了,那么现在啊,我们将这个去从到。本地了,那这些打印呢,我就给他删了啊,包括说我们登录这儿的打印啊,我们也先不要了。好,那我们再确认一下来过来。来到sorry。现在本地是没有cookie的,这个UR infer呢,是之前我们说登录成功。
15:05
以后。那登录成功以后你看啊,现在我们在这个里边,那我们之前呢,说是登录成功,我们做了一件什么事情,我们是不是要跳转到个人中心啊,啊这个幼儿一会呢,我先给它删掉吧,这之前呢来。我们重新编译一下。过来。不早。来,我们去登录一下,走你。来,那这个时候大家看啊,Cookies go iner是不是都存进来了,You iner呢,是我们之前存的对不对,那现在呢,我们又把什么呀,把这个嗯。不在这儿。Cookies是不是也存到本地了啊?连同之前的u in,我们全部给它丢进来,没有问题。那么现在本地有了这个cookie,我们可以干嘛呢?来到request,那么之后再发请求的话呢,我们是需要设置一个请求头,因为我们要携带cookie,携带cookie,那么里边的字段呢,也比较简单啊,那对应的呢,其实就是一个cookie的字段呗。
16:13
哎,就是一个cookie的字段。嗯,那这个时候呢,这怎么设来,首先呢,我们这儿要写一个cookie。嗯,对应的内容呢,我们应该要从本地去读,那就是微信点get storage,那这一版呢,因为在这读啊,你要用最好是用同步。因为同步读到了它再往下解析啊,保证能不出问题,而我们要读的字段。是cookies。注意当初我们从的时候,我们从进去的是什么呀?嗯,来到request啊,就在这呢,是一个对象。对吧,原生GS的数组嘛,那这个时候呢,哎,我们读出来的也应该是一个数组。拿到了数组以后。你要注意,那么这个数组里面,这个时候大家看一下。
17:05
这不下标0123吗?啊,他这比较坑的是这个啊,它有好几个cookie,这一位呢,这是网易云乐的真实接口啊,那后来我测了,我们只需要这个cookie就够了。只需要这个cookie就够了。啊,所以啊,其他的我们先不要。那其他的先不要的话呢,那这个时候呢,你看我们拿到的是一个数组对不对。啊,我们要取的是下标唯一的这个。没有问题。对吧,那现在我们先去测试一下啊,数组下标为一的。那就是我们最终的那个cookie,那我们这个时候看一眼来,现在呢,我们要干嘛要来到我们的video页面。啊,那这个时候。ab.TS我们把video提到上面去,我们让它再发一次请求,我们看看有没有什么问题过来。
18:00
好的,那这个时候大家看啊。哎。来把这个打开,我们是不是已经成功的拿到了这个数据。没有问题啊,我们已经成功的拿到了这个数据,那来到我们的network,大家看一下这里,这一次我们再看,诶,你会发现这个cookie。是吧,生效了。哎,携带的是music没有问题啊,那能够拿到的这个数据,那接下来的事情就都好办了。没有问题,好,那这个时候呢,啊来到这里啊,Request。往上翻一点,我们这儿看着很简单,很轻松就拿到了,但是我得说一点啊,我得说一点。那之前呢,呃,测试的时候呢,我发现啊,他返给我们的四个cookie呢,有时候顺序是乱的。也就是说,有可能music you是第一个。那现在呢,我们看到是第二条数据对不对,那假设啊,它真的,哎,每次的顺序是乱的话,那为了安全起见呢,我们应该是要确保我们读出来的一定是you的这一条。
19:08
那这个时候怎么办呢?那你就不能通过下标直接去取了,是不是有点危险啊,那这个时候呢,我们去到这个数组里面去查询一下这个item。对吧,Item就是每一项啊,如果说它里边你比如说我们来一个index of吧,啊方法呢有很多啊index of假如说它里面包含哎这个什么字段呢,我们看一下它里面有什么代表了,就是没you呗。如果说它包含。这个字段对不应该用正则了啊,就是他。嗯,如果能查到了,是不是就可以返回啊。对的吧,啊index of有什么特点?返回指定的值。在它里面的下标。嗯,那如果有值就返回,如果没有值,它返回是负一对不对,那这个时候呢,如果它为处是不是返回那个字符串呀。
20:08
没有问题啊,那这个时候啊,返回的字符串,那其实就是我们想要的呗。返回的某一项,那某一项是不是正好是字符串来这个时候我们再看一下啊。嗯,那现在这呢,没有成功啊,我们看一下我们带过来的是什么。嗯,不对。是他啊,是他,那这是为什么呢?注意看我们如果说index of没有检测到这个字符串返回的是不是负一呀。负一的话,那转换为布尔值也为处啊,所以呢,它就把第一个拿到了,那这个时候我们应该是用这个index of判断一下,它不等等于多少呢。负一就好了。不等等于负一啊,只有不等等于负一,说明它是不包含这个字符串,那那这个时候呢,我们看一眼。过来再看200,我们直接看cookie啊,有了有了以后呢,那说明这一块呢,也能拿到拿到数据,哎没有问题,好的,那现在啊,那这样的话呢,我们已经成功的解决了这个问题啊,就携带这个护肤品。
21:15
那其实我们现在这样写的话,你会发现每一次发请求是不是都会去添加这个请求头携带图片啊。哎,那既然每次都会携带这个空瓶,我们考虑的就要周全一点。假设用户上来访问的是主页,那这个时候呢,用户还没有登录。没有登录的情况下,请问本地有cookie吗?嗯,稍等啊,有点卡啊,本地有cookie吗?没有,那本地如果没有cookie的话,你就要注意了,你这假设啊。你这没有cookie呢,那你这读出来的是什么,是空。哎,读出来是空,我们可以测一个东西啊,大家看着我在上面呢,随便去给你读一个东西,比如说我要读一个叉叉叉的本地存储,我们看一看有没有啊,没有能看的清楚一点呢,我这儿标个123保存一下来,我们看一眼。
22:15
你看啊,123的前面是不是空串啊,那是因为我们现在的本地呢,并没有叉叉叉这个K。这个字段,所以啊,如果说。本地没有,那你读出CC,再调用find。当数组去用,他肯定会报错。能不能懂,所以呢,安全起见的话呢,我们要保证我们读到的有值。如果它为处就走,后边的为负,那你就给这个cookie呢设一个空串就好了,注意啊,这里呢,我用的是三元表达式啊,为的是保证假设本地读不出这个cookie,我们也不让我们的程序报错。不让我们的程序报错。啊,那这一点呢,大家要清楚啊,那上面这个打印我就给它关掉了。
23:04
哎,好的,那现在呢,我们已经成功的拿到了我们用户的这个数据啊,那下一节课呢,我们去给他展示出来来,那这一节课呢,我们先讲到这里。
我来说两句