优化代码篇一（调接口的写法）

不爱吃糖的程序媛

发布于 2024-01-18 20:40:05

830

发布于 2024-01-18 20:40:05

文章被收录于专栏：夏天的前端笔记夏天的前端笔记

背景1：

今日将代码进行了优化，就是单选框里，点击确定分别调用不同的接口效果如图：

上代码：

 //修改房间状态
    updateRoomStatus() {
      let apiMethod=''
      apiMethod=this.roomStatus===0?'changeRoomStatusSelf':'changeRoomStatusIdle';//本质上是定义一个变量，对变量进行判断
        this.$api.building[apiMethod](this.id)
          .then(
            res => {
            if (res && res.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.dialogRoomStatus = false;
              this.cacheIndex = this.currentIndex;
              this.getRoomList({
                buildingId: this.roomDetail.room.buildingId
              });
              this.getRoomStatusCount(this.roomDetail.room.buildingId);
            }
          })
    },

背景2：

调用数据接口后，loading写在了finally的后面

思考：

为什么要加finally,有什么好处吗？还有就是finally后面可以加catch，但是有必要吗？

 initData() {
      this.loading = true;
      const { page, size } = this.pagingProps;
      DrugDeliverServiceList.list(page, size, this.form)
        .then(res => {
          if (res.code === 0) {
            const data = res.result;
            this.tableData = [];
            this.tableData = data.content.map(item => {
              return {
                ...item,
                isLack: item.isLack === 1 ? "是" : "否",
                management: this.changeData(item.dmanagement)
              };
            });
            this.pagingProps.total = data.totalElements;
          }
        })
        .finally(() => {
          this.loading = false;//loading写在了finally的后面
        });
    },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-07-03，如有侵权请联系 cloudcommunity@tencent.com 删除

接口