00:00
哈喽,各位小伙伴们大家好,那接下来咱们去完成as设的一个二次封窗。首先来说啊,对于我们目前而言,我们已经完成了home模块的静态组件的拆分以及展示。也通过postman工具呢,去测试一下子接口,它也是能用的。那接下来你就是要向服务器发请求,获取服务器的数据以及展示数据。对吧,那所以说咱们前端要向服务器发请求,那当然你的手段有很多。比如说像原生的叉mlhttp request构造函数可以。而且有的时候啊,他面试的时候会让你手写原生的阿贾克斯。以及还有谁呢?像这种fech新增的语法也可以。当然也可以用传统的GQ,当然项目当中常用的是as。
01:01
所以说这些方式呢,都可以向服务器发请求。对吧,但是咱们采用的是。那这里呢,有一件事儿,那咱们呢,做一个小标记,就是为什么。咱们需啊进行二次封装,As设呢,就为什么要封装它呢,其实啊,As设二次封装主要是为了一件事,什么事呢?就是咱们的请求拦截器。还有谁呢,响应,哎,拦截器。其实主要的目的就是搞咱们的请求和响应拦截器,那么请求拦截器啊,就是请求拦截器,你要注意呢,可以在发请求之前啊,可以咋的,可以处理一些业务。那以及呢,还有响应拦截器,那就是当服务器服务器。对吧,数据返回以后啊以后。
02:05
那怎么的,哎,以后。可以怎么的,可以处理一些事情。对吧,那所以说咱们的项目当中啊,目前而言是没有as的,所以说咱们呢,去安装一下。那打开咱们的这个CMD控制台对吧,那咱们的去安装一下,走CD进入到咱们的APP目录一下,CS一下对吧CNPM因此的。杠杠,Save咱们的as。那这里呢,要注意,如果说没有as基础的同学啊,你可以看一下the g或者是NPM社区里面都有相应的文档。对吧,那咱们先看一下的as有没有安装成功。对吧,咱们去看一下安装成功了,最新版本是0.24的。那接下来呢,有一件事要注意,在项目当中啊,就是六点几6.2,比如说在项目当中。
03:07
哎,当中。那么经常会出现一个文件夹叫做API文件夹,那这个文件夹就是放什么呢?就是关于as请求的啊,一般都是关于as。那所以说在咱们的src的目录下,咱们新建一个文件夹叫做API。对吧,那咱们呢,先进行对于A的一个二次封装,那咱们搞一下应该是咱们的src下这个API,那咱给它起个名字吧,就叫做request.j。对吧,叫做请求,那这里面呢,咱们就得做一下笔记了,那也就是说这里需要怎么的,哎,需要对于Asia进行二次封装。那首先说啊,你是利用人家已有的as呢进行封装,所以说你得引入进来import。
04:05
Asia,谁呀,Asia?对不?哎,那这块咱搞一下应该是A叉LS。对吧,那老师问一下,那如果老师这么操作呢,如果因为你得对外暴露啊,你不对外暴露,那它指定使用不了,那如果说你现在这么写export default谁呀as,那老师说我说二次封装完事了,你信吗?这不扯淡呢。那说白了,你就是引进了人家的Asia对吧?对外暴露你什么都没做。对吧?那咱们为什么要对于asus进行二次封装呢?咱们刚刚老师也说了,主要是要用到它的请求和响应拦截器。对不,所以说你看咱们呢,接下来去搞一下子来看第一步,第一步呢,老师要做的一件事是什么呢?就是利用。As对象的方法啊,叫做什么呢?叫做create,去哪了呢?去创建一个as实例。
05:10
就是咱们可以怎么这么cost一个,比如说咱们就叫做request,等于什么呢?等于as点。而create方法里面呢,是可以传配置对象。这里面呢,你可以进行配置,它是一个配置对象。哎,配置对象。那这里呢,老师呢,说一下其实request就是谁呀,就是咱们的这个request。哎,Request其实它就是as。哎,就是as,那只不过咋的呀,咱们呢,可以稍微配置一下。比如说咱来一个叫做base。背CL,比如说咱来个叫做杠API,那这行代码是什么含义呢?老师说一下。Base URL代表的是基于哪一个路径?
06:02
比如说老师写这行代码的作用是什么呢?比如说咱们经常发请求,对吧,就让老师做一下笔记。来看这儿就是咱们的接口当中啊,哎,接口当中。咱们的这个接口当中啊,它的路径都带有什么呢?都带有这个杠API。那老师刚刚的这行设置是什么意思呢?就是当发请求的时候,比如说再来一个叫做HTP对吧?啊某某某某啊点啊比如说啊叉叉叉对吧?哎,点冒号啊,比如说8080。对吧?Base URL的作用是什么呢?是在你发请求的这个路径上都给他带上,谁带上API就不用你自己书写。对吧,所以说这个是什么呢?是咱们的基路径,哎基础路径,那也就是说你发请求的时候。对吧,那么路径当中啊,会哎出现API。
07:01
啊,应该是小写的API,就不用自己手动的一个一个去写了,这是他第二个就是什么太帽子。啊,超时老师写个5000,这个代表什么?代表请求超时的时间。代表请求超时的时间为多长时间呢?哎,时间是几秒呢?是五秒。比如说你这个,这你当前发了一个请求,在五秒之内,如果没有响应,那你就结束了,那就失败。对不?所以说这两个配置对象你要看懂,特别是base ul,说白了就是在你的请求的前面,比如说有一个接口叫什么叫API啊,杠list-car,对吧?哎,那咱们呢,写了被CL以后,你再发请求的时候,其实就写谁就行了,List car。对吧?而在路径当中它会默认给你带上谁告诉API对吧,在前面会带上。所以这块要注意。那接下来呢,咱们呢,还得说说,说说谁呢,就说说他了,请求和响应拦截器。
08:05
咱们先说谁呢?先说请求拦截器。所以说请用拦截器呢,它呢一定是有它自己一定的作用。就是在。发请求之前,那么请求。拦截器可以怎么的,可以监测到,就是你只要一发请求,OK,我的请求拦截器对吧,是可以拦截到。对吧,那他可以怎么呢?可以在请求啊发出去之前怎么的做一些事情。对吧?那请求拦截器怎么搞呢?那咱们看一下应该是request,它不就是as力点谁呢?Interceptts这个单词本身的意思就是拦截器的意思。对吧,那么什么请求呢,叫做request,当然这个呢,咱最好别重名,咱们叫request。对吧,加一个S,这是请求拦截器,对吧?点什么点use。
09:03
但是这里的语法,有的同学可能说,老师我记不住。对吧,没事儿,到时候你可以参考着人家的文档,对吧,原封不动的八也能用对吧?那这里面呢,有相应的回调,那这里要注意,这里面有一个配置对象叫做con。其实config是什么?咱写一下吧,Config。哎,Config它呢是一个配置对象。哎,它是一个配置对象,而这个对象里面啊,有一个东西,有一个属性很重要。很重要,就是谁呢?Hier,请求头。哎。所以说呢,咱们呢,会把它的原封不动返回即可。对吧,那这个呢,就是所谓的请求拦截器,而且老师再说一下子,这个请求拦截器当中,这个孔当中包含什么,包含一个请求头he。对不,这件事儿一定要注意,所以说这是咱们的请求拦截器,还有谁呢?还有相应的响应拦截器,那咱们也搞一下。
10:06
哎,响应拦截器。叫request点点。对不,那响应拦截器这里面呢,其实你可以传入相应的成功与失败的毁调,比如说成功的毁调以及失败的回调。那么成功的回调呢,会返回服务器响应的数据,那失败的回调呢?那咱们可以给他来个error。对不?哎,那比如说成功,咱们一般做什么事,写一下子,这个是服务器成功的回调函数,比如说服务器响应啊,数据回来啊,以后咱们的响应。拦截器可以监测到,那么可以呢,做一些事情。对不,那么返回的数据当中啊,它尽量带date,咱们可以简化一下,就是把服务器返回的数据哪个字段呢,就是res.date字段给它返回就行了。
11:07
对不,那以及失败这里你可以弹出一些啊,比如说呃,响应失败对吧,这写一下子,这是服务器。响应啊,失败的回调函数对吧,那这里面呢,你比如说打印一些比如说错误的信息啊,对吧,或者终止咱们的promise链都可以对吧,比如说promise.reject终结这个promise量对吧,你有一个ERA,比如说传一个,咱就传一个file。对吧,就是终止咱们的promise,所以说这是咱们的一个请求和响应来截器,当然有基础不好的同学啊,可能会说老师啊,这个我记不住啊,这没关系啊,你看如果说你记不住来,老师呢,给你们打开咱们的这个NPM社区,咱们可以看一下,老师给你们看一下。他们是有相应的文档的,你就搜Asia。
12:03
对吧,或者你就直接搜as文档,你看它有没有,它指定有在文档当中呢,他呢也是有说明的,你可以按照人家的这个文档啊,一步一步的去走,一步一步的去搞。对不?哎,当然咱这个网络可能有点慢,对不,那所以说啊老师呢,在这呢,也写一下子吧,做一下笔记。哎,就是如果啊,6.3 6.3就是如果有的同学。对吧,这个A式子咋的,这个基础不好。对吧,可以参考什么呢?参考get啊get。对吧,或者是NPM关于谁呢?关于as的文档可以稍微卡。对吧,所以说请求拦截器呢,它还是相对比而言呢,挺重要的一部分,但是这里的代码有的同学说老师用不用死记硬背,当然不用。对吧,但是对于最基本的这个AS2次封装,那你这儿你得看懂,那当然最后你是需要把asus这个对象对外暴露的,那所以说咱们对外暴露一下request不就完事了。
13:10
所以说这里呢,是咱们对于A的一个二次封装,加上了请求和响应的拦截器。
我来说两句