00:00
哈喽,各位小伙伴们大家好。那接下来咱们呢,去完成接口统一管理的业务。那首先说啊,对于我们目前而言啊,对于home模块,那所有的静态的组件啊,咱们呢,已经拆分完毕了。那当然这里面呢,目前啊,都是假的数据,都是静态的数据,对吧,那以及啊,咱们的A也进行了二次封装。也包含了请求和响应的拦截器。那接下来啊,当然咱们呢,是需要向咱们的服务器发请求,获取服务器的数据进行展示。那么接下来呢,咱们呢,先完成三级联动这里的业务。那也就是说啊,咱们需要向服务器发请求。获取三级联动的数据进行展示。对吧,那这里面呢,咱们呢,需要注意。
01:01
那如果说啊,你的这个项目很小。就比如说有两个组件。接口呢,就一到两个。那像这种情况完全可以在组建的生命。周期。函数中。比如说在函数的mount或者是created当中去发请求,获取到服务器的数据,存储在data当中完全是可以展示出来的。但前提就是项目小。那么如果说你的项目很大。对吧,你的项目大。比如说组件呢,有好几百个,接口呢,有好几十个,那如果按照上面的这种写法,比如说咱发个请求,那你就点get。对吧,哎,某某某或者是Asia点呀delete呀,某某某对吧,这都没问题。
02:04
但是你要想明白一件事,就假如说这次请求。在100个组件或者是200个组件当中都出现了。对吧,那么假如有一天接口地址发生修改了,那你这100个组件,你要挨个找到一个一个进行修改,那这样是很麻烦的。那咱们为什么不把接口全都统一管理呢?那这样找的时候也好找,不用挨个找,去组建,去一个个去修改。那所以说啊,因为咱们的项目呢是比较大的,那所以说咱们的请求呢,都进行相应的统一管理。那咱们呢,去看一下怎么去做。对吧,你看老师呢,找到咱们的API文件夹。那这个request.js啊,就是咱们将来发请求用的,已经进行了二次封装。
03:03
那老师啊,在API文件夹下又来了一个模块,叫做index JS。那这个模块的一个作用是什么呢?咱们做一下笔记。也就是说啊,当前的这个模块啊,哎,咱们要干什么呢?就是所有的API接口进行统一的管理。那也就是说将来咱比如说项目当中有100个接口,OK,都在这个文件里面进行统一管理。那当然,你要发请求得用到咱们封装的这个as。那咱们呢,是需要引入进来的,引。对吧,比如说requests from从谁那引呢?是咱们的点杠2E。那咱们呢,先获取三级联动的数据,那这里面呢,咱们呢,还真得看一下接口文档。
04:03
这个是什么?咱们做一下笔记,就是三级联动的接口。那咱们呢,去找一下相应的文档看一下。对吧,那咱们找一下子应该呢,是首页的三级分类,就是这。咱们先看他的一个请求地址啊,这是他,那咱们呢,给他带走。找你,哎,给他绕到这儿,这是他的一个呀,请求地址。以及啊,是什么请求呢?是钙的请求。而且不需要携带任何参数,对吧,这都是无嘛,所以说呢,咱们也做一下笔记,它呢是一个get请求,而且参数啊是没有的,比如说无参数。那这里该怎么写呢?那你得琢磨琢磨了。那首先说将来你发请求,比如说在别的模块当中发请求,比如说在app.view或者在其他的组件,或者说是在1.gs当中发请求,OK,那么我只需要在这儿对外暴露一个函数即可。
05:13
那这个函数的对外暴露,别的模块呢,是可以拿到的,那你说你拿到这个函数,OK,一调用,那不就发请求了吗?把服务器返回的数据给了你,另外一个模块,你拿去用吧。对吧,那所以说咱们在这里呢,完全呢,可以对外暴露一个函数。比如说咱们起个名叫做req,叫什么呢?叫做商品分类列表,叫做cat list。那么老师呢,目前啊是书写了一个箭头函数,而且还对外暴露,那么为什么对外暴露呢?说白了就是别的模块你要用,OK,你可以。那么当别的模块拿到了这个箭头函数,OK,你可以调用那函数体,一执行,那你不就可以发请求了吗?
06:04
对吧,比如说发请求。那发请求就简单了,咱们呢,可以用as设的函数的形式对吧,比如说传入咱们请求的地址。那请求的地址不就是他吗?但是这里要注意一件事,咱们的base URL已经加上了API,也就是说会在咱们发请求这个路径的前面已经带上API了。所以说咱们在这儿呢,就不需要再书写API。对吧,咱当年在贝斯URL这已经诶写上了一个杠API,那么发请求的时候啊,它的路径当中会在它的前面,其实默认就给咱们带API了。当然,如果这里你要书写APIOK,那你把贝斯URL这给他干掉就行了。对吧,那当然咱们呢是把这给它去掉。那以及是什么请求呢?那咱们来一个method,是get请求。
07:04
但是如果你只是这种写法,你得琢磨可不可以。就比如说在别的模块,我拿到了这个函数。那么函数一执行,OK,你没问题,你是向服务器发请求了,通过A,但是你要注意啊,你这个函数的返回值是谁?是安底范。因为他没有写瑞特默认返回的是案底犯,那不行啊。所以说你需要把服务器返回的结果OK,你给人家返回,让别的模块去打去使用。对吧,而且要注意这块是发请求。而且as发请求,它返回的结果是什么呢?哎,结果是promise对象。哎,这件事儿需要注意一下。对吧,那其实啊,咱们这儿呢,完全可以简化一些写法,怎么简化呢?那咱们应该知道箭头函数,像现在的这种写法,你可以把函数体去掉。
08:03
把关键字腾给它去掉。对吧,那咱们呢,要进行单元测试。就是测试一下这个功能现在是否OK,我一定要用这个函数,能不能发请求。那老师呢,先给它关掉啊,这个老师给它关掉这个函数名咱拷贝一下。那咱们呢,回到咱们的入口文件,咱们测试一下。你好。在这里。老师呢,去测试一下,咱引入一下呗,Inport那面是分别暴露,那别忘记这个大划括号,From从哪引呢?从咱们的艾特杠API去。那当然,将来你这个函数一调用,就应该发请求拿到服务器的数据。那咱们呢,打开咱们的控制台去看一下咱们network,你刷新来有没有,有,但是你会发现这次请求失败了。对吧,出现了一个404。
09:03
对不还出现了一个404,那为什么呢。哎,这里要注意一件事,咱们现在是有什么问题呢?是有跨域问题的,哎,7.1。跨域问题。那么什么是跨域呢?那这里呢,要注意一件事啊,如果出现了协议。或者是域名,或者是呃,这个端口号不同的啊,请求。对吧,那称之为什么呢?称之为,哎这个跨域。其实咱们接下来要解决的一个问题是什么?就是跨域问题,那首先说现在为什么会出现404啊,因为在咱们前台项目这个服务器上啊,它根本就没有这个接口。你看这是咱本地项目8080,在这台服务器上,它是没有这个接口的。而在咱们这台服务器上,就是后台这个服务器上才是有这个接口的。
10:02
对不,所以说你看咱前台项目是他。你看咱前台项目是他。对,不就是前台的服务器前端,而你要向这台服务器咋了发请求,获取数据。对不,那你看嘛,虽然说他俩协议是相同的,对不?哎,当然这块咱没有拷贝,对啊,当然咱们可以看一下,你看对于这两个,哎,这两个接口你看一下。首先说这个呢是什么,这个呢是咱前端项目的本地服务器。前端项目的本地服务器。这个是什么呢?这个是咱们要获取到后台的啊服务器。它两者呢,协议相同,但域名不同,甚至连端口号都不同,所以说出现了跨域。那么怎么去解决跨域呢?那咱们应该知道传统的解决方案呢?有阶层聘。
11:02
对吧,还有什么呢,那还有什么呢,就是代理。对吧,通过代理服务器实现解决跨域问题。那所以说啊,咱们呢,去解决一下子这个呃,跨域问题对吧,为什么呢?因为首先说咱们本地的这台服务器根本没有这个路径啊,根本没有这个接口,而是在这台服务器上才有的。对吧,那所以说咱们配置一下子代理跨域。那怎么配置呢?来看这儿。首先说啊,Web pack给咱们提供了这个功能。咱们找一下web pack。对吧,找一下他的文档。那首先说在它的配置当中,有一个选项叫做DV serve啊,有一个呢,就是代理的一个配置,就是这。对吧,那你可以在咱们的web pack.con.js文件当中去配置,那当然咱们目前是没有这个文件,而这个文件其实实质就是谁呢?就是v.con.js文件,就是它。
12:05
对吧,它你就可以认为是web pack.con.js文件,就是web pack的一个指导的说明书,告诉web pack该如何工作。对吧,就说白了,给挖派这个工具,我给你一个说明书,你该怎么工作。对吧,那咱们要配置代理跨域,那不就是这儿吗。对不,那当然咱们这里呢,要给他带走。那这里啊,老师呢,也要去做一下子笔记,那看这这儿就是啥代理跨越,哎代理跨越。那首先说看下这这杠API代表什么,当然你这不写杠API,你杠二哈杠泰迪都可以。对吧,咱们先说说这块的作用。也就是说前端在发请求的时候,你的路径当中带有杠API这样的请求,OK,咱们的代理服务器呢,会工作找咱们的这台服务器咋的要数据?
13:01
因为咱们应该知道服务器与服务器之间是咋的呢,是没有跨域问题的。对吧,而浏览器才是有跨域问题的。那所以说只要你的请求路径当中出现了杠APIOK会让咱们的就相当于老师呢,给你画一个图啊,画一个图。这就相当于是什么呢?这个就相当于是咱的前台项目。那这个呢,是咱的后台服务器。那首先说这两台服务器啊,这两个前端项和后端项,它两者现在存在着跨域问题。他呢是通过一个代理服务器去解决的,就是中间那个就是代理服务器。对不?那你前台项目再发请求的时候,OK,如果你的路径当中带有杠APIOK,你的代理服务器会找真实的服务器要数据。对不返回数据,咱们前端向进行展示。
14:00
所以说这个呢,你可以把它想象成是一个第三者。对吧,他可以帮咱们干什么,进行代理转发请求。虽然说服务器与服务器之间是没有什么的,是没有跨域问题的,而咱们前端是由于浏览器啊,它才有跨域问题。对吧,那所以说要理解这个杠API的一个作用,就是说白了,咱们前台项目在发请求的时候,你的路径当中带有杠API字段,OK,咱们的代理服务器对吧,第三方就开始工作了,哎,找咱真实服务器要数据,如果你不带,那就人家代理服务器一看啊,你没有告诉API,你这次请求我不给你转发。对吧,哎,这是他,那以及他给的是什么呢?是你要获取数据的那台服务器的IP地址就是他。就是数据来自于哪台服务器,你就哎写他的IP地址就行了。对吧,那所以说咱们呢,给他带走。
15:00
哎,这个老师呢,给他替换一下就是他。对不啊,当然呢,这里呢,要注意一件事,咱们的路径就不需要重写了,因为在咱们的真实的这个接口当中啊,已经所有的接口都带杠API了,你看吧,所有的接口都带杠API,也就是说只要代理服务器看到杠API,它就会咋的就会工作了。对不,而且真实的这个服务器上的接口地址呢,也是有杠API的,那所以说咱们的路径重写就不需要了。那接下来呢,要注意一件事。它是一个配置文件,配置文件需要重新运行一下它才可以。那咱们呢,再重新运行一下,那看一下子咱们的请求能不能发出去,以及能不能获取到服务器的数据,那咱们刷个新看一下,OK是没有问题的。对不,所以说那咱们不就完成了这个A的二次封装以及接口统一管理的业务。
16:07
对吧,看到了200以及服务器的数据都已经回来了。那这里呢,老师呢,稍微说一下子,在面试当中啊,他也经常问你什么是跨域,以及跨域的解决方案,像这些基础问题啊,自己呢,一定要稍微复习一下。
我来说两句