00:00
大家好,那这节课呢,我们来继续优化我们的请求工具啊,主要是把啊请求拦截和响应拦截给优化完,那首先呢,我们把这个字给改了,这个是写错了,上一节课是写在。那必须写在函数中啊。啊,那这个呢,我们就先注释。好,那接下来呢,啊,先看一下啊,我们还是得需要一个请求,对吧,我们就复制一下这个,复制下这个啊。然后。Console log res,这个得要一下,那我们先来处理一下我们的。请求拦截啊,就是在请求之前,我们需要配置这个talking,它的这个例子呢,是啊这么去配置的啊,当然我们的talking啊,不是叫啊,不是不是写这个啊,看一下我们的文档来。找到这个说明文档,那我们使用的是GW的认证,我们要添加这么一个头信息啊,并且值是它加上这个topic对吧,所以我们要加上这么一个图信息啊,所以呢啊,我们要对诶他提供的这个例子进行改一改,来我们来写一下啊。
01:12
嗯,这个呢,这么多注释啊,就是说我们可以从哪些地方去诶拿到这个talking,因为这个talking我们想一想是在什么时候得到的,是不是登录之候得到的,对吧,那我们在呃登录之后得到talking,我们必须得把它缓存起来啊,因为每次请求啊,需要授权的一些API的时候,肯定都要带入的talking,对吧?那么怎么缓存呢?它有这么几种方式给它稍微介绍一下,第一个是使用这个啊VEX啊,VEX啊就Vue叉。那这是第一种方式,那第二种方式呢,是使用啊,啊这个。也是V,只是没有用这个U封装的这个方法是从这个套里面去获取这个啊啊V啊V我们在这个啊speed里面存的这个值啊,第三种方式是使用这个格global date格global date。啊,还有第四种方式是使用这个本地的缓存啊local吗。
02:04
好。嗯,那我们用哪种呢?其实推荐大家使用啊,这个U的,呃,封装后的这个VES特别省事,因为他把这个VES呢给A啊,就是放到了这个。啊,VIVO的这个实例中啊,所以我们可以直接取到我们缓存的这个talking,非常省事,包括后面我们使用这个VX啊,都会去这么去使用,但有一有一章节我们单独去讲啊,那下面这几个方式呢,就不是特别推荐啊,当然也可以啊,好,那我们就写到这里啊。Config config这head这样那我们就不是这个talking了,而是这个图信息啊,这个图信息它要等于谁呢?等于这个B2啊。哎,空格,然后加上这个哎,Talking对吧,那这个talking怎么来呢?Talking啊,哎,我们应该从这个呃,View的实例中啊,去拿到我们缓存的这个啊,啊access talking s talking。
03:10
啊,那当然呢,呃,我们现在肯定是没有登录也没有缓存它对吧,所以呢,这个是拿不到值的啊,所以呢,啊,我们就先放这到最后我们写完登录就可以拿到了,先这么写上啊这个。不是说非得这么写啊,你写ABC也行,对吧,你写talking行,这个是我们缓存到啊VS中的那个那个那个K啊,所以呢,我们这个就写啊set talking吧啊talking。因为我们登录之后啊,他返回了这个字段,找一下API,它也叫这个。Talking是吧?哎,比如登录成功之后,返回的这个字段就卡是不是,所以我们就怎么去写。啊,那我们的请求拦截就写完了,那我们来验证一下,那我们首页有一个请求,这个index的一个请求,对吧,那看看它会不会携带这个头信息。好,找到这里啊,看到network来刷新一下啊,看这个index。
04:01
好,找到request。是不是带着这个。带着这个also relaxing这个talking啊,它的值是B2加空格啊,那先放这,因为我们现在没有登录,所以拿不到,拿不到这个值啊。嗯,这样的话,我们请求拦截暂时就配置完了,因为暂时是不需要其他的东西,到后面我们写上,我们如果需要配,就是说碰到了一些其他的额外的一个头信息,那我们就。啊,再给它加上。好,那接着来看啊。嗯,接着来看。嗯,这个先放这吧,就说呃,有一些啊,有一些这个URL特别处理啊,就是可能嗯。啊,比如说这是判断某些URL啊,单独给他做处理的话,就是这意思,就是我们在con里面可以拿到我们请求URL啊,比如我们这个情况就是index index。清楚了吧,就是该好。这个先不管了,先不管,其实呃呃,这个呢,我们注释掉也行啊,注释掉也行啊,反正你。
05:00
加就加呗,反正后台API他不一定用是不是啊。啊,最后一定要返回这个腾贝格啊。来接着处理我们的,嗯。响应拦截,响应拦截呢啊,首先这个200啊,就是说400以下请求成功的情况下,我们已经处理过了啊,已经处理过了,那我就不说了啊,接着看我们的状态码,我们需要处理一下谁。来找到状态码,需要处理一下。啊,这个400啊,400400呢是。服务器请求错误啊。那我们找一个400的一个情况来给大家看一看啊。嗯,把这里先改了这里如果。再写一个吧,因为这个401的话,它是未登录,等会我们还要处理401,再来复制一个。先把这个都改成我们的code啊。
06:00
400的情况,400呢。哎,请求啊。错误的请求是请求到了,但是呢,服务端呢,还认为这个请求不正不正确啊,给你提示了一些信息啊,提示信息。呃,错误的请求啊,我们来找一个找一个啊,找一个什么呢。看带400的一个情况。在认证API里面有一个小程序的绑定或者解绑啊,使用POS的方式。诶,然后它有一个400啊,就说你的账号如果没有绑定进行解绑的话,就是说会有一个消息的一个提示,这种就是400的一个状态码,那这种400状态码在我们这个项目中是很常见的。啊,那我们来复制一下这个API。好,把它改成这个,同时请求方式改成post。啊,然后还有一点要注意啊,这个API呢,是需要添加这个请求头,就是需要talking的,那假如我们没有这个talking,它会返回一个401,就是说我们没有经过认证对吧,那我们先看看这种401的一个情况。
07:08
哎,找到这里啊,可以看到这个请求就是401对吧?啊。没有人用,那看一下我们的。那401的情况我们好像没有处理啊,那我们先把这个401给处理了。找到这里吧,啊401这里呃会呃提醒一个验证失败,重新登录,然后呃,1.5秒的一个定时器结束以后,来跳转到这个页面,我们现在应该是没有这个页面啊,通过这个GS报的错啊啊没有了没有了。那我们刷新一下啊。那通过这个GS的也可以知道。的确,这里的这个状态码是401对吧?那我们再刷新一下,大家注意它有个弹窗的一个提醒啊,可以看到这里是验证失败,请重新登录啊,那这块呢,我们现在没有登录页,所以这块我们暂时先不做处理啊,先暂时放这把这个改成401啊嗯,那需要登录怎么办呢?因为我们现在要测试这个API,那这里还需要登录怎么办呢?啊,那我们知道需要登录的API,我们需要在头部去点开,还有这个啊,以及这个登录后的一个talking,那我们在封装的这个请求工具的上面也已经写了这个东西,但是呢,我们的是没有talking的啊,我们的talking是安find的对不对?看一下这个network啊,找到这个请求的这个头,你可以看到它是一个。
08:21
嗯,Request harder这里面有一个。Also吧,Also relax它是一个安find啊,那这个talking是登录之后才有,我们现在没有写登录,那我们用啊postman这个工具啊,用这个工具我们去请求,哎,这个登录的这个接口,把账号密码给它填上。那我们来发送一下,获取到这个talking,我们先把这个talking先给复制一下。放到我们的项目中啊好,这里呢,我就先先不动,我先给它注释啊,然后复制一行啊,把这个打开之后,我把这个talking给它替换掉,替换掉。哎,我们刚才登录的拿到的这个talking啊。好,这时候我们再来保存啊,再来看。诶,这时候就不会出错了,但它出了一个三二的一个错误,那三二呢,嗯,我们来看它这个返回信息啊,就是说我们有这个。
09:09
参数没有填啊啊,这个三二我们先不管,我们先把这个参数都给它给上,我们是为了先先写谁呢?先写这个,先这个400的一个情况啊啊其实先写402也行啊啊先写400的情况吧,嗯,也就是说这两个参数我们必须得给啊type啊,那我们把type给成这个解绑啊,因为我们这个账号是啊没有绑定的,所以解绑它肯定会出现这个400的异常嘛,然后open ID随便写一个啊。好。找到我们的代码,找到index这里。啊,第二个就是参数啊参数啊,那这里面我们给他一个cap是啊按B啊,再给他一个open ID啊随便写啊随便写好,那接下来。嗯,我们再来看一下,再来看一下这个地方。好,这时候你看一下状态就是400了,对吧?啊,返回的消息就变成了这个当前账号未绑定不能解绑啊好,我们我们主要要什么呢?就说。
10:06
想要把这个消息啊,这个异常的这个消息给它提取出来,然后弹窗进行提醒,对不对。啊,这个也是我们来做这个响应来接系最主要的一个目的,那我们来看看怎么提取这个消息啊。首先来分析一下啊。这里我们能拿到这个RA对吧,那我们在这个400的情况下啊,四零这里面我们来打印一下这个RA,看看这个消息到底藏在哪里啊,点logg ras来保存。好,来看这里的一个打印啊好。嗯,首先是在data里面,Data里面有一个message,是我们的这个。啊,要显示消息对吧?啊所以呢,那我们这里诶就可以去诶使用为m dota右点tost啊啊这个是他的呢,是这个U分装的一个呃,快速用来这个弹窗提醒的一个小工具啊,然后我们用那个UNAPP原生的啊那个提醒工具也可以啊,这个都可以啊好消息在哪呢?在date里面的啊,Message里面。
11:08
清楚了吧?啊,最后不要忘了return这个false错误的请求。啊,VM就是这个V的一个实例嘛,来保存,我们再来看看效果。可以看到消息已经出来了吧,当前账号未绑定不能解绑,那400的情况我们就处理完了,我们拿这一个举例,其他的都适用清楚了吧,啊,没有什么特殊的一个情况了,那401呢,哎,刚才我们演示过了,就是没有登录的时候呢,会给我们诶弹窗提醒,哎,让我们请进行登录,然后再会进行一个跳转,就倒计时结束以后跳转到一个登录页,我们现在没有登录页就先放着先不用动啊。那接下来我们处理一个三二的一个情况,422啊422呢,是这个表单验证,哎有有时候我们请求一个啊接口,比如说登录的时候,登录你肯定得给邮箱和密码对吧,或者账号和密码,那你如果不给这两个参数,那就是相当于哎表单验证没有通过,它就会有一个三二的一个错误,就包括我们刚才的这个接口也是,如果我们不给这两个参数啊,它就会有一个三二的一个错误,就是我们。
12:05
要他需要的就是API需要的这两个参数,我们没有给没有给啊,那三二的情况我们可以展开来看一下啊,这个啊,就是首先这里啊,这里是。就是出错的时候,哎,就是响应拦截器出错的时候,他给我们return了这个false啊,就是return了这个false在这呢啊。在这啊,Return了这个force啊,就这里啊force,哎,如果force的时候,那res呢,就会放到了这个啊promise的回调中啊,这个就是我们的re嘛,那我们来看一看我们的呃,消息在哪藏着,首先是啊,还是这个date啊,状态码肯定三二对吧,那我们先把这个状态码给写上吧。嗯,复制一个。400的复制一个400的,我们放到401的后面,按照顺序来写啊,这个就改成三二,就是当你状态码是三二的时候啊,我就知道你是表单验证未通过,表单验证未通过,好,那这时候我要给你提醒消息对吧?消息呢,虽然还用这个方法,但是这个消息就不在data的message里面了啊,那我们来找一找,我们要怎么来提示这个消息啊,啊可以看到啊。
13:20
这个消息它首先是在data里面,Data里面呢是有一个message,这个message呢,当然我们,嗯,你要说用吧,也能用,但它的提醒呢,它只是告诉你啊,你的这个验证啊,就是没有没有没有通过验证,但是用户用户也不知道什么什么东西没有通过验证是不是,所以我们要找到这个iris里面就具体的错误的信息,对吧,Iris它又是一个对象,对象里面啊。这个K,哎,就是我们没有传的那个参数,这个K是不确定的啊,不确定的,哎,我再强调一遍是不确定的,再往后里面是一个数组,数组里面才是MY。如果我们没有填邮箱啊,他可能是报的就是邮箱,如果没有,呃,填其他的可能就是啊,比如没有填这个密码,它这显示可定密码,那为什么要说这个K不确定,不确定就是为了告诉大家,我们想要取这个消息的话啊,你就不能用指定的K去取。
14:09
兄弟们,你不知道这个K它是啥啊,所以呢,嗯,这个呢,我们就可以通过一个啊迭代或者一个循环哎,去取出来这个iOS里面的就是对象也是可以迭代嘛,取出来它这个里面的这个一个一个的啊消息给它连接上就可以了,哎,当然。呃,移动端的话,一般呢,我们呃,也不会把所有的错误消息都给它连接起来啊,一般就是取第一个啊,做做一个犀牛可以了,所以我们就拿这个。啊,拿这个第一个,拿这个第一个啊好。嗯,拿第一个呢,就就不用循环了啊,那这就比较好拿,首先我们把这个iris先给提取出来,那这个iris啊。来,我们来定义一个cost as,嗯,直接从date里面给它解构出来,解构出来这个L来打印一下,点logo l来看一看。
15:02
好,是不是就拿到了这个东西,好接着它是一个对象,对吧,那我们可以通过一些方法去获取到这个这个对象的。啊,所有的K啊有一个。K啊K喊一个对象过去,能拿到对象所有的K啊,组成的一个数组啊。拿到了这个东西对吧,太和D,那我们就是。拿到了这个K啊K,但是我们要这个K。也没有什么太大作用,我们想要的是谁是value对吧?虽然我们可以通过这个K再去取一遍,那是不是比较麻烦,那我们来看一下代码,我们既然能通过这个对象的这个case这个方法来获取到它的K,是不是还可以通过它的这个values方法来获取到这个对象的所有的这个value组成的一个数组,来这次我们再打印下,看到没有,诶,我们的这个tap啊和这个OD就是我们的啊贝里面的,来看原始数据啊,就是这个errors里面的。那这个Y是不是拿到了啊,那这个就是我们要显示的信息啊,如果你想全部显示,那你就就是把每个数组的第一个元素啊,这个你就大写这个循环了啊,给它连起来,哎,这样连起来,那如果我们只是想显示第一个就比较简单了,好。
16:13
来。嗯,直接用哎数组的方式去取吧,你就不用那个泡好。第零个,我们得到了谁?得到的还是一个数组啊,注意这还是一个数组,所以呢,我还要再继续写第零个。这样就拿到了这个消息的一个字符串。对不对,好,拿到了这个东西之后,其实这个就是我们最终要弹窗提示的一个消息,我们把这个东西。剪切放到这个弹窗题型里面就可以了,好,我们来看一下。哎,是不是太不能为空。对吧。啊,那这个三二我们就处理完了啊,因为呃,这个是因为API的原因,它后台没有翻译啊,后台没有就是后台的API没有对这个两个字段进行翻译,所以是英文,那呃,如果是经过翻译的呢?啊,它就会是显示对应的一个中文,那我们再来一个接口测试一下。
17:06
嗯,我们还拿POS了,但是我们测谁呢?测试这个登录,登录的话我们要传邮箱和密码是吧,但是我们就不查来看一下啊。是不是邮箱不能为空对吧?啊,那呃,看一下这个消息这里面。点开这个data里面的is,看一下是不是邮箱不能维护,密码不能维护啊,这个是做了翻译的好。那四二呢,我们也处理完了,其实到这一步的话。嗯,我们就基本处理差不多了,基本处理差不多了,那我们的这个嗯响应拦节哎也基本就完事了,这样的话,我们在写网络请求的时候,根本就不用再关心啊,它的这个异常啊,就是在用开启下去捕获他的异常,根本就不用再写了,我们就可以用,我们只要成功的结果,一旦你出现异常。啊,一旦你出现异常,这里是等不到结果的啊,来响应拦截器直接就给拦截了,就是说一旦出现异常,它会放到了promise的reject里面嘛,那呃,我们的这个它只能等到这个result的那个结果,所以哎,这里就相当于哎没有结果。
18:06
清楚了吧,啊好,但是它的值到底是什么呢?我们来打印来看一看啊。好,这个里面打用天线都关掉啊,应该是没了,好就是就这个啊来刷新。可以看到啊。是不是这里就。这里就没有直行console look来,我们再写个一。可以看到啊,直接到这就给拦截了啊,这里就看一一都没有输出对不对,好,那我们这里改成R,那我们在上面来写这个一啊。就是给大家看一下,如果出现异常的情况下,我们这个啊到底干了什么。一是不是有一执行之后,然后发送请求去等待这个结果,但是在等这个结果的时候。诶,就出现了这个异常,就是被这个响应拦截器给拦截了,那我们这个下面代码就不会执行了。
19:04
啊,不会执行了,好,但有时候呢,我们嗯,还想要就是在他。就是说让他这个出现异常的时候呢,我们的代码还能继续执行怎么办呢。这个时候啊,我们可以把可能出现异常的一个请求给它放到这个传开界面,当然这种情况很少啊,但是呢,我给大家写一下啊。那主要是针对于是我们使用的是这种呃这种这种方法来写,如果使用的还是promise这种认的风格的话,那我们就呃不用不用去管这些啊。那假如出现异常的情况下,想让下面咱们还继续执行怎么办?我们可以把它放到这个TRY开启里面啊,TRY然后开启啊,呃,为什么要把他们放到这个查开启里面呢?这样的话,他的异常就会被这个查开启给捕获,就不影响下面的代码执行,那又为什么非要经过这么一张呢?因为你的这个结果如果拿到了,你下面可能还会有其他的代码清楚了吧,是这么回事啊,一般呢,这种情况很少啊,很少。
20:04
就当大家碰到了这种情况的时候,再去这么做啊,一般像我们一个页面的话,如果你API都请求异常了,那么你下面的代码其实就也没有必要必要去去执行了啊,当然如果是一些呃展示类的页面,比如说一个详情啥的啊,那你API异常的时候,你其他的嗯。啊,比如说一个API异常对吧,其他的代码你该显示还是得显示的页面该展示展示。好,我们来验证一下,验证一下。刷新一下啊。这个res按的就是它这个作用域的一个问题,我们把它放到这,好这时候我们再来刷新一看,嗯,一一先执行对吧,接着呢啊,它去发送这个请求啊,然后出现了这个异常啊,出现这个异常,但是呢,这个二二还是及时不影响他啊,他自己有一个像拆开启里面拆的话,它就有作用率,包括异常都会被这个开启给捕获。啊,那呃,这是这个情况,那关于这一块呢,我们的整个啊。关于这个请求工具的一个,哎,响应拦截器就处理完了啊,那这节先到这里啊。
我来说两句