uni-app中如何模块化封装接口请求

为了让前端所请求的接口进行分类，需更好得封装并模块化调用接口。比如把操作label表的接口专门放在一个js文件中，把操作list表的接口也专门放在一个js文件中，而不是把不同的接口都塞在同一个文件中，所以我们需要对接口进行完美得封装。一下以在uni-app中如何封装接口为例子：
1.在根目录下创建公共文件夹common,并在common下创建api文件夹和http.js文件

2.api文件夹下建立index.js文件，该文件用于合并所有接口文件并批量导出所有的接口请求，然后建立label.js和list.js用于测试

common/api/index.js文件中的代码为：

// 该文件用于合并所有接口文件并批量导出所有的接口请求
const requireApi = require.context(
	// api 的相对路径
	'.',
	// 是否查询子目录
	false,
	// 查询文件的后缀
	/.js$/
)
let module = {} // 用于存放接口并一起导出
requireApi.keys().forEach((key,index) => {
	if(key == './index.js') return // 过滤index.js文件
	Object.assign(module,requireApi(key))
})
//导出所有接口请求
export default module

common/api/label.js文件中的代码为：

import $http from '../http.js';

export const get_label = (data) => {
	return $http({
		url: 'get_label',
		data
	})
}

common/api/list.js文件中的代码为(和label文件类似，都是用于存放接口请求的原函数)：

import $http from '../http.js';

export const get_list = (data) => {
	return $http({
		url: 'get_list',
		data
	})
}

export const add_list = (data) => {
	return $http({
		url: 'add_list',
		data
	})
}

common/http.js文件中的代码为(对接口请求的专门封装)：

export default function $http(options) {
	const {
		url,
		data
	} = options
	return new Promise((resolve,reject) => {
		uniCloud.callFunction({
			name: url,
			data
		}).then((res) => {
			if(res.result.code == 200){
				resolve(res.result)
			}else{
				reject(res.result)
			}
		}).catch((err) => {
			reject(res.result)
		})
	})
}

3.在main.js文件中全局引入common/api/index.js文件

4.在页面中调用

console.log(this.$api) // 输出的是所有接口请求的一个对象，如下：

大功告成，以后在接口请求的模块文件中写完接口请求原函数后，直接在页面中使用this.$api.接口名，即可调用接口并返回数据。