最近要做一个各种连续操作的功能，步骤比较多，想要看一下执行情况，另外顺便看看执行时间。

一开始是直接手撸的，但是代码多了就很难看，也不好维护。于是做了一个小功能。

记录格式

{
      title: '好像没什么用的标题',
      msg: `开始叙述`,
      t1: window.performance.now(), 
      t2: '记录时间'.
      item: ['做个子记录']
    }

结构比较简单，主要是两个时间，一个是开始时间，一个是结束时间，然后就是叙述执行步骤。

然后就是建立数组存放，然后顺便写一个函数管理一下。

实现代码

/**
 * 一个简单的记录执行过程和使用时间的 log
 */
class ShowLog {
  constructor () {
    this.info = reactive([])
  }

  newLog (title, count = 0) {
    this.info.push({
      title,
      msg: `<br>开始添加【${title}】...`,
      t1: window.performance.now(),
      t2: 0,
      item: []
    })
    if (count > 0) {
      this.info[this.info.length - 1].msg = `<br>开始添加【${title}】，共${count}个...`
    }
    return this.info.length - 1
  }

  start (msg = null, index = this.info.length - 1) {
    const _info = this.info[index]
    _info.t1 = window.performance.now()
    _info.msg += `<br>&nbsp;&nbsp;开始添加【${msg}】...`
  }

  end (id, index = this.info.length - 1) {
    const _info = this.info[index]
    _info.t2 = window.performance.now()
    _info.msg += `添加成功！ID：${id}。用时：${_info.t2 - _info.t1}<br>`
    console.log(`===添加【${_info.title}】成功，表ID：${id}`)
  }

  clear () {
    this.info.length = 0
  }
}

比较简陋，想做一个子记录的，但是还没有想好。
好多功能都写死了，比如只是记录添加的情况，修改和删除都没关，先暂时这么用。

使用方法

// 进度提示信息
  const myLog = new ShowLog()

   myLog.newLog('表')
   let res = await service(tableId, 10, moduleInfo.tableModal, -2, 'meta')
   myLog.end(res.newId)

先做一个实例，然后new一条记录，其实就是加一个数组。
然后开始执行程序，等待结束后开始统计。

因为回调地狱实在太难了，所以用 await 的方式假装成顺序执行。

直到遇到了foreach，和想象的还是不一样。

    cols.forEach(async (col, index) => {
      col.tableId = intTableId
      col.columnId = intTableId + (index + 1) * 10
      col.canNull = 0
      col.columnKind = index === 0 ? 11 : 14
      myLog.start(col.colName, logIndex)
      res = await service(columnId, 10, col, -2, 'meta')
      myLog.end(res.newId, logIndex)
    })

本来以为可以在foreach内部等待呢，结果还是先循环完了，然后再等待。

这样的话，要么试试for循环，要么试试子记录。明天再看吧。

执行情况

开始添加【表】...添加成功！ID：10。用时：36.06000001356006

开始添加【字段】，共4个...  // 子记录没有对上。
  开始添加【col_11】...
  开始添加【col_21】...
  开始添加【col_31】...
  开始添加【col_41】...添加成功！ID：24。用时：137.21499999519438
添加成功！ID：25。用时：220.25499999243766
添加成功！ID：26。用时：254.8399999793619
添加成功！ID：27。用时：289.53999999770895

开始添加【模块菜单】...添加成功！ID：10。用时：165.26000000862405

开始添加【列表的分页】...添加成功！ID：10。用时：154.50999999325722

开始添加【列表的按钮】...
  开始添加【添加】...
  开始添加【修改】...
  开始添加【删除】...添加成功！ID：28。用时：97.73999999742955
添加成功！ID：29。用时：131.25000000558794
添加成功！ID：30。用时：253.2399999909103

开始添加【查询】...添加成功！ID：10。用时：159.71999999601394

  开始添加【查询字段：col_11】...
  开始添加【查询字段：col_21】...
  开始添加【查询字段：col_31】...
  开始添加【查询字段：col_41】...添加成功！ID：24。用时：125.05000000214204
添加成功！ID：25。用时：162.320000003092
添加成功！ID：26。用时：275.0600000144914
添加成功！ID：27。用时：316.6100000087172

开始添加【列表】...添加成功！ID：10。用时：189.93999998178333

  开始添加【列表字段：col_11】...
  开始添加【列表字段：col_21】...
  开始添加【列表字段：col_31】...
  开始添加【列表字段：col_41】...添加成功！ID：24。用时：150.10999998729676
添加成功！ID：25。用时：185.95499999355525
添加成功！ID：26。用时：367.2549999896437
添加成功！ID：27。用时：409.14499998278916

开始添加【表单】...添加成功！ID：10。用时：206.70000000996515

  开始添加【表单字段：col_11】...
  开始添加【表单字段：col_21】...
  开始添加【表单字段：col_31】...
  开始添加【表单字段：col_41】...添加成功！ID：24。用时：232.0049999980256
添加成功！ID：25。用时：269.5300000193529
添加成功！ID：26。用时：298.90000002318993
添加成功！ID：27。用时：336.7650000145659

开始添加【后端service】...添加成功！ID：8。用时：238.51499997545034

开始添加【后端 action】...
  开始添加【添加】...
  开始添加【修改】...
  开始添加【删除】...
  开始添加【获取】...
  开始添加【查询】...
  开始添加【获取全部数据】...添加成功！ID：43。用时：134.85499998182058
添加成功！ID：44。用时：198.4449999872595
添加成功！ID：45。用时：235.93499997537583
添加成功！ID：46。用时：313.46999999368563
添加成功！ID：47。用时：357.6699999975972
添加成功！ID：48。用时：398.1349999960512

开始添加【后端model】...添加成功！ID：8。用时：259.1949999909848

基本就是这样。
好像应该加个 try，我不太喜欢加 try，因为不会用。。。

另外计时不准，for 循环并没有等待。

另外这是我写代码写的最长的一次，居然有四百多行，还是重构后的。不重构的话，实在太累。现在能好一点。