24. 尚硅谷_Mpvue_封装ajax请求功能函数

好来我们继续啊，那上节课呢，我们去把这个搜索图书的功能做完了以后呢，那这节课呢，我们去对我们直接写的代码呢，进行一部分优化，比如说呢，我们在搜索投入这呢，大家看。我们之前是不是用微信点request去发送请求啊，哎，那这个方法呢，是小程序提供的API在这里可以用，那其实在其他的页面，我们是不是很有可能也需要他去发送请求啊。那大家看，其实重复的代码太多了啊，你比如说每次调这个API，这是ul，这data，这都是很有可能都是必传的，包括success这是必须配置的，所以呢，基于这种情况呢，我们可以专门去分装一个发送JA请求的库啊来在这呢，Src下边我去创建个文件夹，叫us来代表工具的意思，那在这里呢，我专门去创建一个request.js，好呃，这个文件呢，最起码我们要干嘛向外暴露一个方法对吧？那这个方法里边应该写的就是这一堆内容，发送请求，我先把它拎过来，好，那拎过来以后呢，那最起码我们这用的时候是不是要引入这个对应的啊方法就叫呃，Request from上一级然。

后呢，应该是在上一题的you tell下面的request对吧？那这个request应该是不是在这儿调用啊，但是写到这儿啊，很明显不行啊，不行，为什么？因为里边的re思呀，以及呃，URL这都是写死了，肯定不行，那我们分装一个功能函数的核心思想是不是就是为了服用，哎，我们的目的是为了服用，那我们的核心思想是啥呢？哎，函数内部保留相同的代码，将不同的或者变换的数据作为参数是不是提取出去啊，最起码这个URL不应该写在这，那你应该是作为参数传进来，还有什么，那这个贝塔呢，是不是也也应该是动态的，然后呢，有时候需要传，有时候不需要传，所以呢，我们默认呢，可以给他一个空对象，包括什么，包括这个method啊method，那比如说我们给他设置一个默认是get啊。

方法的一个method，那对应的咱在这儿是不是也需要去，哎写一个什么method，来我来确认一下到底是method还是method啊，那在这里面呢，我们还是去看一下这个网络里边发行请求，找一下配置，这应该是按叫method，所以呢，在这儿呢，它也应该是method，好，URL这是不是也不需要写了，如果说有同学对ES6不熟的话，可能在这儿啊看不懂这几行代码，那这啥意思呢？这叫默认啊，行参的默认值，其参的默认值好写完这些以后，那最起码我们要知道，我们在这一块应该是吧，先去传一个哎地址HTTP，然后呢，Local，哎，HOST3000，哎包括刚才这是不是还有URL，那这个呢，叫什么search book。

对吧，那确认一下那个地址，我们看一下我们的接口文档就知道了，在上边啊叫search box少一个S，同时呢，我们是不是需要带一个对象，那这个对象是不是正好是上面的data塔呀，哎，方法的话呢，是ma，呃，是get，所以呢，这三个参数我们可以不传啊，不传那这样写完就好了吗？哎，其实还没有来回到我们分装的方法，大家看一下，当我们拿到了数据以后，我们是不是想要更新到这个搜索图书的组件的race的实例上呀？那在这写示race肯定不对啊，在当前的页面都没有这个race，除非你找到全局啊，执行上下文对象也是race指向的那个全局对象，好，那在这既然不行的话呢，我还是在这做一个输出，哎，做一个输出，那先没有这一行代码啊，那那这个时候呢，我们来到哪？来到搜索页面先去看看能不能发，哎，请求可以发送，包括这个数据是不是也能拿到，那这个数据能拿到以后，我们是不是得想办法把这个数据送给当前的页面啊。

那最理想的状态是什么？我调用你的方法发请求，那你能不能把数据干嘛啊返给。对吧，你返给我了以后，那后续我要干什么是我自己的事情，那这个时候大家想一下啊，在这儿你说我能不能用return。

