优化复杂数据处理与可读性：简化异步函数中的重复逻辑

一.场景及初始应对方案

在vue的开发中，经常会遇到接收后端返回数据并赋值的场景，以往我的方法虽能实现功能，但是也有几个不可否认的缺点，缺乏代码的组织性、可读性和可维护性，而且在未来需求变化时可能会变得难以应对。优化方法旨在解决这些潜在问题，使代码更加整洁、灵活和易于维护。

async getEchartsData() {
      var res = await this.$API.workTable.customer.customerForm.get(this.searchForm);
      if (res.code == 200) {
        this.searchForm.startDate = res.data.startDate;
        this.searchForm.endDate = res.data.endDate;
        this.custData = res.data.initEcharts.data;
        this.custEch();
        this.custAddData = res.data.TwoEcharts.data;
        this.custAddEch();
        this.WXcomData = res.data.threeEcharts.data;
        this.WXschedule = res.data.threeEcharts.per;
        this.WXComEch();
        this.WXDateData = res.data.fourEcharts.data;
        this.WXDateEch();
        this.custWantData = res.data.fiveEcharts.data;
        this.custWantEch();
        this.custWantAddData = res.data.sixEcharts.data;
        this.custWantAddEch();
        this.custImpData = res.data.eightEcharts.data;
        this.custImpEch();
        this.custAddImpData = res.data.nineEcharts.data;
        this.custImpAddEch();
        this.dayDealData = res.data.sevenEcharts;
        this.custDealEch();
      } else {
        this.$message.error(res.msg);
        return;
      }
    },

这样的代码，光是看都能看花眼，后期维护更是十分麻烦，于是有了以下的优化。

二.通过使用函数式编程的 reduce 方法来减少代码重复

async getEchartsData() {
      try {
        const res = await this.$API.workTable.customer.customerForm.get(this.searchForm);
        if (res.code !== 200) {
          this.$message.error(res.msg);
          return;
        }

        const data = res.data;
        this.searchForm.startDate = data.startDate;
        this.searchForm.endDate = data.endDate;

        const echartsDataMapping = [
          { key: "initEcharts", dataKey: "custData", echFunc: "custEch" },
          { key: "TwoEcharts", dataKey: "custAddData", echFunc: "custAddEch" },
          { key: "threeEcharts", dataKey: "WXcomData", echFunc: "WXComEch" },
          { key: "fourEcharts", dataKey: "WXDateData", echFunc: "WXDateEch" },
          { key: "fiveEcharts", dataKey: "custWantData", echFunc: "custWantEch" },
          { key: "sixEcharts", dataKey: "custWantAddData", echFunc: "custWantAddEch" },
          { key: "sevenEcharts", dataKey: "dayDealData", echFunc: "custDealEch" },
          { key: "eightEcharts", dataKey: "custImpData", echFunc: "custImpEch" },
          { key: "nineEcharts", dataKey: "custAddImpData", echFunc: "custImpAddEch" },
        ];

        echartsDataMapping.reduce((_, item) => {
          this[item.dataKey] = data[item.key].data;
          this[item.echFunc]();
        }, null);

        this.WXschedule = data.threeEcharts.per;
      } catch (error) {
        console.error("Error fetching echarts data:", error);
      }
    },

虽然这个版本中的代码量减少并不显著，但它更具有可读性和可维护性，因为它更清晰地表达了重复逻辑的处理方式。

三.通过创建一个辅助函数来处理重复的逻辑，从而优化这个函数的结构和可读性。

 async getEchartsData() {
      try {
        const res = await this.$API.workTable.customer.customerForm.get(this.searchForm);
        await this.updateEchartsData.call(this, res);
      } catch (error) {
        console.error("Error fetching echarts data:", error);
      }
    },
    async updateEchartsData(res) {
      if (res.code === 200) {
        const data = res.data;
        this.searchForm.startDate = data.startDate;
        this.searchForm.endDate = data.endDate;

        const echartsDataMapping = [
          { key: "initEcharts", dataKey: "custData", echFunc: "custEch" },
          { key: "TwoEcharts", dataKey: "custAddData", echFunc: "custAddEch" },
          { key: "threeEcharts", dataKey: "WXcomData", echFunc: "WXComEch" },
          { key: "fourEcharts", dataKey: "WXDateData", echFunc: "WXDateEch" },
          { key: "fiveEcharts", dataKey: "custWantData", echFunc: "custWantEch" },
          { key: "sixEcharts", dataKey: "custWantAddData", echFunc: "custWantAddEch" },
          { key: "sevenEcharts", dataKey: "dayDealData", echFunc: "custDealEch" },
          { key: "eightEcharts", dataKey: "custImpData", echFunc: "custImpEch" },
          { key: "nineEcharts", dataKey: "custAddImpData", echFunc: "custImpAddEch" },
        ];

        echartsDataMapping.forEach((item) => {
          this[item.dataKey] = data[item.key].data;
          this[item.echFunc]();
        });

        this.WXschedule = data.threeEcharts.per;
      } else {
        this.$message.error(res.msg);
      }
    },

这个版本中，我们首先创建了一个名为 updateEchartsData 的函数，它处理了解构和数据更新的重复逻辑。然后，使用一个包含键名、数据属性和 echarts 函数的映射数组，循环遍历并更新数据。最后，将 updateEchartsData 函数集成到 getEchartsData 函数中，以实现获取数据并更新的功能。这样的优化版本提高了代码的可维护性和可读性。 

 结语

在编程的世界里，不断追求代码的优雅和高效是每位开发者的永恒追求。通过本文的探讨，我们深入了解了如何通过代码重构和函数式编程的方法来优化复杂的异步函数逻辑。从最初冗长而重复的代码，到经过逐步优化后更加清晰、简洁的结构，我们见证了优化的力量。无论是在项目中提升代码质量，还是在个人技能的成长过程中，这些优化技巧都是无价的财富。

通过将相似的操作封装成函数、利用循环和数组来减少冗余，我们有效地消除了代码中的重复性和低效性。这种优化不仅使代码更具可读性，还使得维护变得轻松。同时，我们也了解到如何通过函数式编程的思想，将代码从繁琐的操作中解脱出来，以更模块化和灵活的方式构建功能。

在你的编程旅程中，不断地寻求优化的机会，不仅能够提升代码的品质，还能够提高自己的技术能力。无论是在解决现实问题还是追求代码的美感，优化都将成为你前进道路上的有力助推器。让我们在代码的世界里，不断探索、学习和创造，追求更高效、更清晰的编程艺术。