为了减少重复书写同样的数据请求代码，我们需要将类似的请求进行封装

一、封装请求列表数据类请求

第一步我们需要创建一个api目录，并创建一个index.js文件，再创建一个列表数据请求get_list.js文件
在get_list.js中书写以下代码：

  1. export const get_list = (parames) => {
  2.     return new Promise((reslove,reject) => {//返回一个Promise对象实例
  3.         uniCloud.callFunction({
  4.             name: parames.name//传入需要执行的云函数名称
  5.             data: parames.data//传入客户端需要提交的数据
  6.         }).then((res) => {
  7.             if(res.result.code === 200) {//判断客户端响应状态码
  8.                 reslove(res.result)//返回正确结果
  9.             }else {
  10.                 reject(res.result)//返回错误结果
  11.             }
  12.         }).catch((err) => {
  13.             reject(err)//抛出异常
  14.         })
  15.     })
  16. }

第二步在index.js中导入get_list.js

  1. import {get_list} from './get_list.js'
  3. export default {
  4.     get_list
  5. }

第三步在main.js中导入index.js并挂载到Vue实例上

  1. import api from '@/common/api/index.js'
  2. Vue.prototype.$api = api

到此我们就可以在想用的地方通过this.$api.get_list()方法来进行请求了，如下代码：

  1. this.$api.get_list({name:'get_article_list'}).then((res) => {
  2.                     console.log(res)
  3. })

二、对该封装进行下一步改善

根据上面的代码，我们实现了第一步封装，但会发现，我们每写一个数据请求时，都需要像get_list.js中那样返回一个Promise对象，于是我们需要新建一个http目录，并创建一个http.js文件，将get_list.js中的Promise代码移植到http.js中，并将其导出：

  1. export default function $http(parames) {
  2.     return new Promise((reslove,reject) => {
  3.         uniCloud.callFunction({
  4.             name: parames.name,
  5.             data: parames.data
  6.         }).then((res) => {
  7.             if(res.result.code === 200) {
  8.                 reslove(res.result)
  9.             }else {
  10.                 reject(res.result)
  11.             }
  12.         }).catch((err) => {
  13.             reject(err)
  14.         })
  15.     })
  16. }

随后在get_list.js中引入，并书写以下代码：

  1. import $http from '../http/http.js'
  3. export const get_list = (parames) => {
  4.     return $http({
  5.         name: parames.name,
  6.         data: parames.data
  7.     })
  8. }

这样我们每次新增一个请求时只需要返回一个$http方法，并将执行的云函数名和参数传入即可

三、改善index.js使其实现自动化导入

现在我们每增加一个数据请求文件，都需要在index.js中引入并导出，当文件比较多的时候我们处理就比较麻烦，所以我们在这运用require.context()方法实现自动化导出,其第一个参数是需要导出的目录地址，第二个参数是是否遍历子目录，第三个参数是，我们需要遍历什么样的文件，此处我们的目录结构如图：
Snipaste_2021-01-31_13-32-52.png
index.js文件代码如下：

  1. const requireApi = require.context(
  2.     '.',//遍历当前目录
  3.     false,//不遍历子目录
  4.     /.js$///遍历以.js结尾的文件
  5. )
  6. let mod = {}
  7. requireApi.keys().forEach((key, index) => {
  8.     if(key === './index.js') return
  9.     Object.assign(mod, requireApi(key))
  10. })
  11. export default mod

自动化导出到此就完工了！