if else逻辑异常排查：数据发送端连接状态判断错误

需求与问题现象 #

需求为判断数据发送端与数据表的连接状态：当收到新数据（新请求的id与上次存储的id不同）时标记为connected，无新数据时标记为disconnected。但实际运行时，无新数据（两次id相同）的场景下，控制台却显示connected状态，与预期不符。

实现代码 #

<script>
export default {
  data() {
    return {
      search: '',
      tag_id: ['bts_d02c2b7d9098aaa2', 'bts_c077ffaa9098aaa2'],
      headers: [
        {
          text: 'Tags',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'wifi', value: 'wifi' },
      ],
      val_ia: 0,
      desserts: [],
      id_memory: [],
    }
  },
  mounted() {
    this.CreateTable();
    setInterval(this.getDatafor, 1000)
  },
  methods: {
    CreateTable() {
      for (let i = 0; i < this.tag_id.length; i++) {
        this.desserts.push(
          {
            name: this.tag_id[i],
          },
        )
      }
    },

    async getDatafor() {
      for (let i = 0; i < this.desserts.length; i++) {
        this.val_ia = i;
        await Promise.all([this.getAllData()]);
      }
    },

    async getAllData() {
      const tag_id_name = encodeURIComponent(this.tag_id[this.val_ia]);
      const url = this.$api.getRESTApiUri() + `/all/last_id/${tag_id_name}`;
      return fetch(url)
        .then(res => res.text())
        .then((result) => {
          console.log(tag_id_name)
          console.log(this.id_memory[this.val_ia]);
          console.log(data[0].id)
          const b = this.Test(this.id_memory[this.val_ia], data[0].id);
          console.log(b)
          if(b){
            this.desserts[this.val_ia].wifi = 'connecté'
            console.log('connecté')
          }else{
             this.desserts[this.val_ia].wifi = 'déconnecté'
            console.log('déconnecté')
          }
          this.id_memory[this.val_ia] = data[0].id
        })
        .catch((error) => {
          console.log(error)
        });
    },
    Test(x, y) {
      const a = x !== y
      return a
    },
  }
}
</script>

问题原因分析 #

• 接口返回数据未正确解析：getAllData中使用res.text()获取接口返回，但后续直接使用未定义的data变量访问data[0].id。正确做法是将res.text()改为res.json()，并将解析后的结果赋值给data，否则data可能为全局变量或undefined，导致与id_memory中的值比较时出现非预期的true结果。
• 初始状态未处理：id_memory初始为空数组，第一次请求时this.id_memory[this.val_ia]为undefined，若接口返回的id有值，undefined !== id会返回true，被误判为有新数据，标记为connected。需要在初始化时给id_memory的对应位置设置初始值（如null），或首次请求时直接存储初始id而不进行状态判断。
• 变量竞态风险：val_ia作为实例变量被用于循环中的异步操作，虽然当前逻辑中使用await避免了大部分问题，但仍存在被其他操作意外修改的可能，建议改为将索引作为参数传递给getAllData，避免依赖实例变量。

内容的提问来源于stack exchange，提问作者Guts