Vue.js如何实现用户输入完成后调用HTTP请求？

要解决输入每个字符都触发请求的问题，核心是用**防抖（Debounce）**逻辑——等待用户停止输入一段时间后，再执行请求操作。下面提供几种实用的实现方式：

方法一：手动实现防抖逻辑（无需额外依赖） #

在组件内维护一个定时器，每次输入时先清除之前的定时器，再重新设置延迟执行请求：

<template>
  <b-row>
    <b-col md="3" v-for="(header, index) in columns" :key="index">
      <b-form-group>
        <b-form-input
          placeholder="Search"
          type="text"
          class="d-inline-block"
          @input="advanceSearch($event, header.field)"
        />
      </b-form-group>
    </b-col>
  </b-row>
</template>

<script>
export default {
  data() {
    return {
      searchString: [],
      searchTimer: null // 用于存储定时器ID
    }
  },
  methods: {
    advanceSearch(e, field) {
      // 更新对应字段的搜索值，避免重复添加对象
      const existingItemIndex = this.searchString.findIndex(item => Object.keys(item)[0] === field);
      if (existingItemIndex !== -1) {
        this.searchString[existingItemIndex] = { [field]: e };
      } else {
        this.searchString.push({ [field]: e });
      }

      // 防抖逻辑：清除之前的定时器，重新计时
      if (this.searchTimer) clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        this.sendSearchRequest();
      }, 500); // 500ms延迟，可根据需求调整
    },
    sendSearchRequest() {
      // 这里放你的HTTP请求代码
      // http.post().then().catch();
    }
  },
  beforeUnmount() {
    // 组件销毁时清除定时器，避免内存泄漏
    if (this.searchTimer) clearTimeout(this.searchTimer);
  }
}
</script>

方法二：使用Lodash的防抖函数（适合已引入Lodash的项目） #

如果项目中已经使用Lodash，可以直接利用其封装好的_.debounce函数：

<template>
  <!-- 模板部分和方法一相同 -->
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      searchString: []
    }
  },
  methods: {
    advanceSearch(e, field) {
      // 更新对应字段的搜索值
      const existingItemIndex = this.searchString.findIndex(item => Object.keys(item)[0] === field);
      if (existingItemIndex !== -1) {
        this.searchString[existingItemIndex] = { [field]: e };
      } else {
        this.searchString.push({ [field]: e });
      }

      // 调用防抖后的请求方法
      this.debouncedSearch();
    },
    // 创建防抖函数，延迟500ms执行请求
    debouncedSearch: _.debounce(function() {
      // HTTP请求代码
      // http.post().then().catch();
    }, 500)
  },
  beforeUnmount() {
    // 组件销毁时取消防抖任务
    this.debouncedSearch.cancel();
  }
}
</script>

方法三：结合Vue Watch和防抖 #

通过监听searchString的变化，再用防抖触发请求：

<template>
  <!-- 模板部分和方法一相同 -->
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    return {
      searchString: []
    }
  },
  watch: {
    // 深度监听searchString的变化
    searchString: {
      handler: _.debounce(function() {
        this.sendSearchRequest();
      }, 500),
      deep: true // 因为searchString是数组，需要深度监听内部对象变化
    }
  },
  methods: {
    advanceSearch(e, field) {
      // 更新对应字段的搜索值
      const existingItemIndex = this.searchString.findIndex(item => Object.keys(item)[0] === field);
      if (existingItemIndex !== -1) {
        this.searchString[existingItemIndex] = { [field]: e };
      } else {
        this.searchString.push({ [field]: e });
      }
    },
    sendSearchRequest() {
      // HTTP请求代码
      // http.post().then().catch();
    }
  }
}
</script>

注意事项 #

• 延迟时间（如500ms）可根据产品需求调整，平衡响应速度和请求次数；
• 原代码中searchString.push会重复添加相同字段的对象，建议改为更新已有字段值，避免数组冗余；
• 组件销毁时记得清除定时器或防抖任务，防止内存泄漏。

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