00:00
大家好,我是学习园地的特约讲师高若峰,上节课咱们用will通过阿,咱们做了网络请求,做了一个get方法,一个post的方法,那请求的时候呢,咱们只请求了一个接口,就是呃,友情链接的这个接口,当然了,咱是模拟接口,那现在咱们在开发环境,咱们说环境有开发环境,测试环境以及什么环境啊,正式上线时的运行环境,那这几个环境中应用到的接口是不一样的,测试有测试的接口,正式上线有正式上线的接口,那咱们只做了一个友情链接的部分应用,咱们就在两个位置使用到这个接口,那如果有几十个,几百个,咱们一般项目都是三五百个接口,对吧?那么我们都这么使用的时候,那项目上线几百个都得去改,显然是不合适的,对吧?另外除了接口的位置,我们多个地方去使用曲写之外,那么还有这些配置信息,比如说转换函数啊,头信息啊,对吧,以及拦截器啊这样的一些信息,那我们都需要单独唯美的请求去。
01:00
去配置,那肯定也是不合适的,所以呢,咱们就需要学这节课的知识什么的。封装网络请求,那封装网络请求除了把这些公用的信息写在一起,基础信息写在一起之外,还有一个好处,那如果我们封装的请求的不是,比如说换成埃贾克斯或者是其他的,又有新的异步请求的技术出来。那么我们如果对吧,直接在我们页面上使用这种,在模板中使用这种,那我们假如说换成新的技术,也是每个就都换,那如果封装在一起暴露出去的,让别人看到,根本看不到他的信息。那么我们换其他接口的时候,只要放,只要是换我们封装的代码这个模块就可以了,项目代码你是不需要动的。所以这是封装的好处,那我们看一下就简化一下,我们现在这个程序就封装,当然了,封装的方法有很多,那十个人有可能写十种封装方法,那你觉得好用就可以用哪种都可以,对吧?或者你自己随便去想,能完成你的业务逻辑就行,那我们你可以在src目录下建一个,比如network目录,也可以用UTM第三方软件包的目录等等,建什么目录都行,那我们把网络请求我们就封装到我们的,比如说network吧,就网络请求好一些,你可以建一个uts目录都可以啊。
02:13
Network网络请求的目录在里边。我们新建一个文件叫。嗯,不是会E组件的啊,组件是模板的,咱们建的是一个模块,咱们就是JS文件嘛,比如说request iqst,外边目录是网络,这里边是请求,对吧,网络请求点JS文件在里边呢,那我们现在还是建议用X对不对,所以呢,肯定得导入什么a iOS,当然这个名称你随便写大写的呀,什么都可以啊等等都可以让我从A。从这里边我们得借助它帮你完成,然后呢,我们封装成一个盖的方法,一个POS方法,你比如说我们在这里边,如果用AX iOS封装点get方法在这里边。你看我们这么重装啊,不用这个,我们导出一个EXP,导出一个声明一个get的方法,声明应该的方法需要传递一个ul和p RA Ms一个参数。
03:13
当然这是我们暴露出去的一个方法,所以用大块括起来,那这里边我们调用as ls.get那还用这个里边的get的方法,这样的话,我们暴露的外边名称就直接盖的方法就可以了,然后呢,里边一样去写什么是ul,把我们传递参数ul拿过来,然后呢,把这个参数,当然这个参数应该放在接里边,还有层对象放在这里边,PMS放在这里边,这是get方法,然后呢,我们为了让外边get,我们在用get的时候,比如说用get方法的时候,在外边啊要的时候还可以使用Z这样的点,Catch这样方法,那我们这块怎么样re一下。返回去,直接返回这个方法,因为它自带promise对不对,所以呢,它可以直接这么用,那我直接返回这个就可以了,用它调用。这就是封装盖的方法,那我们一样可以封装一个什么POS的方法。
04:01
那export action封装一个post这样的方法URL,呃,Post也是全ul,然后PL date数据吧,我们就叫做数据,或者你叫什么都行,P RA Ms也是一样的,比如说一个参数,那我就加,也是加这两个参数,然后我们return里边的post方法,对吧?然后我们存先不用存,具体的使用ul,然后参数这块kr a Ms,我们就直接在这块把这个对象传起来,然后后边我们这块加的就是我们转换方法,记着写在这个里边了,对吧?整个这些你拿过来连横不动的。当然还有一些其他配套,你可以跟你的情况去加到那个X奥的官网里边,你看一下他的手册对吧,去加你做就行,这样的话我们在外层调用这个方法的时候,你看直接存UR存数据就可以了,配置东西在公共地方相当于帮我们写好了就可以了,但是我现在在这两个地方在用UR的时候,比如说我用post。
05:01
用post这样的方法在用的时候,那肯定还会有一些问题方法对吧,那我写ul是不是还是是写一些API点什么什么什么什么3w edo work.c下边的什么I什么什么,是不是还得写这一大串啊,所以这个还没达到,如果想要我们这个,那我们可以用缺省的配置,缺的配置或者是全局的配置,那这里边我们创建实例,用创建实例的方法就可以了,比如说cost创建一个呃,实例instance in s随便写的一个in ten12 in32都行,创建实例等于我们使用X里边点create创建,在这个里边我们写上一些配置项就可以了,比如说。这里边写上嗯,Best ul基础的ul是什么呢?就是假如说我们现在还是用这个接口,HTTP冒号,然后api.e Du work.cn下边的I,我写到这,那后边写link呀,或者是link a啊,那就根据我们这识,现在假如我们是在做后台,那所有后台的请求我们做到这块对吧,那假如说我们。
06:04
呃,项目上线之后,Am接口,假如我们需要加个版本V1对吧,那我们这块一般都在这加,后边这块加V1版本。对吧,或者V2这是又一层目录,防不同版本的API,那我们可以在这里直接改就行了,那所有用到的基础地址地方是不是都变了这样的一个结构,这里边接,比如再来一个太帽子,时间就是五秒钟吧。这样的话,我们在使用get和post传递的时候,就不需要传什么了,传这个了,但是我们这块是创建了一个实例,就不是原生的这个了,所以呢,我们这块也不用R了,我们直接用我们创建这个实。这块,那这块我们也变成instance post,这样的话,我们才因为用同一个实例,才能用实例里边这个默认配置对不对,不然你用全局配置,这咱们在阿里边都讲过的,当然我还可以暴露一些其他的方法,不光这个,因为我们ttp的动词有很多,比如说e pert,暴露一个,假如说D,呃,fun.section你比如说呃,DL对吧,删除的方法,那这里边传一个URL,这里边就传一个UR就行了,呃,然后我们这里边直接。
07:08
返回一个instance里边点delete,实际是动词里边用的是delete啊,那我们只能简单用一个这个L,比如说ul装,那你put对吧,什么方法这里边好几十个呢,用了好几十个,十几个应该是对点你看我们这里边bos好吧。对吧?Get put,你想工装哪个你就自己背,单独去碰撞就可以了,一个一个去碰撞,那我这里面就碰装这几个其他的动词你自己去碰撞是一样的。那么现在这个封装完了,那我们看一下具体的应用一下,那我们就把我们前边这个项目,我们去改写一下,你看我们在这封装完了,假如说我现在想把我们的这个,呃。请求这个。我们这块就去掉了,不使用它,那上面是不是也不用直接包含阿西吧,我们直接用请求的,在页面里边根本看不到,在模板里边,就是组件里边根本看不到阿的存在,这样的话我们用别的请求,我只要改这个文件对吧?改这个包里面的文件数据换成别的请求,对外暴露的接口是一样的就行。
08:10
那我们就不需要每一个地都改了,所以这里边这个是不需要的,当然把那代码是给你注释掉了啊,然后我们按导入,比如说我们这这块是有听力这块获取接口,只是获取用盖的方法,那我就直接盖就行了,然后from从当然了,你可以在配置文件里边,Vuee的配置文件里边,咱们配置它的统一的一个路径,这没有路径就得找你看我那接口现在在呃这个位置,这个位置它的上一层目录下边的network这个目录,所以得上一层目录下network下边的有一个request对吧,这样去包含才可以,这样的话我们就直接有get的方法了,那你在want里边的请求的时候,我们就直接可以get这样方法,然后我们直接可以th in点这方法,然后呢,Cat t方法都可以了,你比如说get的方法,请求接口的时候,那我直接在base URL基础上对吧,这块已经在这块不加写,这一般接口这两个是拼接的关系啊,那这块那我那不在写杠,我这就加一个link对吧,你看直接写这个就可以了,这接口的基础位置全部我们换掉了,那请求接口。
09:11
当然我这块。没有去查那个数据啊,那。你后边再加那个请求数据也是一样啊。你看我们这块,呃,加一个,嗯,这块是res,当然你这个是自己定义的函数参数叫什么名都行,给你带,我们将这次里边的links linkx,它等于res里的dat dt,这样的话我们把获取的数据付给他就可以了,然后catch里边ER。如果有问题,比如网络出错,请求出错,那我们都可以在这边去打印12.2打印一下。一样可以获取这个数据对吧,这上面是一模一样,但是你看这段代码和这边代码的写写法对吧?其他的地方一样,但是你看正好能看到,我用的是阿奇奥,看不出来对不对,你这会就能看出来。这块是封装成自己的一个方法,而且路径给我们简化了,那我们再试试传参数,比如说在这块传ID等于没一的存一下,你看就有一个是一的,对不对?那我们在这块再传一下,它不有一个第二参数吗?那我们。
10:10
呃,穿一个。IDE。你看也是一样的,对不对,那九。啊,没有九有一个九,那这或者带八八的现带,当然你可以存参数,也可以不存装。用理论存一个参数的吧。嗯,传一个,那就获取一个,那你多传几个,因为这里查询咱们就是有按这个和按名称对不对,有按那好像还有按那等。学。不旺记那个接口啊,原地你看有没有这个查找,你看有学习原地包含学源地的都给我们查出来,对吧,所以查类似于查询的时候,我们自动去取就行了,这是钙的方法,那我们再用一下。在这里边呢,我们还有一个POS方法,那同样我们一样把什么把上面这个引入这个注释掉,我们现在不需要了,我们只需要导入。
11:01
导入什么按导入。加个这个大括号,然后我们post直接把那里边方法给我拿出来,在哪呢?这个在多一层目录,所以在上一节目录下,上一级目录下的network下边的re request请求获取到,然后我们原来请求的所有的。在这块假如说咱还是这个方法,当然验证什么的,你都可以在这个方法里面用其他的方法哈,看把原来的去掉,我这里边直接写上post,那URL什么呢?就是我们直接斜杠link下边的A添加,添加什么数据呢?这次里边的Li link。选这个就行了,其他参数你看我都不用传就可以了,然后N如果成功的话,res.RO OG res就里边没写啊函数啊,写个参数i.ROOG调用,然后如果失败的话,一样这块可以接受ER点。接受。
12:00
er.ROOG。来我们试一下,刷新一下啊,这块写上,嗯,是222,上节课咱们写111嘛,然后二二。写上。嗯,二二随便写几个,然后我把这个给打开。不打开的话,我就成一个学学习园地啊。随地222,因为下面没有随加二是不是尽量数据。搜索的学地的吗?今天我刷新一下。你看雪线加二就有了,对吧,一样的添加成功,那你对比一下代码是不是我们这块写的时候是不是要方便很多,把公共部分都写在哪去了,都写在。这个里边了,就是request里边了,当然这里边我们还可以分做一些其他地方,比如说拦截器,假如我们后边做项目肯定有登录处理啊,对不对,有请求的拦截器和响应的拦截器对不对,那我们可以用嗯,Instance里边点这个里边的,比如说请求的接请求。
13:01
Re q u EST请求的拦截器,就是你向服务器发送消息的时候,他先拦截去处理一下,比如说给你补足一些套位信息,给你设置一些头信息等等,对吧?设置完之后放行,然后又。在里边。嗯,这是白净器。这里边儿呢,柚子里边需要传两个方法啊。传两个方法,一个呢是处理的方法,一个是错误信息的方法,也是因为IG这个。大括号。这是穿一个。这块来,然后这块选这个。嗯,看一下,然后还有一个。回调还有一个错误处理的,比如说E就加上这个错误处理的。有两个回调方法。这个参数。我看一下啊。嗯。
14:00
理解错了这个参数。你想?是不是我们少了一个?少了一个括号,括号吧。这块这块少了一个大块,这少了一个大块。然后这好多了一个我自己回家啊,这个他就没有错误了,对不对,然后在这里边,我们假如说中间你可以配置很多东西,比如说肯个点harder对吧,具体有什么信息,你可以看一下那个呃阿器里边比如talking对吧,Ton信息等于比如12345,比如当错123456等等等等这些信息都可以在这块去配置对吧,比如加上to,然后呢,我们放行return r天。这样的话,不放行的话,就在这拦截住了,你加配置信息,配置完之后再返回这个配置信息,就相当于它拦截在配置信息里边加一些数据,然后再放行,他提交服务器的时候就带一些这个数据,是这样的一个原理,那错误的时候呢,我们就用用服。呃,Pro去处理就行了,然后pros里边的这个,然后将E这错误消息传进去处理就可以了,那同样有请求拦截器,那我们就有什么,就有响个拦截器,intense.inter这个点响应点又一样的,里边我们需要也是放两个参数,一个呢是响应的,响应回来的数据,响应回来数据,但是这容配着与ree。
15:27
这名称随便写吧,就叫这个。想了,然后如果有错误的话,ER or一样调用这个方法,那我们在这里边一样让它下一级去处理,在这不处理有错误对不对调用的地方去直接返回这错误消息往下往下传递嘛,不密这个嘛,对吧,拒绝嘛,对吧,拒绝直接把错误消息往下传,那别人使用呃,其他的那个catch就可以捕捉到这个拒绝的错误的信息嘛,然后这里边我们直接放行吧,直接re这块,当然了,我们可以在这里边看一下它这个能不能执行到这拦没拦截到对不对,然后比如说我这块是。
16:05
嗯,响应拦截器,那么就是Rep SE正好来这个点rot,然后嗯,响应的信息你都可以re,从把这个做处理,这个参数就可以rog re SP ns,嗯,那同样。这款。假如说我们想在这块去拦截一些数据,比如处理一些头信息,那在配置信信息这块就IG。CU Fi接错,然后这块con Fi你可以在这块去处理,然后去打印,那我们看一下拦拦截成功。你比如说我现在在这块,呃,刷新一下。你看这块我们是请求数据是不是就响应嘛,对不对,请求的时候是走这块了,对吧,是访问link get的方法还是这块对吧,这些配置信息都在这块。在这块。然后呢,减回来这块。
17:01
这是响的数据,你可以针对这个状态码去判断,通常呢,我们在响应的节奏中,根据状态,然后我们一直加什么,加这个,呃,加等待符号,或者是等待箭头,当数据全返回来了,状态比说这个状态码变成四了,或者几个对不对,那我们这块再把这个等待的,比如说小圈圈对不对,换成我们真实的数据等等,你都可以在这地方去写。拦截处理请求,请求的时候对吧,去开始设置这个呃动画,然后响应数据回来的时候,等于几的时候,再把这个动画换成我们真实的数据就可以了。直接放行,那就是替换一下我们的数据,根据状态判断,然后给用户不同的提示,这是响应拦截器需要处理的,那请求拦截器需要处理的。这就是我们,嗯,网络配置,当然了,每个人写这个配置方式是不一样的,你能达到你的目的就可以啊,总之简化我们这个应用,不然的话,我们写代码的时候重复性太高了,对吧,还不好维护,那如果你把它封装成一个公用的文件,其实我们就把公用东西提出来。对吧,提出来之后在这里边写全局的东西,在应用的时候,我们用起来就比较简单了。
18:03
好,谢谢大家,这节课我们就学到这里。
我来说两句