Vue项目频繁触发YouTube API超配额，如何等待用户输入完成再请求？

你这个场景用防抖（debounce） 逻辑即可实现需求：设置一个等待阈值（通常200~500ms），只有用户停止输入达到阈值时间后才会发起请求，只要用户在阈值内继续输入就会重置计时，不会重复触发请求，能大幅降低API调用次数。

方案1：手写防抖实现（无需额外依赖） #

修改App.vue代码 #

<template>
  <SearchBar @emitTermSearch="onTermSearch"></SearchBar>
  <VideoList :videos="videos"></VideoList>
</template>

<script>
import axios from "axios";
import SearchBar from "./components/SearchBar";
const API_KEY = "hidden";
export default {
  name: "App",
  components: {
    SearchBar
  },
  data() {
    return {
      videos: [],
      requestTimer: null // 新增防抖计时器变量
    };
  },
  methods: {
    onTermSearch(emitTermSearch) {
      // 每次输入先清空之前的计时器，取消未执行的请求
      clearTimeout(this.requestTimer)
      // 重新设置计时器，300ms后无新输入再发起请求
      this.requestTimer = setTimeout(() => {
        axios
        // 原代码此处缺少右括号，已补全
        .get("https://www.googleapis.com/youtube/v3/search", {
          params: {
            key: API_KEY,
            type: "video",
            part: "snippet",
            maxResults: 2,
            order: "date",
            q: emitTermSearch
          }
        }).then(response => {
          this.videos = response.data.items;
        }).catch(err => {
          console.log(err);
        });
      }, 300) // 可自行调整延迟时间，单位为ms
    }
  }
};
</script>

SearchBar.vue无需修改即可正常运行。

方案2：用lodash防抖方法（项目已引入lodash时可选） #

如果项目已经安装了lodash依赖，可直接调用封装好的debounce方法，代码更简洁：

<script>
import axios from "axios";
import { debounce } from 'lodash'
import SearchBar from "./components/SearchBar";
const API_KEY = "hidden";
export default {
  name: "App",
  components: {
    SearchBar
  },
  data() {
    return {
      videos: []
    };
  },
  methods: {
    // 直接用debounce包裹请求逻辑，设置300ms延迟
    onTermSearch: debounce(function(emitTermSearch) {
      axios
      .get("https://www.googleapis.com/youtube/v3/search", {
        params: {
          key: API_KEY,
          type: "video",
          part: "snippet",
          maxResults: 2,
          order: "date",
          q: emitTermSearch
        }
      }).then(response => {
        this.videos = response.data.items;
      }).catch(err => {
        console.log(err);
      });
    }, 300)
  }
};
</script>

300ms的延迟用户几乎感知不到，但可以把连续输入10个字符的10次请求合并为1次，能极大降低API配额消耗。

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