00:00
来咱们继续啊,那我们上一节课呢,已经成功的拿到了数据啊,然后回到我们的代码这一块,大家看我们现在呢,发了一个请求,就写了这么多的代码。那你接下来再发请求的话,那最起码这个整体的结构应该差不多,URL你得写data成功的回调对不对啊,那这样的话有点太麻烦了啊,太太繁琐了,代码量也太大,因为很多的东西呢,其实都可以服用,所以我们针对于我们这个需求呢,我们去分装一个功能函数库,OK,那么在这里。我呢再去创建一个文件夹叫us啊,叫工具库,那在它的下面呢,我去整一个啊request.gs那这个呢,专门用于去发送我们的啊这请求。那现在呢,我们要去分装对不对啊,要去分装,那要去分装的话呢,我们就要注意一下啊,你如何去分装一个功能函数库那。
01:02
嗯,在这儿呢,我去给大家写一点注释啊,那这个呢,第一个啊,我们说啊分装。功能函数如何分装,然后呢,我们再讨论一下啊,这个分装这个功能组件如何分装。对吧?呃,首先在这里我们要注意啊,那分钟功能函数,首先我们的功能点要干嘛要明确。对吧,然后呢啊,我们函数内部啊,应该保留什么啊,保留固定的部分,固定的代码。那这个固定的代码,那就是说它是静态的代码。对吧,那然后呢,将这个动态的数据啊,抽取成什么啊,抽取成这个行参啊,由什么呀,由使用者啊,根据自身的情况,或者啊自身的情况把动态的啊,然后呢啊动态的传入我们的食材。
02:02
这是分装功能函数,我们要注意的,那那接下来呢,我们聊一下那个分装功能组件,那这个呢也是啊功能点要明确,嗯,然后呢,我们说啊组件的内部干嘛也是保留啊静态的代码,嗯,那组件这一块呢,将动态的数据要干嘛。抽取成。什么呀啊,Pro参数有啊使用者。也是啊,根据自身的情况。那动态的传入什么?使用情况啊,以这样吧,以标签属性的形式啊。哎,动态传入我们的啊pro数据。对吧。那光有这些还不够啊,我们还得说那一个良好的组件,那我们应该去设置我们组件的什么呀,那必要性及呃,对应的数据啊,类型那一样的啊,一个良好的函数。
03:13
哎,良好的功能函数,我们应该去设置我们啊形态的什么。默认值。你想啊,假如说我要请你传一个数组,我紧接着要变历,那万一他没传,或者说传入是个对象,那么接下来我们用数组的方法,比如用for each或者map等等,它一定会报错,那为了避免这种情况发生呢,我们可以去设置行参的默认值。那现在呢,我们可以用ES6的什么呀?就是ES6的行参默认值对吧?啊ES6的啊行参默认值即可,OK,那这是这个啊,我们要注意的。那么这个组件这一块呢,也帮大家回顾一下吧,你比如说我们之前设的是off。
04:02
哎,设的pro在这里,我们是不是就可以去规定一下它的必要性等等啊,比如说我们传了一个message啊,啊,那这呢给大家补齐一下,那这个message呢,我们可以去设置它的啊,比如说require。对吧,啊,比如说为兔啊这块应该叫。哎,为处应该是require的啊,那这个呢,我有点忘了这个单词,呃,还有什么呀,还有你比如default,哎,你比如说这个是啊默认值啊,同时呢,我们是还能规定它的type,你比如说string啊,那就是一个类型呗。哎,那就这些啊,就是这些OK,那就是讲小程序的同时呢,帮大家大家去复习一下啊,我们之前没有相关的东西。好的,了解了这里以后啊,那这一版呢,我们去分装一个功能函数,我把这个注释先收起来。首先你分装的函数呢,一定是为了复用,所以呢,我们要用模块化的思想呢,将这个函数暴露出去。
05:07
那么对应的代码啊,其实就这一堆呗。就在这儿,我们要去发请求。对吧,那首先动态的东西你是不是要抽取成参数呀,URL一定是动态的,贝塔是动态。对吧,那如果说我这儿抽取出来啊,注意这就不需要写了,贝塔是不是也不用写了。没有问题。啊,那这儿呢,我这样能够删到这儿呢,是因为这个ES6的什么呀,对象的解解方式啊,同名的属性可以省略不写。好,那这是这个,OK,我写成这样还不够。那现在我们分装呢,是为了适用于各种场景,你要注意啊,你分装的功能函数既要能发。Get请求,同时是不是也得能发post以及其他方法的请求啊,那这个时候呢,In methods也得写成动态的吧,所以我们再抽取一个啊。
06:04
那。写成这样,大家再想想看,还有什么我们可以优化的点。对吧,那么这个method,哎,这个你要注意啊,假如说啊,用户调用你的方法去发请求了,那如果我发一个get的话,那我能不能不传呢。不传是不是应该是最好的呀?哎,那这个时候呢,我们就可以设置一个形态的默认值,比如说默认值为get。那你get就可以不用传了啊,你要发其他方法的请求了,你再传。Date的话呢,也是一样的,因为我们统一要用对象的格式了,我就写个空对象。对吧。啊,URL有没有必要写默认值。那其实它是没有必要的,你想你要用我的方法发起去,你必须要传URL,你连URL都不传,那我肯定不给你发。所以URL这不需要写。哎,那就是这个。
07:00
那么写完这以后啊,我们琢磨一下,假如说我在当前这个页面要用,我们第一步是不是要去引入它可能叫import这个request啊,然后呢,上一级U下面的request。就这个呗。那么紧接着我们要发请求啊,那这些呢,我就先住着啊,我们用我们的方式去发,那就request呗,啊对应的地址。那就这个对了吧,那么对应的参数呢,啊,就type为二。因为我们要发get请求,所以呢,不需要传method。好,那就是这个,那关键的问题来了啊,我现在发起球是能发我们看一下啊。刷新。嗯,大家看请求都成功了,没有问题,关键是在哪拿到的数据啊,你看在request JS。那也就是说,我现在拿到数据的地方是不是在这儿呢?那在这拿不行啊,因为啥呢,我最终是么在这个页面里面要用。
08:04
那你想想看,你这里的数据,你是不是得想办法给我返出来。那我想问一下大家啊,我能不能这样直接接触一下它的返回值,Let等于它。然后。我去打印一下这个结果啊,那这个呢是结果数据,你说我能拿到吗?那肯定拿不到,因为现在我们这个函数并没有任何的返回值。对吧。那可能有的小伙伴想了,我能不能这样啊,我let。对吧,然后。等于这个res,我是不是接收一下这个成功的数据啊,那最后我干嘛呢,我在这return这个。可以吗?那这样我们先来看啊,最终的结果是什么。你看啊,请求成功的没有问题,但是你拿到的结果一定是安代放的,而且有没有发现先打印的这个结果,最后才打印成功的回调里面的这个打印。
09:06
哎,好好琢磨一下啊,为什么会出现这个问题?现在我们这种做法根本不靠谱,因为啥呢?从26行开始,这是一个异步任务。异步任务的特点是什么?是非阻塞,所以在执行二十五行以后,紧接着什么开这个异步任务,那么这个异步任务一开。请求他没有成功,我是不是就立马去执行这一行,因为他不堵塞嘛,那这个时候返回的始终是。And find。所以我们这样做根本不行。啊,那你分成功能函数,你就要解决这个处理这个什么异物的问题。来,那在这儿呢,我们最理想的状态就是,呃,你这该发发。该发发你的请求对不对,那你虽然说是个异步任务,我能不能等你的业务任务呀。
10:02
一说等待异步任务的结果,我们立马能想到wait。对不来,一用到awa呢?我们立马能想到我们是不需要搭配a sick去使用。好,那这是一段,然后用上wait以后,我们就想,诶,Wa后面的异步任务通常需要返回一个什么是不promise的实例呀,那也就是说当前这个功能函数的返回值就应该是一个promise的实例。所以我们分装这应该要去改一下这个代码,看着啊,Return一个new promise对吧,在这里。我们是不是返回一个promise的实例,而且在他的执行器里边,我们去执行这个一模任务。在这要注意啊。当我们。嗯嗯,当我们一旦说new了这个promise。我们要干嘛啊,那这个呢,相当于是啊初始化啊promise实力的状态,为什么呀。
11:09
对的吧,紧接着我们是不是去执行了一波任务啊?I,这拼错了,嗯,执行完异步任务,如果是异步任务成功了,我们要干嘛?我们是不是要去修改这个promise的状态?注意啊,它不可能一成不变,是初始化法,我们是不是要将它的状态修改为成功状态呀?哎,那如何修改呢?我们需要用到两个东西,一个叫绕,一个叫reject。当你要修改它的状态为成功,你需要调用resolve。同时我们是不是需要将这个一步数据传出去?那这个时候大家要注意啊,我们最终拿到的数据。看一眼。嗯,先不用管下边,下边呢,现在我还没有写完,我们看上面我们拿到数据呢,是服务器返回的所有的数据啊,这里呢,包含了cookie啊,什么hander请求头啊等等,而我们最终想要的其实是data中的数据。
12:08
啊,就好像是我们用URL地址呢,在这儿测试这个接口,拿到这个对象。那为了方便的话呢,哎,我会这样去做啊,注意我会提前把这个贝塔呢过滤出来。然后交给我们的页面去使用,也就是我这儿要往出送的数据呢,应该是res点。啊。这个应该能懂啊,就是说我们其他的乱七八糟数据呢,不用我就提前给它过滤掉啊,那失败的话呢,我们就是调用这个reject对吧,同时呢,把这个error送出去呗。OK,那这是这啊这个啊,那这样的话呢,我们再来看一下我们最终的啊。效果能不能拿到数据,哎,结果数据有了,Banner没有问题。好,那以上呢,是我们用promise,包括结合着哎a think of it呢去给大家分装,那么上面这个我们就不要了。
13:09
接着的话有什么好处呢?就是你再发请求,你看一下啊,我们调这个功能函数就好了,对不对,但是吧,现在还不太完美。你看啊,现在我们就知道我们的接口是靠,而前边这个是不是请求的是固定的服务器啊。那这哥们儿在接下来任何的请求里边,他都是这样的。那我们能不能不写呀?每次写这么长太麻烦。哎,那小伙伴肯定能想到啊,我们是不是可以在这儿提前去写好它,那最笨的方式呢,就是这样呗,我们用户传入只传入你要请求的地址,而前面跟服务器相关的这些信息呢,我们提前写好。这样做其实也没问题啊,你看啊,我还是能够拿到数据。对吧,但是吧,还有一点不太好,那我们分装这个函数呢,就是为了发请求的。
14:06
而里边的这一部分内容呢,和你的服务器相关假设啊,之后我们服务器的协议要改,或者域名要换,包括端口号要改,我们是不是还得到这儿去改。那不太好。不太好,咱们这儿就是发现球道。所以呢,为了你的耦合度再低一点啊,我们再去整一个文件,比如说我叫它啊conflict.gs那这个呢,是专门用于去配置。啊,我们服务器啊,相关信息export啊,比如说一个对象在这里呢,我来一个host,就是服务器主机的意思,然后我把这个信息。拿走,放到这里。那这样的话呢,对应的发请求这呢,我们需要去引入一下这个服务器的配置对象,对吧?From当前路径下的。
15:00
那么对应这应该怎么写呢?因为你暴露对象啊,所以呢应该是config。点host,那这个呢是吧,就是我们服务器的这个信息啊,那这样的话呢,把它抽取出来啊,以后我们再要改服务器的信息,你就到这儿改啊,你要改发请求的东西呢,在这儿改。哎,很明确,好的,那最后我们再看一遍啊,我们能不能拿到数据没问题。对吧,那这节课呢,我们主要是对这个微信点request呢进行了分装,然后大家要注意啊,这个resolve它的作用是什么。哎,它的作用呢,我给大家补齐啊,那这些打印呢,我就不要了,给大家注掉,那这个呢,我们也掉啊。啊的作用啊,它呢,哎是修改我们。嗯,Promise的,哎,状态为啊,成功状态那就叫。
16:00
对吧,而下面呢,这个reject它的作用它呢,是用来修改这个promise的啊,状态为失败状态,嗯,叫rejected。对,是这个OK。那以上呢,就是完整的一个分装啊,那我们这节课呢,讲到这里啊,需要小伙伴下来自己去手动去给他分装一个功能函数,因为之后呢,我们要经常去用好了,本节课呢,我们就讲到这里。
我来说两句