主要流程

1.首先本地更新数据，然后请求后台更新数据

先更新数据是为了交互更丝滑，如果等到接口成功再更新，就有点卡顿的感觉。

我这里是更新vuex的数据，所有写了个方法封装。正常的变状态就直接 record.isCollect = !record.isCollect

    handleCollect(record) {
        let dataSource = this.$store.getters.unstructuredData.dataSource
        this.$store.commit('SET_UNSTRUCTURED_DATA_DATA_SOURCE', dataSource.map(item => {
          if (item.id === record.id) {
            item.isCollect = !item.isCollect
          }
          return item
        }))
      },
      //收藏
      collectItem(record) {
        //本地修改值
        this.handleCollect(record)
        collectUnstructuredData(record, this).catch(() => {
          //如果失败，收藏退回原状态
          this.handleCollect(record)
        })
      },

2.后台更新数据前要做防抖处理

如果用户狂点，操作顺序为[未收藏,收藏,未收藏]，此时最后一次和第一次状态一样，那么不需要发送更变的请求。这里用一个布尔值来判断是否是偶数次 后台更新完整代码：

export function collectUnstructuredData(record, that) {
  return new Promise((resolve, reject) => {
    // 如果用户狂点，操作顺序为[未收藏,收藏,未收藏]，此时最后一次和第一次状态一样，那么不发送更变的请求。
    // 这里用布尔值来判断是否是偶数次
    record.isSend = !record.isSend
    //新增防抖，避免用户狂点
    if (that.checkTimer) {
      clearTimeout(that.checkTimer)
    }
    that.checkTimer = setTimeout(() => {
      //状态和第一次不一样时，才需要请求
      if (record.isSend) {
        collectUnstructuredDataById(record, that).catch(res => {
            reject(res)
          }
        ).finally(() => {
          delete record.isSend
          resolve()
        })
      }
    }, 300)
  })
}
/**
 * 根据id收藏或取消收藏
 * @param itemId
 * @returns {Promise<unknown>}
 */
export function collectUnstructuredDataById(record, that) {
  return new Promise((resolve, reject) => {
    let httpurl = ''
    let method = ''
    let params = {}
    if (!record.isCollect) {
      //删除收藏
      httpurl = `/unstructur/documentdata/usercollectingrecord/delete?documentDataSheetId=${record.id}`
      params = {}
      method = 'delete'
    } else {
      //新增收藏
      httpurl = '/unstructur/documentdata/usercollectingrecord/add'
      params = { unstructurDocumentdataDocumentDataSheetId: record.id }
      method = 'post'
    }
    httpAction(httpurl, params, method).then((res) => {
      if (!res.success) {
        that.$notify['error'].call(that, {
          key: 'ErrorNotificationKey',
          message: '操作信息提示',
          description: res.message
        })
        reject(res)
      }
      resolve(res)
    })

  })
}

3.后台更新数据失败后，要把收藏状态变回来

      //收藏
      collectItem(record) {
        //本地修改值
        record.isCollect = !record.isCollect
        collectUnstructuredData(record, this).catch(() => {
        //如果失败，收藏退回原状态
        record.isCollect = !record.isCollect
        })
      },