前言：

属于纪实篇吧，日常工作的一部分记录....

实际代码：

* 发布
 */
const publishSubject = (type) => {
  let idList = [];
  if (selectData.value && selectData.value.length > 0) {
    selectData.value.forEach((item) => {
      idList.push(item.classId);
    });
    loading.value = true;
    let params = {
      classIdList: idList.map((item) => item).toString(),
    };

    Service.useHttp("publishManageClass", params)
      .then((res) => {
        if (res.success == true) {
          if (res.returnObj) {
            ElMessage({
              type: "success",
              message: type == "tps02" ? "发布成功！" : "取消发布成功！",
            });
            loading.value = false;
          } else {
            loading.value = false;
          }
          refreshTable(query.pageNum);
        }
      })
      .catch((err) => {
        loading.value = false;
      });
    loading.value = false;
  } else {
    ElMessage({
      type: "warning",
      message:
        type == "tps02" ? "请勾选要发布的班级" : "请勾选要取消发布的班级",
    });
  }
};

优化

先想到了2个点的优化
1、selectData 列表选中的数据，提取id，然后拼装成数组，写的有点啰嗦，复杂
2、if else判断，先进行前置拦截

来，看第一步

selectData.value.forEach((item) => {
      idList.push(item.questionId);
    });
    loading.value = true;
    let params = {
      classIdList: idList.map((item) => item).toString(),
    };

优化后：

loading.value = true;
const classIdList = getExtEle(selectData.value, "classId");

继续第二步，前置判断处理

if (selectData.value && selectData.value.length > 0) {
....
}else{
 ElMessage({
      type: "warning",
      message:
        type == "tps02" ? "请勾选要发布的班级" : "请勾选要取消发布的班级",
 });
}

优化后：

  if (!selectData.value || !selectData.value.length) {
    ElMessage({
      type: "warning",
      message:
        type == "tps02" ? "请勾选要发布的班级" : "请勾选要取消发布的班级",
    });
    return;
  }

其他优化：promise then 方式，更换 async await 以及解构

    Service.useHttp("publishManageClass", params)
      .then((res) => {
        if (res.success == true) {
          if (res.returnObj) {
            ElMessage({
              type: "success",
              message: type == "tps02" ? "发布成功！" : "取消发布成功！",
            });
            loading.value = false;
          } else {
            loading.value = false;
          }
          refreshTable(query.pageNum);
        }
      })
      .catch((err) => {
        loading.value = false;
      });
    loading.value = false;

优化后

  const { success } = await Service.useHttp("publishManageClass", classIdList);
  if (success) {
    ElMessage({
      type: "success",
      message: type == "tps02" ? "发布成功！" : "取消发布成功！",
    });
    loading.value = false;
    refreshTable(query.pageNum);
  }

这就完了吗？还没有。

继续优化

  const result = await Controller.publish(classIdList);

  if (result) {
    ElMessage({
      type: "success",
      message: type == "tps02" ? "发布成功！" : "取消发布成功！",
    });
    loading.value = false;
    refreshTable(query.pageNum);
  }

是不是发现了，Controller.publish，说一下思路吧，主要目的是把请求提取出来，对于CRUD做独立管理。

Controller 的实现

/**
 * @description: 服务器请求控制器
 * @param NO
 * @return {*}
 */
class MService {
  // 发布
  async publish(data) {
    const { success } = await Service.useHttp("publishManageClass", data);
    return success;
  }
  // 更新班级
  async updateClass(data) {
    const { success } = await Service.useHttp("addManageClass", data);
    return success;
  }
  // 查询
  async query(data) {
    const { returnObj } = await Service.useHttp("getManageClassPageList", data);
    return {
      data: returnObj?.list,
      total: returnObj?.total,
    };
  }
  // 删除班级
  async deleteClass(data) {
    const { success } = await Service.useHttp("deleteManageClass", data);
    return success;
  }
  // 查询课程
  async getCourseList(data) {
    const { returnObj } = await Service.useHttp("getCourseList", data);
    return returnObj;
  }
}
const Controller = new MService()

export {
  Controller
}

上述的文件放在当前功能模块下的 models.js

models.js

定义了使用 CRUD 处理数据库的函数。每一个函数都代表了一种行为（读取一个数据、读取所有数据、编辑数据、删除数据等）