00:00
大家好,我是学习园地的特约讲师高若峰,前面呢,咱们做了两个初始化,一个是编写配置文件,写编名,一个是把基础的通用的CSS,咱们做了一个导入,那这节课呢,咱们在封装网络请求,因为咱们在每个组件的数据都需要从接口里边请求过来,所以呢咱们得封装网络请求,那把所有的网络请求呢,咱们需要写在这个下面,那在这下边呢,我们新建一个通用的一个封装的一个文件,通用的一个封装文件是JS文件,TS文件啊,我们叫做re q EST,快速的JS。把所有的通用的文件写在这个里面。那并不是说我们整个项目的所有的网络请求的方法都在这里边去写,如果都在这里边去写的话,会比较乱,你比如说首页里边有网络请求,购物车有网络请求,订单有网络请求,用户有网络请求,对吧?都写这文件一很长,那不好管理,所以呢,如果我们这里边儿每一个页面都需要网络请求,最好是跟我们页面对应建一个文件,比如说。我们首页有网络请求,那我们就建一个后点JS。
01:00
如果我们购物车有网络请求,那我们就建一个购物车,比如说CRT.js这样去做,但是呢,不管是后面的点JS还是购物车点JS,我们都要包含这个文件,这个文件信息通用的内容,所以把通用内容写在这就可以了。那这里边呢,我们想使用通用的内容,那我们一定得既然是网络请求,我们用的X access这个插件对不对,所以呢,我们就需要安装X access,那在这块使用什么,嗯,N PM in install安装谁了AX iOS,然后一定得在什么,它属于运行时一代对吧,加上。如果你要做成开发依赖,那我们项目打包的时候就不带着它了,因为呢,项目运行的时候得需要它,所以呢我们得在运行依赖,那让它装上去,那么这里边呢,我们肯定用到的就是xce,所以呢我们需要把它导入,不让我们从安装完之后,在这个公用的,它会给我们装到哪啊,装到这个通用的这个里边,这里边那名称呢,就叫XS,这咱前面都说过了,对吧,所以呢,不用多说,直接包含就行了,这个form咱们写错了吧,ROM对吧,因为提示了。
02:02
包含这个文件,当然这个咱们写错位置了,不是在这个里边写,所有文件需要在request里边去写啊。这个文件里边你写错了,在这个文件里边去写,包含AXLS,这样的话我们就有这个R了,然后我们对外暴露一个使用EXS6的语法,声明一个函数,嗯,暴露一个req s request,暴露一个占样的方法。当然这里边我们需要接收一个配置文件,因为我们还得有后部的封装和购物车的封装,以及订单的封装,对不对?那每个封装呢,调用的时候都有单独的一个配置,比如说盖的请求啊,报的请求啊,对吧,请求的子地址啊等等,这些呢,我们都需要,所以呢,我们把配置文文件让外边传过来。外传过来,然后我们创建一个实例做基础的cost instance,这是变量随便写啊,Instance等于通过X里边我们CT创建,这是咱们得讲的时候,咱们单独有课程去讲话,对吧?在这里边我们做一个创建实例的时候,基础的一个配置,你比如说嗯,这里边SURL,基础的URL是哪呢?那我们就得访问一下我们的说明文档了。
03:13
基础的文档在这块。对吧,在这块我们加上单引号,它是一个注分,把这个斜杠去掉,因为我们后边拼接的时候呢,我通常那么写斜杠,User下边的API什么之类的,对吧?加斜杠会在后边,相当于补权,这个斜杠如果不加,你正面加斜杠的话,我们这些地方就不用斜杠,对吧?所以呢,我们最好是在这个地方杠把这个斜杠去掉,我们在写的时候相当于直接它当成一个根,所以请求根在子目下加斜杠为好,所以这块就不加,那我们在设置超时的时候太out,后来我们设置这两个就行。5000毫秒就是五秒钟,五秒钟如果请求数据请求失败了,就不让他请求了,对吧?所以呢,这样设置,如果你网络不好的话,你可以设置六分呃六秒七秒八秒对不对,你别设太多,设太多的话请求不过来,那用户感感受也比较慢,对吧?如果几秒钟请求不过来,直接一行提示数据请求失败对吧。
04:03
那在这里边我们创建完实例之后,我们初始化的时候还需要做两个,一个是什么?就是拦截,一个是请求拦截,拦截,一个是响应拦截。这块响应拦截拦截。拦截想要拦截做这两个拦截处理,为什么要做这两个拦截处理,你比如说在请求拦截的时候,我们如果有一些接口是需要我们认证之后才可以的。才可以访问的,那我们就在请求拦截的时候,如果你不带着token,我就不让你过,对吧,你就不用说在每个地方你都设置投信息了,直接在请求拦截里设置就行,所以呢,我们在这里边通过我们创建的实例才能用到这两个参数对不对,通过这个实例里边,我们这个词比较长记,然后request是请求拦截,然后点调用这里的方法使用,然后传一个传两个方法CI。
05:02
这是一个成功的时候,我们到这里边儿去,E如果有错误的时候,我们到这里边去。请求的时候呢,一般的时候呢,没有错误,所以呢,错误这个我们一般都不用去处理在这里边。就是请求拦截的时候错误一般我们不处理,那请求拦截的时候,在这里边我们通常做一些事情,做什么事情呢?就是如果有一些接口,比如说在后台的所有接口都是必须得有认证才能过的,对吧?如果有些接口需要认证才可以访问,对吧?就在这儿统一设置。统一。设置就可以了。在这里边统一设置,那比如说就是我们说的token对吧,把所有的token通过我们这个传过去的时候,就在这里设置,当然具体我们在应用的时候,我们再写,那个时候呢,你更容易理解,在这块呢,我就不直接写了,直接我就给太一了。直接让他,呃,让他过,那必须得返回这个,你放行,你拦截的话,你必须放行返回这个,就这里边现在什么也不做,直接放行对吧,直接。
06:08
嗯。放心。打打出来放心直接放心,然后这里边呢,通常我们不做,呃,错误处理这个。当需要访问的时候,他需要统一设置,比如说设置这个认证的信息,我们在这块需要的时候,我们再去做啊,现在暂时不做,那响应响应的时候呢,什么呢?就是这请求还没达到目的地的时候,向服务器发送数据的时候,这是请求的一样,那我们带着投信息过去响应拦截呢是什么?这里边我们再做一个,再做一个一个方法,因为请求的时候,我们自己写错误的时候很少,对不对,所以这里边一般呢,这块是什么也不需要做的啊,这是什么也不要做的啊,详拦截啊。下面出去了。前拦截,我们先看语法怎么写,在这里边我们加上这个,然后re.use也是两个参数响应的数据的一个方法和一个什么错误的方法。
07:08
这两包吧。那响应拦截的时候呢,一般的我们在什么?我们在接收响应的数据这块,正常响应的时候,我们通常什么都不做,直接我们放行,Re t直接放行,Re直接放行就可以了。在这块通常我们是不做任何处理的,因为数据回来的就是正确的对吧,正确的也没有什么太多需要处理的,所以直接放行,但是错误的时候,比如说服务器返回错误嘛,那如果有错误。有错误对吧,这里面会处理。会去处理你比如说返回的是三二,因为这里面状态码。这个。拿这会状态码,你看有这么多状态码没几个是成功的,对个200成功对吧,这个已创建204内容对吧,但是也输理成功了对吧,你看345这些开头的基本上都是错误,那错误的话,如果你不提示用户的话,用户不知道哪块错了对吧?所以呢,我们在错误处理的时候,根据状态码去判断,然后呢,提示用户的一些消息这块呢,我们也先不写,也先不写,也是需要遇到的时候我们再处理。
08:19
对吧,你比如说错误,假如说我们请求某个需要认证的接口。他必须登录才可以,那我们不能在每个地方都判断,如果呃没有权限,那你就得登录对吧,那在这里边我们统一处理就可以了,对吧,如果错误,这里会处理错误,也就是显示错误信息。错误啊。错误信息对吧,再有一个什么,这里边统一跳转。通常我们也开始写,就比如说呃,如果没有,就是如果有需要授权,授权可以访问的。应该说才可以访问的接口。接口对吧,在这里边统一去跳转到登录去授权。
09:04
统一对吧,去log授权,就同样去登录才可以,当然了,这个我们在写登录的时候再去写,先封装的时候先我们就统一先放行一下这个数据就可以了,那最后我们在这里边你看需要包含这个对吧,里边有那么多配置,那我们必须得怎么着,把这个实例我们得返回去,我们才能应用到对不对?I返回instance返回这实例,我们把这个C对吧传过。创建这个实例。对吧,用户这个实例拿过来,我们把这个实例返回去,需要用户传递的这个方法就可以了。这是公共的封装,当然我们封装一部分有些用到的时候,有些封装就首先给你解决这块,留在这块,那现在假如说我home上home页面需要数据,对吧,后面页面首要数据在这边需要,你比如说我想请求首页的所有数据,那么你看一下首页上的接口。嗯,前台首页首页数据。
10:03
首页数据,通过访问这个能访问首页上的所有数据,那访问首页上的所有的数据。这块。然后呢,还可以通过传递这些不同的参数获取你想要的数据,那如果不存参数,那就获取首页的所有数据,对吧?所以呢,在这块那我们就先写一个获取首页所有数据的。那这个写每个页面你获取数据都封装成一个方法,在这里边呢,那我想在这里边请求数据肯定得用到这个,所以在这里边我们第一步干嘛呀,先引入什么,引入从哪个里边呢?从我们当前来看看是在同一节目下的对吧,Network,同一节目下是不是有后面S对吧,它要引入request。request.js对吧?引入这里边,那我们在这个request JS导出的是一个函数,是一个方法,什么方法呢?Request re request方法需要一个配重键,所以我们直接方方法拿到这块来,那在这块我就可以直接调用的方法了,那我现在需要得到首页的所有的数据,对吧?那我们这块声明一个方法叫做什么得到home首页里边的所有的电接数据。
11:09
得到首页的所有数据,当然了,如果我们想在别的地方用到这个这个方法的话,我们是不是也得把这个方法导出啊,所以ESPT我们得把它导出据获取首页的所有数据,那我们之间调用哪个方法呢?调用。Re request方法就是我们从这里边包含的方法里边需要配置文件对吧?配置文件我们请求的时候,在这里边这技术文件配置文件传进来,你看我们返回这个实例,创建实例的时候。这块创建实例的时候,我们除了访问这个是不是我们还需要干嘛,我们需要配置参数,配置参数在哪?在这块需要配置的是一个请求的URL,当然了在基础的base URL里边已经把那个UR给我们加上了,所以呢,我们这里边只需要加上什么。只需要加上我们的这个请求的URL就可以了。啊,跟这个文档是对应的。
12:00
放在这块来,这样的话我们一定用这方法,那就会通过R钥请求这个ul默认是盖的方法,但是首页的数据我们看下这个接口告诉我们用的是什么,就是盖的方法,用盖的方法你可以写,可以不写,对不对,不然的话你可以只要这me hod,你可以写什么方法,盖是什么方法,你加什么方法就行了,对吧?然后呢,如果有用户需要算参数。PA Ms对不对,那你可以在这块加上这个参数,Pas加上这个参数就可以了,当然不需要,这两不需要,那我们就怎么办,先给他注销,这也不需要传递就不需要了,这样的话我们就直接指定一个地口接口,也不需要任何参数,就会能够我们返回首页里边的所有的数据。那我们到首页里边,我们去用一下,比如说在在后面页上啊,那我们就找到后1.vue这个文件。在这文件里边呢,那我把这个原来写的这些不用的,我们都把这文样都把它删掉,Word这个咱们也不需要了,都把它删掉,然后。因为咱现在只是在初始化啊,现在还没正式写项目,这个date咱们也不需要咱们用那个组API的方式去写,所有项目都用符合API的方式去写,那这里边其他的样式的东西无所谓了,样式的东西无所谓了,那在这里边我们来一个。
13:12
在因为组合API所有的统一在这里面去写,对吧,在这里边呢,我们想获取首页的数据,我们需要使用一个在这块按port。比如说我们通过这个from voe里边,别忘了是小写的里边导入,假如说我在模板初始化完对吧,挂载的时候,那我去加载这个网络请求接口,如果直接在这写,就创建的时候去请求,创建的请求不是不行,对吧?但是最好我们就把页面都挂载之后再去请求,所以呢,如果我直接在这写是可以的,是比如得到首页里边所有什么数据是没问题的,但最好我们在挂载上去写,因为毕竟是异步去处理的嘛,对吧?所以先把这数据的先拿过来。所以这里边异步处理我们用这个对吧,这个生命周期方法在这里边加上对吧,好,Not,那等页面我们创建完之后,它会自动调用这个方法,在这个方法里边,它需要传一个回调方法,在这里边会自动调用,比如说rog rog反应一行一。
14:09
你看。我们。在。这个当然是网络的事儿,没关系,抓心就行了。啊,这块我们服务器刚才装那个阿奥有。你看几下。好,运行起来了,你放心点,当然我们现在写的是在home里边,你看默认加载后是不是就把这行移掉了,这一加载会自动加载,会自动加载在这里边,我们如果想用到home里边的这个请求方法的话,这个方法的话,那我们需要干嘛呀,我们需要在如果这里边还有其他的方法啊,比如esqt fun,比如说得到BN压半径图的等等啊这样的一些方法。导出对吧,那我们就需要在这个文件里边,在哪个文件里用,那我们就得把这个导入iPod导入什么呢?导入这里边你需要什么方法,比如说这个方法和get DA这个方法,你看它默认给我们。
15:10
这块了。可给我自动加载,你看需要多少个方法,这么导入就行了,从这里边当然我们直接可以删掉,因为我们有什么有network别名,还记得吧,在这个里边是不是有network别名,直接找这个src下边的network,所以呢,我们在这里边直接。在这里边就可以找到它下边的home.js,他把JS给省掉了,这样的话我们在这个页面里边就可以干嘛直接用到什么,用到这个,呃,Get点这个数据,然后我们直接返回的是A,那它返回的结果肯定有一个t in。对吧,这个方法res就是它结合的promise,结合这个如果有错误的话,Ch ch e,但是错误这块咱们一般不用,如果用的话,你可以这么写,那这里边的I就是我们接收到的数据。就是我们介绍到。
16:01
嗯。看一下我们这块有个错误什么。在这反了吗?这边不用返回啊,直接调用这个请求接口传这个参数。啊,前面底下不返回,它没有promise直接返回这个,因为这块也得返回,用的时候才能返promise,返回promise我们才能用,对吧,所以这里边别忘了写什么return,写return才可以。那这里边儿。返回的时候,这里面就,然后我们就能接到这个数据再刷新一下。你看他把所有的数据都在什么呢?都在date里面。这个所有的数据都在data里面,在这呢,这你看跟我们对下接口返回的所有的分类的数据,返回所有的商品信息,返回这个应该是单截图的这样的信息,对吧?那如果我用这个半截图的信息,那我就is点它的一个DT,你看数据下边的嘛,你得看我这个结构对吧,然后再点SLIS翻的出信息。
17:05
邀请一下。就可以了,这块就只需用发截图的信息了,对吧,接口的数据,那把这数据想放在页面上就可以放,但是我们每次用的时候都得用它的被,因为页接口它都带那被对不对,所以我们可简写一下,怎么简写呢?你看在响应拦截这块。在这个这块想拦截的,我们直接返回这个嘛,既然每一个返回正义数据里边都有date,那我们就可以直接这块返回date,直接返回date,那我们在这个里边就不用date了,直接is就是我们。在这里边的。显拦截选拦截,这里边这一个date对不对,所以呢,效果也是一样的,就是显拦截里边我们处理一下。直接把数据整一层,这样的话我们就不用每个都写这了,就搞定这个事情了,看到了吗?这样就可以了,当然了,那我们这块还得出发,但是不一定说所有的都有date返回啊,所以这块我们判断一下,如果有date返回,那我们就re。房问号I点,否则的话我们就直接没有这个的话,我就直接。
18:05
延伸不点点res就可以了。所以我们再刷新一下,你看。是一样的,对吧,如果没出错,证明我这语法,就我总怕这个输入法这块出错,然后呢,导致这样的一个问题,那当然了,如果我想把这个数据放到页面上,那是我们后边做项目的事,对不对?那你可以在这里边再假设举个例子,Res,呃,声明一个ref,从UE里边把这弄出来,然后呢,我们在这里边cost声明一个数组,比如DN加半点,把半点数据拿过来在这块。然后嗯,我们让它等于ref,我们来一个空数组吧,说明一个空数组。成为公数组,那既然我想在页面上用这个B,我这里边是不是用组合偏的时候还得返回一个空,就返回这个B压B对不对,返回这个班,不然里是多个,咱现在只写一个对吧,然后这个数据打印一下,你可以看数据。打印数开出去,如果你想要每个数据都想看的话,你在想拦截这块打印,这样的话,所有的数据你都不用打印了,直接在这个地方就可以了,你如果想在这地方打印,你直接把这个做一个变量打印,对吧。
19:10
在这个地方,或者直接这块res.rog在开发的时候,这样的话所有的数据都可以去打印。所有的数据都可以打印。那其他如果在这块所有数据打印的话,你就不用每一个地方都打印了,请求的数据你就都可以看得到了,对不对,这些地方这个就不需要了,不需要了,然后呢,我们看一下这个数据。里边。你看这是date这个数据,但是这块打印的就是比较多,比较乱,所以呢,你衡量一下开发阶段可以在那块先打印一下啊,打印一下看一下这个这里边有。呃,贝下边。有头信息,你看想要的信息,这里面有很多啊,这个下边有个SLIS,这个应该是来处理BNR,因为是if想这做的显式数据,所以它必须得用view,对不对,等于I,这里边data直接返回了,就不用date了,对不对,直接这里边的什么。
20:01
S。直接加这个,你看这样的话,我们就把这个给这个对吧,它上面就有了是一空数据,那这个时候我们在页面上,如果我们想去数据,你是便利也好,是怎么处理都可以变N压,我们再直接正合打印下你看。就把这数据拿过来,当然你刷新一下,它不默认每次刷新连空,再变成这个,所以他刚开始是空数度,然后数据请求过来,再把响应,通过响应式的原理,再把数据放上,对吧?所以我们想用的接口里边的所有的数据,只要访问这个对象就可以了。就是这样的一个过程。那如果其他的页面需要这样的数据,你在这里边购车需要,对吧?分类需要单独建一个GS文件,就这么分控就行了,这是封装和应用的一个过程,那咱们已经封装到这个结果,所以在哪个页面我就不去再去看这文件了,除非把这功能给补全,那我们直接就写这有一点就行了,然后对照文档请求什么数据我们就写什么,接口是get put的,Part的,Delete的,对吧?我们就按照接口的规范去详细写这个就可以了。好,谢谢大家。这节课我们就。
我来说两句