uni.request是网络请求
image.png
每次调用一个云函数，或者是一个请求的时候，每次都要写这么一堆的代码是不利于我们代码的维护的。
image.png
我们只需要关注我们成功的返回。失败的返回统一处理，把错误交给库统一的去处理

工具类

common下新加api目录
image.png

新建
image.png
我们最后可能是需要一个这种格式的访问方式。
image.png
首先我们生命一个get_label让它等于一个函数。
image.png
函数里面就是封装的我们这块内容
image.png
把上面复制到函数的封装里面
image.png
放到一个promise里面
image.png
成功就是进入到.then的时候
image.png
catch，把错误拿到这里
image.png
把方法导出出去
image.png

main.js内

image.png
绑定到Vue的实例上
image.png

调用

先来打印下，看看能否打印出正常的内容。
image.png

image.png
调用
image.png
打印成功，但是是一个错误的
image.png
封装的有问题，改成res.result.code
image.png
成功返回数据
image.png

image.png

内容正常的显示了
image.png

优化

这么写还是有一些麻烦，如果我们增加一个别的方法，也要这么去写，导出。
image.png
新建list.js放一些所有和列表相关的内容。
image.png
我们把get_label方法复制过来，用export 直接导出
image.png
index里面导入list里面的这个方法，然后再导出。
image.png
还是能正常的渲染
image.png
可以再声明getList
image.png
直接返回一个请求成功。
image.png

image.png
image.png
image.png

在优化，每次return Promise

在这里来封装网络请求。

image.png
这样会给我们导出一个http的方法
image.png

image.png

list中引用
image.png
image.png
首页的getList先删掉
image.png
数据还是正常显示的
image.png

再优化-批量导出文件

这里写多个函数的话，
image.png

idnex.js内还是要引用很多。不管是新增还是删除方法，这里都要修改。
image.png
image.png
这里的false不是字符串格式的
image.png
这里会报一个错误。get_label是一个不存在的function
image.png
这里我们需要先注释掉
image.png
输出下
image.png
这里也输出它的keys
image.png
keys的值输出
image.png
这样我们就可以用keys的值来做一个循环
image.png
image.png
我们现在不需要.index.js 这是我们的一个输出目录。
image.png
那么我们就把index.js排除掉。
image.png
这样就把list.js排除掉了。
image.png

做对象合并

image.png
再输出module看下
image.png
现在就拿到了我们正常需要导出的格式
image.png
那么我们就在这里导出这个module
image.png
以上就完成了自动导出的功能。
再把我们的api代码放开注释。
image.png
image.png
页面正常显示
image.png
这样以后每次新增我们的云函数后，或者是使用网络请求封装api的时候，我们就可以直接在list里面增加对应的云函数。就可以去正常的调用了。我们只需要维护我们每个文件内的输出就可以了。index.js会帮我们完成自动导出的功能。
image.png
然后main.js内会自动绑定我们的Vue实例的prototype上面。然后再去我们的每一个页面调用。
image.png

这就是一个请求的简单封装。

结束