前端优化:数据监听触发多次请求

最新推荐文章于 2024-07-10 11:21:49 发布

AlexKain

最新推荐文章于 2024-07-10 11:21:49 发布

阅读量1.8k

点赞数 2

分类专栏： vue 文章标签：前端优化

本文链接：https://blog.csdn.net/webfullstack/article/details/89316532

版权

vue 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

场景复现:在列表中使用监听值刷新请求,多个值的情况下,每一个改变值都会触发getList方法,从而导致的多次请求的出现

在这里插入图片描述

代码复现

  computed: {
    watchendDate() {
      return this.params.startDate;
    },
    watchPointType() {
      return this.params.pointType;
    }
  },
  watch: {
    watchendDate(n) {
      this.getList();
    },
    watchPointType(n) {
      this.getList();
    }
  }

目前的解决方法

定义一个全局状态值为false的字段offFirstEnter,当getList()有成功返回时再将offFirstEnter修改为true

解决之后的代码

  watch: {
    watchendDate(n) {
      if(!this.offFirstEnter){return;}
      this.getList();
    },
    watchPointType(n) {
      if(!this.offFirstEnter){return;}
      this.getList();
    }
  }

? 大功告成,解决之后页面请求请求就只有一次了