能不能用return啊，这很明显不行，如果说这写return的话，你要你要记住一个事情啊，这个方法里边的任务是异步的，异步的话非阻塞它会默认的走什么走函数默认的return是不是return里find了，所以呢，在这儿千万不能这样写。哎，这个时候呢，我们就可以考虑什么，考虑C函数了，那就是说当你执行义务任务的时候，我就在这等，等什么呢？等你执行的结果，当我们想要等，这应该是什么位，是不是等？那当我们需要用位的时候，那对应的这是不是应该有一个角AC。好，这是一段，那等是等什么呢？等你异步任务的结果对不对，应该有人给我们送出来，那这个时候我们又得考虑一个点，就叫promise啊。

A think of it是吧？通常搭配的异步任务要返回一个promise对象呀，所以呢，我们在这儿去另一个什么啊，Promise，然后呢，在这个里边我们先把基本的写好啊，异步任务一定是在函数体了，那这有什么resolve，还有reject对吧？当我们一步任务执行成功，那这个时候我们可以去调用道，然后呢，我们去把这个data呢，哎去给他送出去，同样的如果是失败了，那对应的是不是有个feel啊，这是失败的回调，那在这里呢，这应该是有一个error啊。呃，我们可以送出去也行，不送出去也行，如果说要送出去的话，那这应该是什么叫re这样子调用同时呢，啊，我们去把error这个错误对象送出去，好，那这样一写的话有什么好处呢？那你resolve调用的同时，既可以修改我promise对象的状态，通知wait我异步任务的结果，同时是不是又能把哎，我想要的数据给我送出去啊，并且呢，会作为当前位的返回值来，这个时候我们在它的后面去输出一下这个啊这个呢是返回的结果数据，我们来看一眼。

那来到search，这还是输为A走，大家看数据是不成功的，送出去了，那result就是我们想要的数据，那其实剩下的还是一一个道点this.books是不是就更新下result就好了？哎，因为它就是我们想要的数组嘛，好，那这个时候再来看一把啊，搜索图书诶好一回车，哎，功能是不是还和之前一样，哎和之前一样，好到现在为止呢，我们已经利用什么，已经利用这个a think a bit以及pro是不分功能函数啊，并且呢，我们这个函数的灵活度还是比较高的啊，还是比较高的，那我们再想想还有什么能优化的，大家看这你这吧，写这个URL太长了，而且呢，如果说我们都请求同一个服务器地址的话，这个东西一定是固定不变的，那能不能这样，别让用户或者别让我发请求的时候写这么长，我就写个URL，因为它是动态的不就完了吗？

那其他地方你应该是固定不变的，哎，那这个时候呢，来到这儿，那这个URL我们是不是应该去拼一下串，哎它呢，再加上是加上一个URL是不是就可以了啊，就是把这些固定的地方挪过来，那这样写到这儿的话，就是说我们再发请求，这儿写的内容就少了啊，就少了，但是大家想想，如果说我到时候要改端口或者改域名地址或者改协议的话，是不是要到这里面去修改。

有一点不太好的是，我们现在分装的函数啊，就是一个单纯的发加次请求的功能函数，你最好是什么都别让我动，什么都别让我动，然后呢，我们尽可能的还是去降低它的耦合动啊，那怎么去做呢？我会选择在它的外边再去创建一个文件夹，比如说就叫for con.js，在这儿呢，我去暴露一个对象啊，其中有个host，比如说就是主机的名字，那这个呢，对应的就是当前这一个啊，这一块内容。来把它拎过来，把这个覆盖掉。好，整完这立以后，那这儿呢，就不需要这样去写了，我们再去引一个文件port啊conflict from当前路径下的conflict点，那这样应该怎么写，哎，对conflict.host是不是就可以，哎，这样的话呢，那这个功能函数它的任务就很明确了啊，很明确了，那最后我们再去测试一下这个功能。

A，走，你是不是这样可以，哎，没问题，那这一节课呢，我们主要是学了啊什么去分装一个。呃，发送adjust的啊功能函数，然后呢，我去把这个对应的，呃什么呀，我看我刚才是去做了一个输出对吧，那这没有打印，没有打印啊，也没有request，刚才我们在这儿送出内容也没有OK，那到现在为止，那这些呃功能里面就没有什么多余的代码了，好，这节课呢，我们就讲到这里。